点击菜单改变svg图标颜色

项目中使用阿里svg图标动态改变其颜色

1.离线的svg图标，代码分析

<!--下面是一个svg图标的代码，重点看fill属性及取值，代表当前图标的颜色-->
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg t="1715062824972" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22247" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
	<path d="M894.7 597.8h-94.1v-65.9c-0.3-16.4-13.9-29.5-30.4-29.2H542.1V454c83.7-16.7 138.1-98.2 121.3-181.9-16.7-83.7-98.2-138.1-181.9-121.3-83.7 16.7-138.1 98.2-121.3 181.9 12.2 61.2 60.1 109.1 121.3 121.3v48.6H253.3c-16.4-0.3-30 12.8-30.4 29.2v65.9h-94.1c-16.4-0.2-29.9 12.8-30.2 29.2v240c0.3 16.4 13.8 29.4 30.2 29.2h248.7c16.4 0.3 29.9-12.7 30.2-29.1V627c-0.3-16.4-13.7-29.4-30.1-29.2H283.4V561h456.7v36.8H646c-16.4-0.3-29.9 12.7-30.2 29.1V867c0.3 16.4 13.7 29.4 30.1 29.2H894.7c16.4 0.2 29.9-12.8 30.2-29.2V627c-0.3-16.4-13.8-29.5-30.2-29.2z m-547.4 58.3v181.7H159V656.1h188.3z m70.3-348.4c-1.9-52 38.8-95.7 90.8-97.5 52-1.9 95.7 38.8 97.5 90.8 1.9 52-38.8 95.7-90.8 97.5-1.2 0-2.3 0.1-3.5 0.1-50.9 0.7-93-39.9-94-90.9z m446.9 530.1H676.2V656.1h188.3v181.7z" fill="#BFCBD9" p-id="22248">
	</path>
</svg>

2.只需通过样式即可实现

2.1修改svg中第一个fill属性值为currentColor，其他删除即可

<!--或者只给svg标签添加fill="currentColor"-->
<svg fill="currentColor">
	<path></path>
</svg>

2.1修改选中后高亮样式

/*active类在click或hover时给svg标签动态添加上即可*/
.active{
	color:#f00;
}