svg-icon 默认会读取其父级的color fill: currentColor;

你可以改变父级的color或者直接改变fill的颜色即可。

大佬我就是这样做的, 但是颜色却没有改变。
更奇怪的是，我直接修改fill的颜色也没作用。

实测可行，请确保没有样式覆盖问题。

大佬我发现了，从你这项目拷贝过去的svg就可以改颜色，但是我从iconfont下载的svg就不行,

我项目里所有的icon都是从iconfont上面下载的。。。

刚刚打开看了下svg的源代码，原来下载下来的path上面自带了fill属性......

请问大佬有啥办法可以使下载的图标不自带fill属性吗，我下载的都有, 这样一个一个改岂不是很麻烦。。。

样式覆盖不就好了 设置的时候加一个 !important

好的，多选大佬

@540240126 你是怎么弄的，我的也不行

@PanJiaChen 能举个例子吗，用!important也不行

@busyhe 请提供demo

@PanJiaChen
https://github.com/wfe-templates/template-build
这是我写模板，麻烦帮忙看一下，
在template/sec/pages/home/home.vue里。
官方提供的可以改颜色，阿里下载的就不行

@busyhe 我知道怎么回事，你用编辑器打开下载的svg图片的源代码, 把里面的fill属性去掉即可

@540240126 有没有便捷的方案，这个手动去删有点low啦，哈哈哈

@busyhe 有啊，写个全局的css属性
path { fill: inherit !important }

@540240126 万分感谢

下载http://iconfont.cn/ 图标的时候，要选白色，就可以 fix 这个问题，但是具体原因不明，

1. 你们可以测试对比一下，官方 github 提供的 svg 跟http://iconfont.cn/ 下载的默认下载的图标是有区别的，如果默认下载http://iconfont.cn/ 的图标，依然还是不能变色，如果你选择一个把颜色调整为白色或其他颜色，就可以看到变色效果了，根本不是 css fill 的问题。
2. 我对比了2个 svg 的差别，http://iconfont.cn/ 重新下载的会多了 fill 属性，而官网 github 自带的是没有的，可能是这里被影响了变色效果。

其实就是楼上所说的fill的问题，最简单的方法全局加一个css path { fill: inherit !important }。
之后我用 svgo来格式化一下svg吧。

测试了一下，iconfont网站多色使用的是fill，所以也不能一概的将fill去除。所以暂时还是需要用户手动判断这个svg是否需要fill属性。

是的，其实我那个方法遇到多色是会有问题的，多色还是要自己去做处理

大小调整为啥不成功呢 有大佬知道吗

@ccmanito 改 font-size 不就好了。

你好，请问一下，字体图标添加字体阴影不生效怎么办

你好，请问一下，我从iconfont下载的图标，把自带的fill属性去掉，图标还是不能显示，是不是path里面的问题？

今天也遇到这个问题，详细看了一下作者的文档 图标 下面的那个gif显示的很明显，先将需要的icon 添加入库，然后在库中添加进一个自定义的项目中，去项目中选择Symbol，点击下载就没问题了

我在iconfont下载的icon，设置到左侧导航的图标时，总是比模版中icon的看起来要小一些，我看模版中的icon预览的时候左右两边都没有多余的空白，我下载的在预览的时候左右两边都有空白，是这个原因吗？要怎么解决呢？以下是svg的内容：

怎么让图标和字体一上一下，就是图标在上，字体在下

我在iconfont下载的icon，设置到左侧导航的图标时，总是比模版中icon的看起来要小一些，我看模版中的icon预览的时候左右两边都没有多余的空白，我下载的在预览的时候左右两边都有空白，是这个原因吗？要怎么解决呢？以下是svg的内容：

解决了吗，这个问题

为什么我需要导入 才能用

下载的时候把颜色代码删除，下载下来的svg有的是没有fill字段

我使用了@yuanyuanyuan给的建议从http://iconfont.cn/ 下载默认图标是可以通过color改变图标颜色(没有fill属性)，但发现其中也有不可以通过color改变图标颜色(有fill属性)。
其中“如果您选择一个把颜色调整为白色或其他颜色，就可以看到变色效果了”，我也实践了一下，我这边是不可以的(有fill属性）
然后我猜想可能和上传图片是选项有关，发现有两个选项一个是"去除颜色并提交“一个是“保留颜色并提交”。选中”去除颜色并提交选项并提交即可。这里还需要注意的是绘制icon软件要用AI。这里是网上查到的为什么要用AI的原因https://www.urcloud.co/archives/94/
最后实践是可以的。

我在iconfont下载的icon，设置到左侧导航的图标时，总是比模版中icon的看起来要小一些，我看模版中的icon预览的时候左右两边都没有多余的空白，我下载的在预览的时候左右两边都有空白，是这个原因吗？要怎么解决呢？以下是svg的内容：

解决了吗，这个问题

图标可以编辑，下载之前编辑放大，不留空白就好

@PanJiaChen 请问下多色的需要怎么处理 页面上的fill属性都被删除了 显示是全黑的

尴尬，各位大佬这个白色背景怎么去掉？

尴尬，各位大佬这个白色背景怎么去掉？

换了个svg就行了

icon颜色不可以修改的看看配置文件的路径有没有合适，常规css中是没有fill属性的，只在XML或者yml-CSS中存在,不用important

把svg文件里面的fill去掉 然后选择白色的就可以了

删除svg文件里的fill属性可以解决，亲测可用

实测有效：
1.删除下载的文件 自带的 fill属性
2.子元素（就是这个svg）设置 fill:颜色 ！important
例如：
.Father{
color: red;
}
.github-class{
margin: 0 10px;
/* 删除掉这个文件fill属性。一般情况下这样是没问题的，如果设置不上把下边这行代码设置为行内样式 */
fill: aquamarine !important;
}

我在iconfont下载的icon，设置到左侧导航的图标时，总是比模版中icon的看起来要小一些，我看模版中的icon预览的时候左右两边都没有多余的空白，我下载的在预览的时候左右两边都有空白，是这个原因吗？要怎么解决呢？以下是svg的内容：

替换其他没有空白的图标，我是这样解决的，强迫症大小不统一完全受不了