通过css样式自定义svg图标颜色

自定义svg图标颜色

Start

• 正常情况下，我们使用 svg 图标是自带颜色的，图标直接拿来使用就好了。
• 但是有时候我们经常会遇到，禁用或高亮的需求，可以通过切换不同的图标实现。（这个方法需要准备多个内容相同，颜色不同的 svg 图标）
• 能不能通过样式控制 svg 图标呢？ 这样我可以，只使用一个图标，随意设置它的颜色。
• 今天讲讲怎么自定义 svg 图标颜色。

处理svg图标

首先以文本的形式打开我们的svg图标。可以用记事本或者vscode都可以。

使用浏览器打开会直接看到svg的效果。

记事本打开

1. 全局搜索 fill， 删除对应的属性名和属性值

// 这两种属性都需要删除掉
fill="#CCCCCC" 
fill="none"

需要注意的是，fill字段都需要删除，一个文件可能有多个，例如：

2. 给页面的svg图标添加如下样式即可。

svg{
  fill: currentColor; //此属性为更改svg颜色属性设置
  color:pink;
  }

效果图

End

• 完结