Vue 3的Feather图标组件 - vue-feather

Vue 3的Feather图标组件 - vue-feather
插件名称 vue-feather
发布时间 2021年1月26日
插件作者 fengyuanchen

图标组件,允许开发人员将Feather图标用作Vue.js 3项目中的组件。

安装和下载:

# NPM
$ npm i feather-icons vue-feather

如何使用它:

1.导入并注册组件。

import Vue from 'vue';
import VueFeather from 'vue-feather';
const app = Vue.createApp({});
app.component(VueFeather.name, VueFeather);

2.将功能部件添加到应用程序模板。

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

3.使用以下道具自定义图标组件。

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