svg-icon图片不能改颜色

svg-icon图片不能改颜色

svg-icon 为啥变不了颜色？

因为 去字体图标库下载的时候选了颜色 ，那svg文件里就自带了fill属性，所以 我们在外面用color改不了svg的颜色。

可以使用下面两种方法改变svg图片的颜色：

1、改变svg-icon图片代码中的fill属性的值（常用）

将fill属性的颜色填充值，

fill="#409EFF"

改为

fill="currentColor"

就可以使用color属性在css代码中，给svg图片改变颜色了，如下图所示：

.svg{
	color: #ccc;
}

或者

在svg标签中定义一个class类，在class中添加fill:currentColor，然后添加color:red，就可以修改svg图标的颜色了，如下：

.svg{
    fill:currentColor;
    color:red;
}

2、全局加这个样式（不常用）

path { fill: inherit !important }

就可以给 svg 用 fill或者color去改变颜色了。