前端开发图标实现变色原理

以前做一张很小且不影响整体风格的图标还要设计人员切成图片，然后使用css背景或者img资源引用，解决体积加载问题使用雪碧图方式。随着前端的技术的飞速发展，各大厂商都推出很多各式各样的组件库，如：tddesign、antdesign、materialdesign.....他们都包含了图标组件。

图标组件大致分为两大类：1：通过字体实现：如bootstrap,iconfont等；2：通过包装svg显示。

本篇文章主要是介绍svg图标是怎样实现变色的。

1.element plus

2.ant design

3.arco design

通过上图我们知道可以通过编辑svg的属性改变对应的颜色。

同样我们还可以通过修改其属性让其集成父元素的color值

从上面来看，我们只要改好对应的属性，后面改动其父元素的颜色就可以达到效果了。

具体根据图标实际是填充或者描边来修改
1.在svg标签中加上 fill="currentColor" stroke="currentColor"
2.在path标签中去掉 fill属性，或者改为 fill="currentColor" stroke="currentColor"