3种前端动态设置纯色图标的颜色的方法

今天药忘吃喽~ 2022-09-01 10:57 162阅读 0赞

![e8c5307a3fece3822df479121dd47b22.png][]

在开发中，我们需要实现动态切换全局主题色，对于文字颜色或者背景都很好实现，但是页面中经常会有很多小图标，也需要根据主题色进行切换。

这篇文章主要介绍3种最常用的实现方法。

1、使用svg图，通过更改path的颜色来实现  
2、使用png图，利用css3滤镜filter  
3、使用字体图标

### **1、使用svg图** ###

需要把图标全部换成由设计妹子给了SVG图片来显示，不能通过img的方式引入，这是因为img的src引入外部svg图片，是无法修改svg内部path的颜色值的。

例如：

我们可以：

1、修改大小：在<svg> 标签中修改width、height 属性（默认单位是px）

2、修改颜色：在<path> 标签中修改fill 属性，如果没有这个属性，就新增

我们只需要动态设置svg里path路径的颜色值，即可实现图标跟随主题色变化。  使用css来进行修改如下：

### **2、使用Png图** ###

该方法存在一定的兼容性，但是移动端基本完全兼容，可以放心使用。利用png图，比svg更简单，它是利用了CSS3滤镜filter中的drop-shadow(drop-shadow滤镜可以给元素或图片非透明区域添加投影）。

用drop-shadow添加投影模糊度为0,再隐藏原图片。

<img src="./cion/test.png"/><style>  img {    width: 200px;    height: 200px;    position: relative;    left: -50px;    border-right: 100px solid transparent;    filter: drop-shadow(100px 0px 0 red);  }</style>

备注说明：在Chrome浏览器下(低版本)，如果一个元素的主体部分，无论以何种方式，只要在页面中不可见，其drop-shadow是不可见的；实体部分哪怕有1像素可见，则drop-shadow完全可见。

使用这里使用border-right透明边框来解决兼容问题，如果不考虑Chrome低版本浏览器，可以不使用该属性(以上为例，不使用该属性需要将left值设置为负的100)。

这里利用定位将原图片移除，你需要父元素设置了overflow:hide；或者其他方式来隐藏原图片即可。

### **3、使用字体图标** ###

字体图标，我们可以轻松的用css来控制字体的颜色，大小，阴影等！方式一使用的svg图片，由于是矢量图片，不会随着图片的伸缩而影响质量，所以我们可以通过工具将svg生成字体图标，放到项目中使用。

你可以借助一个在线生成工具：https://icomoon.io/app/

网上也有很多字体图标库的网站，大家可以下载使用。这里以Font Awesome字体图标库为例：

首页在html文档中的 <head> 部分，引入 font-awesome.min.css 文件。

在页面中使用：

<i class="icon-camera-retro"></i><style>  i{    font-size: 40px;    color: #f00;  }</style>

可以看出更加简单，可控。

### **总结** ###

这里主要介绍了3种最常见，前端动态设置纯色图标的颜色方法。大家可以根据项目需求选择合适的方案，当然除了上面介绍的以外，还有其他方案，大家可以思考下。

#  #

**学习更多技能**

**请点击下方公众号**

![b4613268b4c3e9d770c964c6b94599f8.gif][]

![b8b83fdd6af094120c1ffe64a4f7fa35.png][]

![159afe8a5a065329aca9e5bb683d2551.png][]

[e8c5307a3fece3822df479121dd47b22.png]: /images/20220829/9d3d46145438404880267c41389a6693.png
[b4613268b4c3e9d770c964c6b94599f8.gif]: /images/20220829/81beb01bbaf24553808bb49721b3ed5a.png
[b8b83fdd6af094120c1ffe64a4f7fa35.png]: /images/20220829/a98decef573144c38e87fc90d6232457.png
[159afe8a5a065329aca9e5bb683d2551.png]: /images/20220829/ccada389da404ae6927982f7230f764e.png