前端动态设置纯色图标的颜色方法总汇
source link: http://www.fly63.com/article/detial/10547
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
在开发中，我们需要实现动态切换全局主题色，对于文字颜色或者背景都很好实现，但是页面中经常会有很多小图标，也需要根据主题色进行切换。这篇文章主要介绍2种最常用的实现方式
1、使用svg图，通过更改path的颜色来实现
2、使用png图，利用css3滤镜filter
3、使用字体图标
一、使用svg图
需要把图标全部换成由设计妹子给了SVG图片来显示，不能通过img的方式引入，这是因为img的src引入外部svg图片，是无法修改svg内部path的颜色值的。
<svg t="1626954008234" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2002"
width="500" height="500">
<path fill="#333333"
d="M288.51831055 288.59741211A249.62475586 249.62475586 0 0 0 219.75927734 512c14.87109375-67.4934082 49.83398438-133.44433594 104.29541016-187.9453125C378.55566406 269.53393555 444.5065918 234.59082031 512 219.71972656c-78.50830078-14.79199219-162.75146484 8.12768555-223.48168945 68.87768555z"
p-id="2003"
></path>
</svg>我们可以：
1、修改大小：在<svg> 标签中修改width、height 属性（默认单位是px）
2、修改颜色：在<path> 标签中修改fill 属性，如果没有这个属性，就新增
我们只需要动态设置svg里path路径的颜色值，即可实现图标跟随主题色变化。 使用css来进行修改如下：
<style>
svg{
width:200px;
height: 200px;
}
svg path{
fill:#f00;
}
</style>二、使用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: -10000px;
border-right: 10000px solid transparent;
filter: drop-shadow(10000px 0px 0 red);
}
</style>备注说明：在Chrome浏览器下(低版本)，如果一个元素的主体部分，无论以何种方式，只要在页面中不可见，其drop-shadow是不可见的；实体部分哪怕有1像素可见，则drop-shadow完全可见。使用这里使用border-right透明边框来解决兼容问题，如果不考虑Chrome浏览器，可以不使用该属性。
这里利用定位将原图片移除，如果你父元素设置了overflow:hide；left值就可设置小一些，只需能隐藏原图片即可。
三、使用字体图标
字体图标，我们可以轻松的用css来控制字体的颜色，大小，阴影等！方式一使用的svg图片，由于是矢量图片，不会随着图片的伸缩而影响质量，所以我们可以通过工具将svg生成字体图标，放到项目中使用。
借助一个在线生成工具：https://icomoon.io/app/
网上也有很多字体图标库的网站，大家可以下载使用。这里以Font Awesome字体图标库为例：
首页在html文档中的 <head> 部分，引入 font-awesome.min.css 文件。
<link rel="stylesheet" href="../css/font-awesome.min.css">在页面中使用：
<i class="icon-camera-retro"></i>
<style>
i{
font-size: 40px;
color: #f00;
}
</style>可以看出更加简单，可控。
这里主要介绍了3种最常见，前端动态设置纯色图标的颜色方法。大家可以根据项目需求选择合适的方案，当然除了上面介绍的以外，还有其他方案，大家可以思考下。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK