🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
1.下载svg插件 `npm i -S vue-svgicon` 2.全局注册:main.js ``` import SvgIcon from 'vue-svgicon' Vue.use(SvgIcon, { tagName: 'svg-icon' }) ``` 3.配置svg图标解析和输出路径。由于vue-svgicon本质会把svg图标解析成js文件,在项目中是通过import导入生成的js文件来达到对svg图标的引用,具体可以在package.json中做以下配置: ``` "svg": "vsvg -s ./src/icons/svg -t ./src/icons/iconfont.js" ``` ![](https://img.kancloud.cn/bc/8f/bc8fa35eee6f62aadeee78d8ecd7c14b_1672x327.png) 4.`npm run svg`生成图标js,会在./src/icons/文件夹下生成iconfont.js 5.在main.js中引入`import "@/icons/iconfont.js"` 6.使用 ``` <template> <div> <svg-icon name="eye" width="50"></svg-icon> <svg-icon name="eye-open" height="50"></svg-icon> <svg-icon name="dashboard" width="100" height="100"></svg-icon> <svg-icon name="example" width="20" height="20" color="red"></svg-icon> </div> </template> ```