{"id":12472,"library":"vue-feather","title":"Vue Feather Icons Component","description":"Vue Feather is a component library providing easy integration of Feather icons into Vue 3 applications. The current stable version is `2.0.0`, which marks a significant upgrade to support Vue 3, diverging from previous versions compatible with Vue 2. The library follows Semantic Versioning guidelines, indicating predictable updates. Key differentiators include its lightweight nature, use of functional components for enhanced performance, and extensive customization options via props such as `animation`, `size`, `stroke`, and `type`. It functions as a wrapper around the `feather-icons` library, which must be installed separately as a peer dependency, providing the underlying SVG assets. Releases are infrequent but align with major Vue and Feather Icons updates, focusing on stability and compatibility.","status":"active","version":"2.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/fengyuanchen/vue-feather","tags":["javascript","icons","feather","feather-icons","vue","vue3","vue-component","front-end","web","typescript"],"install":[{"cmd":"npm install vue-feather","lang":"bash","label":"npm"},{"cmd":"yarn add vue-feather","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-feather","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Provides the SVG icon data. Must be installed separately as a peer dependency.","package":"feather-icons","optional":false},{"reason":"Required as the core framework. Version 2.x of vue-feather requires Vue 3.","package":"vue","optional":false}],"imports":[{"note":"This is the default export for the Vue 3 component. Use this for global or local component registration in your application.","symbol":"VueFeather","correct":"import VueFeather from 'vue-feather';"},{"note":"Vue 3 applications primarily utilize ECMAScript Modules (ESM). Attempting to use CommonJS 'require' syntax will result in module resolution errors or runtime failures in most modern setups.","wrong":"const VueFeather = require('vue-feather');","symbol":"VueFeather","correct":"import VueFeather from 'vue-feather';"},{"note":"The `VueFeather` component is provided as a default export from the package. Trying to import it using named import syntax (with curly braces) will result in `undefined` or a module resolution error.","wrong":"import { VueFeather } from 'vue-feather';","symbol":"VueFeather","correct":"import VueFeather from 'vue-feather';"}],"quickstart":{"code":"import { createApp } from 'vue';\nimport VueFeather from 'vue-feather';\n\nconst app = createApp({\n  template: `\n    <div>\n      <h1>Feather Icons Example</h1>\n      <vue-feather type=\"feather\" animation=\"pulse\" size=\"36\"></vue-feather>\n      <vue-feather type=\"activity\" stroke=\"red\" stroke-width=\"3\"></vue-feather>\n      <vue-feather type=\"camera\" fill=\"blue\" size=\"48\"></vue-feather>\n    </div>\n  `\n});\n\n// Register the component globally\napp.component(VueFeather.name, VueFeather);\n\napp.mount('#app');\n\n// To run this, you'd typically have an index.html with <div id=\"app\"></div>\n// and script type=\"module\" src=\"main.js\" (assuming this file is main.js).","lang":"typescript","description":"Demonstrates how to install `vue-feather` and register it globally in a Vue 3 application, then use multiple Feather icons in a component template with various props."},"warnings":[{"fix":"For existing Vue 2 projects, stick to `npm install vue-feather@^1`. For Vue 3 projects, ensure all related dependencies are also Vue 3 compatible.","message":"Version `2.0.0` of `vue-feather` upgraded to support Vue 3. Applications using Vue 2 must remain on `vue-feather` v1.x.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Install `feather-icons` explicitly: `npm install feather-icons@^4` or `pnpm add feather-icons@^4`.","message":"The `feather-icons` package is a required peer dependency and must be installed alongside `vue-feather` for the icons to render correctly.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"If upgrading from very old versions, update any custom CSS rules from `.vue-feather` to `.feather`.","message":"In version `0.2.0`, the root element's class name for the icon component was changed from `vue-feather` to `feather`. This can break existing CSS selectors targeting the old class.","severity":"breaking","affected_versions":">=0.2.0 <2.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 either globally register the component using `app.component(VueFeather.name, VueFeather);` or locally import it and add it to your component's `components` option: `import VueFeather from 'vue-feather'; export default { components: { VueFeather } };`","cause":"The `VueFeather` component has not been correctly registered with the Vue application or is not imported into the component where it's being used.","error":"[Vue warn]: Failed to resolve component: vue-feather"},{"fix":"Install the `feather-icons` package using your preferred package manager: `npm install feather-icons@^4` or `yarn add feather-icons@^4` or `pnpm add feather-icons@^4`.","cause":"The `feather-icons` package, a required peer dependency, is not installed in your project.","error":"Error: Cannot find module 'feather-icons' or Module not found: Error: Can't resolve 'feather-icons'"},{"fix":"Verify your import statement is `import VueFeather from 'vue-feather';` for Vue 3 applications.","cause":"This typically occurs when `VueFeather` is `undefined`, often due to an incorrect import statement (e.g., trying to use `require` in an ESM context or using named import syntax for a default export).","error":"Uncaught TypeError: Cannot read properties of undefined (reading 'name')"}],"ecosystem":"npm"}