图标的颜色怎么修改呀

SPACEX-2022 commented 6 years ago

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

PanJiaChen commented 6 years ago

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

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

SPACEX-2022 commented 6 years ago

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

PanJiaChen commented 6 years ago

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

SPACEX-2022 commented 6 years ago

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

PanJiaChen commented 6 years ago

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

SPACEX-2022 commented 6 years ago

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

SPACEX-2022 commented 6 years ago

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

PanJiaChen commented 6 years ago

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

SPACEX-2022 commented 6 years ago

好的，多选大佬

busyhe commented 6 years ago

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

busyhe commented 6 years ago

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

PanJiaChen commented 6 years ago

@BusyHe 请提供demo

busyhe commented 6 years ago

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

SPACEX-2022 commented 6 years ago

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

busyhe commented 6 years ago

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

SPACEX-2022 commented 6 years ago

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

busyhe commented 6 years ago

@540240126 万分感谢

yuanyuanyuan commented 6 years ago

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

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

PanJiaChen commented 6 years ago

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

PanJiaChen commented 6 years ago

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

SPACEX-2022 commented 6 years ago

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

ccmanito commented 5 years ago

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

PanJiaChen commented 5 years ago

@ccmanito 改 font-size 不就好了。

Dreamwht commented 5 years ago

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

zhanghuaxy commented 5 years ago

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

fewbadboy commented 4 years ago

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

BestMafen commented 4 years ago

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

BestMafen commented 4 years ago

<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 commented 4 years ago

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

baojiawei commented 4 years ago

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

解决了吗，这个问题

fewbadboy commented 4 years ago

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

Thanks & Best Regards Aj_Renekton

aclemon commented 4 years ago

为什么我需要导入才能用

JasonLamv-t commented 4 years ago

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

Jenssic commented 4 years ago

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

qq823626715 commented 4 years ago

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

解决了吗，这个问题

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

walirt commented 4 years ago

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

hu-qi commented 4 years ago

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

hu-qi commented 4 years ago

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

换了个svg就行了

striving0 commented 3 years ago

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

heiseyoumo334 commented 2 years ago

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

jiefangen commented 2 years ago

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

Szc219 commented 1 year ago

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

SpongeBob-0513 commented 1 year ago

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

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

PanJiaChen / vue-element-admin

图标的颜色怎么修改呀 #330