目录

一、下载vue-svgicon

二、main.js中引入

三、将.svg转换成.js进行引入

四、使用

一、下载vue-svgicon

cnpm i -S vue-svgicon

二、main.js中引入

import SvgIcon from &＃39;vue-svgicon&＃39;
Vue.use(SvgIcon, {tagName: &＃39;svg-icon&＃39;
});

注意&＃xff1a;这里要记得加上{tagName: &＃39;svg-icon&＃39;}&＃xff0c;否则会报错

三、将.svg转换成.js进行引入

在项目目录中引入svg图片&＃xff08;任意目录&＃xff09;

然后配置svg图标解析和输出路径。由于vue-svgicon本质会把svg图标解析成js文件&＃xff0c;在项目中是通过import导入生成的js文件来达到对svg图标的引用&＃xff0c;具体可以在package.json中做以下配置&＃xff1a;

"svg": "vsvg -s ./src/assets/svg -t ./src/icons"

然后执行下npm run svg命令&＃xff0c;可以看到项目中icons下面生成了很多js文件

然后再在main.js中引入这些js文件&＃xff1a;

import "&＃64;/icons/index.js"

四、使用