{"id":12471,"library":"vue-feather-icons","title":"Vue Feather Icons","description":"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.","status":"abandoned","version":"5.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/egoist/vue-feather-icons","tags":["javascript"],"install":[{"cmd":"npm install vue-feather-icons","lang":"bash","label":"npm"},{"cmd":"yarn add vue-feather-icons","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-feather-icons","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Icons are provided as named exports. Default import is incorrect for individual icons.","wrong":"import AirplayIcon from 'vue-feather-icons'","symbol":"AirplayIcon","correct":"import { AirplayIcon } from 'vue-feather-icons'"},{"note":"For per-file imports (enhanced tree-shaking), icons are default exports from their specific file paths.","wrong":"import { ActivityIcon } from 'vue-feather-icons/icons/ActivityIcon'","symbol":"ActivityIcon","correct":"import ActivityIcon from 'vue-feather-icons/icons/ActivityIcon'"},{"note":"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.","wrong":"const { AirplayIcon } = require('vue-feather-icons')","symbol":"AirplayIcon","correct":"import { AirplayIcon } from 'vue-feather-icons'"}],"quickstart":{"code":"import { defineComponent, h } from 'vue';\nimport { ActivityIcon, AirplayIcon, AtSignIcon } from 'vue-feather-icons';\n\nconst App = defineComponent({\n  name: 'IconShowcase',\n  components: {\n    ActivityIcon,\n    AirplayIcon,\n    AtSignIcon,\n  },\n  template: `\n    <div id=\"app\" style=\"font-family: sans-serif; display: flex; flex-direction: column; align-items: center;\">\n      <h1>Vue Feather Icons Example</h1>\n      <div style=\"display: flex; gap: 20px; font-size: 2em; margin-bottom: 20px;\">\n        <activity-icon size=\"1.5x\" style=\"color: #007bff;\" />\n        <airplay-icon size=\"32\" style=\"color: #28a745;\" />\n        <at-sign-icon style=\"color: #ffc107;\" />\n      </div>\n      <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>\n      <p>This package is designed for Vue 2.x and has not been updated for Vue 3.</p>\n    </div>\n  `,\n});\n\n// For a typical Vue 2 setup:\n// new Vue({\n//   render: h => h(App)\n// }).$mount('#app');\n\n// For a browser environment or minimal setup, assuming Vue is globally available:\n// const el = document.createElement('div');\n// el.id = 'app';\n// document.body.appendChild(el);\n// new Vue(App).$mount('#app');\n\n// In a modern build setup, you'd typically mount it like this:\n// import { createApp } from 'vue'; // For Vue 3, this package might not be compatible.\n// createApp(App).mount('#app');","lang":"javascript","description":"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."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=5.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=5.1.0"},{"fix":"Ensure your build setup uses a module bundler like Webpack or Rollup configured for tree-shaking, and consistently use ES module `import` statements.","message":"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'`).","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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 }`).","cause":"The icon component was used in a Vue template without being properly imported and registered in the component's `components` option.","error":"Failed to resolve component: [IconName]-icon"},{"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.","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.","error":"Icons appear too small or too large after upgrading to v5.x.x."},{"fix":"Replace `require()` statements with ES Module `import` syntax: `import { IconName } from 'vue-feather-icons'`.","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\"`).","error":"require is not defined in ES module scope"}],"ecosystem":"npm"}