插件名称 | 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;
},
},