点赞再看,养成习惯,你们的支持是我持续分享的最大动力( ^▽^)
最近我在开发一个个人理财项目,当我做到导航栏的时候,发现了一个bug
。
![9488d6b740cbbcc561fded72e43700a8.png](https://i-blog.csdnimg.cn/blog_migrate/f43e722eba419d0af581e805dc5d4357.png)
先对上图做一个描述:money
、labels
和statistics
三个icon
都是我从iconfont
引入的svg
图标,当我导航到不同的页面时,所对应的icon
也会高亮显示。
从上图你可以看到,我明明导航到了money
页面,为什么labels
页面的图片也会高亮呢,而且高亮的颜色并不是我所设置的黄色,这显然不是我想要的效果。
于是我开始查找问题到底出在哪里。
排查完所有的scss
文件及相关配置之后,我将问题的锁定在了 svg
源文件上。
接下来我仔细阅读了 该svg
所对应的源文件,果不其然,labels
这个svg
图片的源码中带有一个fill
属性,正是这个属性让还未被点击icon
高亮。
![4f7c32020e44d8f5d020bd5e696af336.png](https://i-blog.csdnimg.cn/blog_migrate/d5540f4a981faa331f8f9abc062b86fe.jpeg)
既然发现了问题,那么接下来就要解决这个问题。
有人说,那你这个问题解决还不简单嘛,直接把 fill
属性删了不就好了。
这个简单粗暴的方法在某种程度上也是可以解决问题的,但是,如果引入了100
个svg
甚至更多,里面都带有fill
属性的icon
,你难道还要一个一个的查找进行删除吗?
这种操作显然不是一个高级程序员处理问题的方式。
那应该怎么处理?
能不能写一段代码,自动的把所有svg
图片里面的fill
属性删除?
下面就是我花了两个小时搜遍我所能找到的所有资料得到的答案。
.use('svgo-loader').loader('svgo-loader')
.tap(options => ({...options, plugins: [{removeAttrs: {attrs: 'fill'}}]})).end()
谢谢你看到了最后,希望遇到此类问题的小伙伴都能快速的解决此类问题,不要再去踩踩踩坑啦。
告诫自己,即使再累也不要忘记学习,成功没有捷径可走,只有一步接着一步走下去。 共勉!