vue项目中使用svg+svg变色

需要实现的效果是图标为svg,可以根据选中状态变色.
首先我们需要下包

npm install vue2-svg-icon --save-dev
//下包操作

然后你的package.json里面就会出现这个配置.

然后main.js里面注册一下

import Icon from 'vue2-svg-icon/Icon'
Vue.component('icon',Icon);

然后在src文件夹下面的assets文件夹下创建svg文件夹,在https://www.iconfont.cn/ 阿里矢量库下载相关的图标,丢到svg文件夹下面



这个就是elementUI的导航组件,主要是标注那段代码是svg图标,w和h就是控制图标大小的,此时svg还是不会变色的.要想svg变色走下一步

随便打开一个svg图片,在里面搜索fill,找到并删除fill="#xxx啥颜色啥的",然后就可以变色了,这篇文档借鉴了很多博客,如果还是搞不出来的再搜索看看吧.