svg图标引发的思考：想晋升高级？这些得了解。

问题背景：

我在优化整理项目代码的时候，发现项目中有通过<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图标引发的思考：想晋升高级？这些得了解。