zl程序教程

您现在的位置是:首页 >  其他

当前栏目

[踩坑]iconfont Symbol svg引入无法更改颜色

2023-03-14 22:55:42 时间

起因

最近公司组织架构调整(反正每次组织架构调整,领导就会下场。有一个idea或者有重构一下,先定一个月底上),被拉取一个项目组做新项目。这边图标现状:有些项目是font-face方式,有些用的阿里图标库,最近又在用腾讯图标库,有些甚至直接切图。

拥抱变化,迎接新技术吧。新项目这边使用svg方式引入图标。有一个地方的图标有两种状态:选中与非选中。按照以前我使用font-face的方式,设计只需要传一套,我这边改颜色,既然很多大佬(比如:张鑫旭)都说SVG Sprites比font-face高几层楼,那肯定也支持颜色更改吧。

这不我就刷到了张大佬的svg图标更改颜色,讲得通俗易懂,十分全面。

外部交涉

我试了所有方式,都没成功。好家伙,时间紧,任务重。也就不想纠结原因了,然后就想着找设计要两套吧。发生了以下对话:

设计:你怎么又改不了
我: 这边是用的svg那种呀,改不了
设计:自己下回多去试试
设计:别个都行,你不行
交涉ing....
我:巴拉巴拉(切图,也可以,图标库也可以,反正给我两套吧)
设计:懒得跟你说,我忙得很
我(内心):这人怎么能一下戳中人的怒气点了,我不忙?
复制代码

别个都行,你不行,杀伤力确实大,我赶紧放下手上工作看看到底是不是自己不行了。上次font-face不能改颜色,好像是图底色问题。这次不会?

问题排查

找一个图标库

既然别个都行,你不行。我就怀疑是不是腾讯的图标库不得行,阿里的可以。所以在阿里图标库随便添加几个,下载项目。

对比两个图标的path

原因

所以还是svg生成的时候设置了fill属性,导致无法更改颜色。修改方法,需要设计那边上传单色图标。