問題背景：

我在優化整理項目代碼的時候，發現項目中有通過<svg-icon name="xxx"></svg-icon>方式引用的svg圖標，也有通過iconfont<i class="iconfont xxx"></i>引用的圖標。

然後當好幾個項目改造為對接微前端的時候，發現有些樣式衝突了（千萬不要小看樣式問題（看似簡單的問題），往往背後藏着不少值得深挖的學問）

復現步驟：

先在微前端中打開A項目，圖標顏色是正確的。此時打開B項目，再切換回A項目，發現A項目的圖標顏色變了。

正常是灰色的，有問題的是橙色：

解決過程：

首先要定位是哪裏導致的樣式衝突。

A項目下的圖標是通過svg生成的。

然後大概就能猜測到是B項目的樣式覆蓋了A項目。

因為svg圖標的顏色是可以更改的。

比如把color或者fill屬性改為紅色，圖標就變為紅色了。

先上結論：把B項目中.icon和.svg-icon定義顏色的去掉或者改為主題顏色就可以了。

其實，我想引申出來講的是：一個圖標顏色引發的幾個問題。

想一探究竟的，可以繼續往下看（精彩內容）

詳情：svg圖標引發的思考：想晉升高級？這些得了解。