Vue-element-admin: 图标的颜色怎么修改呀

[540240126]

你好，是这样的，我把代码拷贝到我的项目里，图标是可以显示的，但是颜色却不能通过color去设置，请问是有什么要注意的地方吗?

[PanJiaChen]

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

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

[540240126]

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

[PanJiaChen]

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

[540240126]

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

[PanJiaChen]

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

[540240126]

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

[540240126]

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

[PanJiaChen]

样式覆盖不就好了 设置的时候加一个 !important
https://github.com/PanJiaChen/vue-element-admin/blob/44b180a7b38332b832887bc6696484a5ae5d924a/src/components/SvgIcon/index.vue#L39

[540240126]

好的，多选大佬

[BusyHe]

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

[BusyHe]

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

[PanJiaChen]

@BusyHe 请提供demo

[BusyHe]

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

[540240126]

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

[BusyHe]

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

[540240126]

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

[BusyHe]

@540240126 万分感谢

[yuanyuanyuan]

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

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

[PanJiaChen]

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

[PanJiaChen]

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

[540240126]

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

[ccmanito]

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

[PanJiaChen]

@ccmanito 改 font-size 不就好了。

[Dreamwht]

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

[zhanghuaxy]

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

[fewbadboy]

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

[BestMafen]

我在iconfont下载的icon，设置到左侧导航的图标时，总是比模版中icon的看起来要小一些，我看模版中的icon预览的时候左右两边都没有多余的空白，我下载的在预览的时候左右两边都有空白，是这个原因吗？要怎么解决呢？以下是svg的内容：
width="128" height="128">
d="M512 0C335.264 0 192 143.264 192 320c0 320 320 704 320 704s320-384 320-704C832 143.264 688.736 0 512 0zM512 512c-106.048 0-192-85.952-192-192s85.952-192 192-192 192 85.952 192 192S618.048 512 512 512z"
/>

[BestMafen]

<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
     width="128" height="128">
  <path
    d="M512 0C335.264 0 192 143.264 192 320c0 320 320 704 320 704s320-384 320-704C832 143.264 688.736 0 512 0zM512 512c-106.048 0-192-85.952-192-192s85.952-192 192-192 192 85.952 192 192S618.048 512 512 512z"
  />
</svg>

[whace]

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

[baojiawei]

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

解决了吗，这个问题

[fewbadboy]

我当时遇到的我这上面回答了我的处理步骤，都是按照大佬的文档自己走了一遍，感觉没啥问题的吧。主要是你这在iconfont里面咋下载，没发现图标大了小了的问题

Thanks & Best Regards           
     Aj_Renekton

 

[aclemon]

为什么我需要导入 才能用

[JasonLamv-t]

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

[Jenssic]

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

[qq823626715]

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

解决了吗，这个问题

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

[walirt]

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

[hu-qi]

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

[hu-qi]

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

换了个svg就行了

[striving0]

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