svg踩坑实录（上）

点赞再看，养成习惯，大家的支持是我持续分享的最大动力(^▽^)

最近我在开发一个我的理财项目，当我作到导航栏的时候，发现了一个bug。

先对上图作一个描述：money、labels和statistics三个icon都是我从iconfont引入的svg图标，当我导航到不一样的页面时，所对应的icon也会高亮显示。

从上图你能够看到，我明明导航到了money页面，为何labels页面的图片也会高亮呢，并且高亮的颜色并非我所设置的黄色，这显然不是我想要的效果。

因而我开始查找问题到底出在哪里。

排查完全部的scss文件及相关配置以后，我将问题的锁定在了 svg 源文件上。

接下来我仔细阅读了 该svg 所对应的源文件，果不其然，labels这个svg图片的源码中带有一个fill属性，正是这个属性让还未被点击icon高亮。

既然发现了问题，那么接下来就要解决这个问题。

有人说，那你这个问题解决还不简单嘛，直接把 fill 属性删了不就行了。

这个简单粗暴的方法在某种程度上也是能够解决问题的，可是，若是引入了100个svg甚至更多，里面都带有fill属性的icon，你难道还要一个一个的查找进行删除吗？

这种操做显然不是一个高级程序员处理问题的方式。

那应该怎么处理？

能不能写一段代码，自动的把全部svg图片里面的fill属性删除？

下面就是我花了两个小时搜遍我所能找到的全部资料获得的答案。

.use('svgo-loader').loader('svgo-loader')
      .tap(options => ({...options, plugins: [{removeAttrs: {attrs: 'fill'}}]})).end()
复制代码

谢谢你看到了最后，但愿遇到此类问题的小伙伴都能快速的解决此类问题，不要再去踩踩踩坑啦。

告诫本身，即便再累也不要忘记学习，成功没有捷径可走，只有一步接着一步走下去。 共勉！