前端动态设置纯色图标的颜色方法总汇

更新日期: 2021-07-22阅读: 2.1k标签: 颜色分享

复制链接

新浪微博

QQ 好友

扫一扫分享

在开发中，我们需要实现动态切换全局主题色，对于文字颜色或者背景都很好实现，但是页面中经常会有很多小图标，也需要根据主题色进行切换。这篇文章主要介绍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: -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；或者其他方式来隐藏原图片即可。

三、使用字体图标

字体图标，我们可以轻松的用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种最常见，前端动态设置纯色图标的颜色方法。大家可以根据项目需求选择合适的方案，当然除了上面介绍的以外，还有其他方案，大家可以思考下。

链接: https://fly63.com/article/detial/10547