第一步安裝插件https://www.npmjs.com/package/vue-svgicon
npm i vue-svgicon
并且在package.json 中插入下方代碼,并且在src下創(chuàng)建文件夾
{
"scripts": {
"svg": "vsvg -s ./src/icons/svg -t ./src/icons/components --ext ts --es6"
}
}
文件夾目錄
然后在main.js(入口文件)注冊(cè)
import SvgIcon from 'vue-svgicon';
import './icons/components';
Vue.use(SvgIcon, {
tagName: 'svg-icon',
defaultWidth: '1em',
defaultHeight: '1em'
});
需要使用icon時(shí)可以在阿里的icon庫(kù)中下載svg斤程,拖入到svg文件夾下并在終端中運(yùn)行 npm run svg顶籽,如果components文件夾下有生成文件那么恭喜你就成功了泳猬,是用的話可以配合ui庫(kù)使用 我當(dāng)前使用的是vant
<svg-icon name="activity" width="88" height="88" color="#000000" />
<svg-icon name="arrow-right" width="88" height="88" color="#000000" />
icon文件夾
最后你可以創(chuàng)建一個(gè)樣式表方库,預(yù)設(shè)icon的默認(rèn)樣式钮糖。