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去改变颜色了。