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()
複製代碼

謝謝你看到了最後，但願遇到此類問題的小夥伴都能快速的解決此類問題，不要再去踩踩踩坑啦。

告誡本身，即便再累也不要忘記學習，成功沒有捷徑可走，只有一步接着一步走下去。 共勉！