如何在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



icon文件夹

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

你可能感兴趣的:(如何在vue中优雅的使用icon)