vue-feather

library2.0.0jsnpmunverified

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.

web-framework

npm install vue-feather

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-FEATHER

vue-feather

web-frameworkjavascriptv2.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueFeather

✓ import VueFeather from 'vue-feather';

This is the default export for the Vue 3 component. Use this for global or local component registration in your application.

VueFeather

✓ import VueFeather from 'vue-feather';

✗ const VueFeather = require('vue-feather');

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.

VueFeather

✓ import VueFeather from 'vue-feather';

✗ import { VueFeather } from 'vue-feather';

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.

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.

import { createApp } from 'vue'; import VueFeather from 'vue-feather'; const app = createApp({ template: ` <div> <h1>Feather Icons Example</h1> <vue-feather type="feather" animation="pulse" size="36"></vue-feather> <vue-feather type="activity" stroke="red" stroke-width="3"></vue-feather> <vue-feather type="camera" fill="blue" size="48"></vue-feather> </div> ` }); // Register the component globally app.component(VueFeather.name, VueFeather); app.mount('#app'); // To run this, you'd typically have an index.html with <div id="app"></div> // and script type="module" src="main.js" (assuming this file is main.js).

Debug

Known issues

breakingVersion `2.0.0` of `vue-feather` upgraded to support Vue 3. Applications using Vue 2 must remain on `vue-feather` v1.x.

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.

affects: >=2.0.0

gotchaThe `feather-icons` package is a required peer dependency and must be installed alongside `vue-feather` for the icons to render correctly.

fix

Install `feather-icons` explicitly: `npm install feather-icons@^4` or `pnpm add feather-icons@^4`.

affects: >=0.1.0

breakingIn 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.

fix

If upgrading from very old versions, update any custom CSS rules from `.vue-feather` to `.feather`.

affects: >=0.2.0 <2.0.0

Errors

Common errors & fixes

[Vue warn]: Failed to resolve component: vue-feather

The `VueFeather` component has not been correctly registered with the Vue application or is not imported into the component where it's being used.

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 } };`

Error: Cannot find module 'feather-icons' or Module not found: Error: Can't resolve 'feather-icons'

The `feather-icons` package, a required peer dependency, is not installed in your project.

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`.

Uncaught TypeError: Cannot read properties of undefined (reading 'name')

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).

fix

Verify your import statement is `import VueFeather from 'vue-feather';` for Vue 3 applications.

Upgrade

Version history

2.0.0latest on npm

Audit

Dependencies

feather-iconsrequiredProvides the SVG icon data. Must be installed separately as a peer dependency.

vuerequiredRequired as the core framework. Version 2.x of vue-feather requires Vue 3.

Agent activity

13 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/fengyuanchen/vue-feather ↗

packagehttps://www.npmjs.com/package/vue-feather ↗

homepagehttps://fengyuanchen.github.io/vue-feather ↗