Feather Icons Component For Vue 3

Install & Download:

# NPM
$ npm i feather-icons vue-feather

Description:

An icons component that allows developers to use Feather icons as components in Vue.js 3 projects.

How to use it:

1. Import and register the component.

import Vue from 'vue';
import VueFeather from 'vue-feather';

const app = Vue.createApp({});
app.component(VueFeather.name, VueFeather);

2. Add the Feature component to the app template.

<vue-feather type="star"></vue-feather>

3. Customize the icon component with the following props.

animation: {
  type: String,
  default: undefined,
},
animationSpeed: {
  type: String,
  default: undefined,
},
fill: {
  type: String,
  default: 'none',
},
size: {
  type: [Number, String],
  default: 24,
},
stroke: {
  type: String,
  default: 'currentColor',
},
strokeLinecap: {
  type: String,
  default: 'round',
},
strokeLinejoin: {
  type: String,
  default: 'round',
},
strokeWidth: {
  type: [Number, String],
  default: 2,
},
tag: {
  type: String,
  default: 'i',
},
type: {
  type: String,
  default: 'feather',
  validator(type: string) {
    if (!feather) {
      throw new Error('The Feather icons is required.');
    }
    if (!feather.icons[type]) {
      throw new Error(`"${type}" is not an available icon type.`);
    }
    return true;
  },
},