Vue Feather Icons

5.1.0 · abandoned · verified Sun Apr 19

vue-feather-icons provides a comprehensive collection of open-source icons from Feather Icons, delivered as lightweight Vue functional components. It is designed for efficiency, leveraging ES module imports to enable tree-shaking, which ensures that only the icons explicitly used are included in the final application bundle. The current stable version is 5.1.0, with its last release in August 2020. Due to this lack of recent activity, the project appears to be unmaintained, which may lead to compatibility issues with newer versions of Vue (e.g., Vue 3) or modern build tools. Its key differentiators include direct integration as Vue components, a strong focus on minimizing bundle size through explicit import patterns, and the aesthetic appeal of Feather Icons, setting it apart from more generically bundled icon libraries.

Common errors

```
Failed to resolve component: [IconName]-icon
```
cause The icon component was used in a Vue template without being properly imported and registered in the component's `components` option.

fix Ensure you `import { IconName } from 'vue-feather-icons'` (or per-file `import IconName from 'vue-feather-icons/icons/IconName'`) and then add `IconName` to the `components` object of your Vue component (e.g., `components: { IconName }`).
```
Icons appear too small or too large after upgrading to v5.x.x.
```
cause Version 5.0.0 changed the default icon size unit from pixels to `1em`, making icons scale with the parent font size. Existing markup relying on previous default sizing will be affected.

fix Explicitly set the `size` prop on your icon components. For example, `<activity-icon size="24"></activity-icon>` for 24px, or `<activity-icon size="1.5x"></activity-icon>` for 1.5 times the current font size.
```
require is not defined in ES module scope
```
cause Attempting to use `const { IconName } = require('vue-feather-icons')` in an environment configured for ES Modules (e.g., modern Vue CLI, Vite, or a browser with `type="module"`).

fix Replace `require()` statements with ES Module `import` syntax: `import { IconName } from 'vue-feather-icons'`.

Warnings

breaking In version 5.0.0, the default `width` and `height` of icons changed from fixed pixel values to `1em`. This makes icons scale with the parent's font size. You must explicitly set the `size` prop or `width`/`height` attributes to restore previous behavior.
Fix: Set the `size` prop to a pixel value (e.g., `size="24"`) or a multiple of `em` (e.g., `size="1.5x"`) on each icon component.
gotcha The `vue-feather-icons` package has not seen updates since August 2020 (v5.1.0). This indicates it is likely unmaintained and may not be compatible with Vue 3 or newer versions of build tools, potentially causing unexpected issues or requiring manual workarounds.
Fix: For new Vue 3 projects, consider actively maintained alternatives like `vue-remixicon`, `heroicons`, or migrating to a component library that includes its own icon set. For existing Vue 2 projects, proceed with caution and thorough testing.
gotcha To effectively leverage tree-shaking and minimize bundle size, it's recommended to use named ES imports (e.g., `import { ActivityIcon } from 'vue-feather-icons'`). For even finer-grained control or if standard tree-shaking isn't fully optimizing, you can import icons directly from their individual files (e.g., `import ActivityIcon from 'vue-feather-icons/icons/ActivityIcon'`).
Fix: Ensure your build setup uses a module bundler like Webpack or Rollup configured for tree-shaking, and consistently use ES module `import` statements.

Install

npm install vue-feather-icons npm
yarn add vue-feather-icons yarn
pnpm add vue-feather-icons pnpm

Imports

AirplayIcon
wrong:
```
import AirplayIcon from 'vue-feather-icons'
```
correct:
```
import { AirplayIcon } from 'vue-feather-icons'
```
Icons are provided as named exports. Default import is incorrect for individual icons.

ActivityIcon

wrong:

import { ActivityIcon } from 'vue-feather-icons/icons/ActivityIcon'

correct:

import ActivityIcon from 'vue-feather-icons/icons/ActivityIcon'

For per-file imports (enhanced tree-shaking), icons are default exports from their specific file paths.

AirplayIcon
wrong:
```
const { AirplayIcon } = require('vue-feather-icons')
```
correct:
```
import { AirplayIcon } from 'vue-feather-icons'
```
While CommonJS `require` might work in some setups, modern Vue CLI projects and Vite favor ES Modules (`import`). Using `require` is generally discouraged and can lead to issues with tree-shaking or module resolution.

Quickstart

Demonstrates importing and rendering multiple Feather Icons as Vue components, showing different sizing options (relative, pixel) and basic styling. This example is tailored for Vue 2.x.

import { defineComponent, h } from 'vue';
import { ActivityIcon, AirplayIcon, AtSignIcon } from 'vue-feather-icons';

const App = defineComponent({
  name: 'IconShowcase',
  components: {
    ActivityIcon,
    AirplayIcon,
    AtSignIcon,
  },
  template: `
    <div id="app" style="font-family: sans-serif; display: flex; flex-direction: column; align-items: center;">
      <h1>Vue Feather Icons Example</h1>
      <div style="display: flex; gap: 20px; font-size: 2em; margin-bottom: 20px;">
        <activity-icon size="1.5x" style="color: #007bff;" />
        <airplay-icon size="32" style="color: #28a745;" />
        <at-sign-icon style="color: #ffc107;" />
      </div>
      <p>Icons adapt to parent font-size by default. You can customize `size` with multiples (e.g., `1.5x`) or pixels (e.g., `32`).</p>
      <p>This package is designed for Vue 2.x and has not been updated for Vue 3.</p>
    </div>
  `,
});

// For a typical Vue 2 setup:
// new Vue({
//   render: h => h(App)
// }).$mount('#app');

// For a browser environment or minimal setup, assuming Vue is globally available:
// const el = document.createElement('div');
// el.id = 'app';
// document.body.appendChild(el);
// new Vue(App).$mount('#app');

// In a modern build setup, you'd typically mount it like this:
// import { createApp } from 'vue'; // For Vue 3, this package might not be compatible.
// createApp(App).mount('#app');

view raw JSON →