你好,是这样的,我把代码拷贝到我的项目里,图标是可以显示的,但是颜色却不能通过color去设置,请问是有什么要注意的地方吗?
Activity
PanJiaChen commentedon Dec 6, 2017
svg-icon 默认会读取其父级的color
fill: currentColor;
你可以改变父级的color或者直接改变fill的颜色即可。
SPACEX-2022 commentedon Dec 6, 2017
大佬我就是这样做的, 但是颜色却没有改变。
更奇怪的是,我直接修改fill的颜色也没作用。
PanJiaChen commentedon Dec 6, 2017
实测可行,请确保没有样式覆盖问题。
SPACEX-2022 commentedon Dec 6, 2017
大佬我发现了,从你这项目拷贝过去的svg就可以改颜色,但是我从iconfont下载的svg就不行,
PanJiaChen commentedon Dec 6, 2017
我项目里所有的icon都是从iconfont上面下载的。。。
SPACEX-2022 commentedon Dec 6, 2017
刚刚打开看了下svg的源代码,原来下载下来的path上面自带了fill属性......
SPACEX-2022 commentedon Dec 6, 2017
请问大佬有啥办法可以使下载的图标不自带fill属性吗,我下载的都有, 这样一个一个改岂不是很麻烦。。。
PanJiaChen commentedon Dec 6, 2017
样式覆盖不就好了 设置的时候加一个
!important
vue-element-admin/src/components/SvgIcon/index.vue
Line 39 in 44b180a
SPACEX-2022 commentedon Dec 7, 2017
好的,多选大佬
busyhe commentedon Apr 18, 2018
@540240126 你是怎么弄的,我的也不行
busyhe commentedon Apr 19, 2018
@PanJiaChen 能举个例子吗,用!important也不行
PanJiaChen commentedon Apr 19, 2018
@busyhe 请提供demo
busyhe commentedon Apr 19, 2018
@PanJiaChen
https://github.com/wfe-templates/template-build
这是我写模板,麻烦帮忙看一下,
在template/sec/pages/home/home.vue里。
官方提供的可以改颜色,阿里下载的就不行
19 remaining items
whace commentedon Nov 15, 2019
怎么让图标和字体一上一下,就是图标在上,字体在下
baojiawei commentedon Mar 2, 2020
解决了吗,这个问题
fewbadboy commentedon Mar 2, 2020
aclemon commentedon Apr 29, 2020
为什么我需要导入 才能用
JasonLamv-t commentedon Jun 16, 2020
下载的时候把颜色代码删除,下载下来的svg有的是没有fill字段
Jenssic commentedon Jun 24, 2020
我使用了@yuanyuanyuan给的建议从http://iconfont.cn/ 下载默认图标是可以通过color改变图标颜色(没有fill属性),但发现其中也有不可以通过color改变图标颜色(有fill属性)。
其中“如果您选择一个把颜色调整为白色或其他颜色,就可以看到变色效果了”,我也实践了一下,我这边是不可以的(有fill属性)
然后我猜想可能和上传图片是选项有关,发现有两个选项一个是"去除颜色并提交“一个是“保留颜色并提交”。选中”去除颜色并提交选项并提交即可。这里还需要注意的是绘制icon软件要用AI。这里是网上查到的为什么要用AI的原因https://www.urcloud.co/archives/94/
最后实践是可以的。
qq823626715 commentedon Jul 3, 2020
图标可以编辑,下载之前编辑放大,不留空白就好
walirt commentedon Jul 13, 2020
@PanJiaChen 请问下多色的需要怎么处理 页面上的fill属性都被删除了 显示是全黑的
hu-qi commentedon Sep 28, 2020
尴尬,各位大佬这个白色背景怎么去掉?
hu-qi commentedon Sep 28, 2020
换了个svg就行了

striving0 commentedon Jan 5, 2021
icon颜色不可以修改的看看配置文件的路径有没有合适,常规css中是没有fill属性的,只在XML或者yml-CSS中存在,不用important
heiseyoumo334 commentedon Nov 11, 2021
把svg文件里面的fill去掉 然后选择白色的就可以了
jiefangen commentedon May 5, 2022
删除svg文件里的fill属性可以解决,亲测可用
Szc219 commentedon Apr 12, 2023
实测有效:
1.删除下载的文件 自带的 fill属性
2.子元素(就是这个svg)设置 fill:颜色 !important
例如:
.Father{
color: red;
}
.github-class{
margin: 0 10px;
/* 删除掉这个文件fill属性。一般情况下这样是没问题的,如果设置不上把下边这行代码设置为行内样式 */
fill: aquamarine !important;
}
SpongeBob-0513 commentedon May 24, 2023
替换其他没有空白的图标,我是这样解决的,强迫症大小不统一完全受不了