Vue Feather Icons Component

Common errors

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

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

  cause 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')

  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).
  fix Verify your import statement is `import VueFeather from 'vue-feather';` for Vue 3 applications.

Warnings

• breaking Version `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.
• gotcha The `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`.
• breaking 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.
  Fix: If upgrading from very old versions, update any custom CSS rules from `.vue-feather` to `.feather`.

Install

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

Imports

• 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
  wrong:

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

  correct:

  import VueFeather from '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
  wrong:

  import { VueFeather } from 'vue-feather';

  correct:

  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.

Quickstart

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