点赞再看,养成习惯,你们的支持是我持续分享的最大动力(^▽^)
最近我在开发一个个人理财项目,当我做到导航栏的时候,发现了一个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()
谢谢你看到了最后,希望遇到此类问题的小伙伴都能快速的解决此类问题,不要再去踩踩踩坑啦。
告诫自己,即使再累也不要忘记学习,成功没有捷径可走,只有一步接着一步走下去。 共勉!