在项目开发中,常常会用到svg图标,以前用的都是vue-svg-icon,最近在npm中搜索svg图标解析插件,发现vue-svgicon用的相对较多,对比如下,vue-svgicon用法较为灵活,方便,基本使用方法以下:vue
一、安装项目依赖npm
npm install vue-svgicon -D
二、在项目目录中引入svg图片(任意目录)json
三、配置svg图标解析和输出路径svg
由于vue-svgicon本质会把svg图标解析成js文件,在项目中是经过import导入生成的js文件来达到对svg图标的引用,具体能够在package.json中作如下配置:spa
四、在main.js中引入svgIcon组件,而且全局注册下插件
import SvgIcon from 'vue-svgicon' Vue.use(SvgIcon, { tagName: 'svg-icon' });
五、执行下npm run svg命令code
能够看到项目中icons下面多了不少js文件blog
六、项目中具体使用以下:图片
<svg-icon name="logo" class="menu-icon" color="#fff" width="16" height="16"></svg-icon>
import '@/icons/logo'