如何在vue中优雅的使用icon

第一步安装插件https://www.npmjs.com/package/vue-svgicon

npm i vue-svgicon

并且在package.json 中插入下方代码,并且在src下创建文件夹

{
    "scripts": {
        "svg": "vsvg -s ./src/icons/svg -t ./src/icons/components --ext ts --es6"
    }
}

文件夹目录

然后在main.js（入口文件）注册

import SvgIcon from 'vue-svgicon';
import './icons/components'; 

Vue.use(SvgIcon, {
  tagName: 'svg-icon',
  defaultWidth: '1em',
  defaultHeight: '1em'
});

需要使用icon时可以在阿里的icon库中下载svg，拖入到svg文件夹下并在终端中运行 npm run svg，如果components文件夹下有生成文件那么恭喜你就成功了，是用的话可以配合ui库使用我当前使用的是vant

<svg-icon name="activity" width="88" height="88" color="#000000" />
<svg-icon name="arrow-right" width="88" height="88" color="#000000" />

icon文件夹

最后你可以创建一个样式表，预设icon的默认样式。