Customize svg icon color by css style

Custom svg icon color

Start

• Under normal circumstances, we use svg icons with their own colors, and the icons can be used directly.
• But sometimes we often encounter the need to disable or highlight, you can switch between two icons of different colors. (This method needs to prepare multiple svg icons with the same content and different colors)
• **Is it possible to control the svg icon through the style? ** This way I can set its color however I want.
• Today I will talk about how to customize the color of svg icons.

Handle svg icons

First open our svg icon as text. You can use Notepad or vscode.

Open it with a browser and you will see the effect of svg directly.

记事本打开

1. Global search fill, delete the corresponding attribute name and attribute value

fill="#CCCCCC" 

It should be noted that the fill field needs to be deleted, and there may be multiple files in one file, for example:

2. Add the following style to the svg icon on the page.

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

效果图

End

• end