阿里iconfont图标不能修改颜色的解决方案

ゝ一纸荒年。 2023-03-02 05:10 2阅读 0赞

### 现象：iconfont安装后的图标，是通过symbol引用方式，有的图标不能通过color修改颜色的解决办法，有的又可以。 ###

<svg class="icon" aria-hidden="true" style="color:red;">
        <use xlink:href="#icon-PDF"></use>
    </svg>

### 原因： ###

<table> 
 <tbody> 
  <tr> 
   <td align="left"> 当从阿里图库中图标被添加至项目，如果编辑过项目图标的颜色或者图标本身是有颜色的，那么在通过symbol获取图标时会在svg的path中增加fill属性，导致无法更改颜色，如果需要动态修改颜色，需要从新添加该图标(本身图标无色)，获取在symbol的js文件中程序删除fill属性。 </td> 
  </tr> 
 </tbody> 
</table>

### 解决办法： ###

1. 下载Js文件后，用Notepad++打开，然后用正则表达式查找：fill="\#…" ，替换。  
![在这里插入图片描述][2020072721123153.png]

2. iconfont.cn上，全选项目中的文件，应用批量操作–>批量去色  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]

转载于：[https://juejin.im/post/5cbade5f518825327e23f0ef][https_juejin.im_post_5cbade5f518825327e23f0ef]  
来源：掘金

[2020072721123153.png]: /images/20230208/cc0b28fefd4243efae11dd473a51b0a0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]: /images/20230208/207b5d79104f4a9ca70a32eeda9925eb.png
[https_juejin.im_post_5cbade5f518825327e23f0ef]: https://juejin.im/post/5cbade5f518825327e23f0ef

发表评论取消回复

表情：

评论列表（有 0 条评论，2人围观）

还没有评论，来说两句吧...

相关阅读

相关 svg修改图标颜色

对于svg图标，想通过hover或者active 添加颜色，没有办法修改，解决办法： 1. 修改[svg图片][svg]源最开始的svg图标： ![2275efcd3b

水深无声/ 2024年03月17日 17:38/ 0 赞/ 159 阅读

相关阿里巴巴矢量图标库iconfont的使用

场景工作中如果用到常用的一些图片去哪寻找。阿里巴巴矢量图标库： [https://www.iconfont.cn/home/index][https_www.ic

ゝ一世哀愁。/ 2023年10月08日 11:41/ 0 赞/ 129 阅读

相关 vue项目中使用阿里iconfont图标

本文是在vue项目中集成阿里iconfont图标库，本文添加的图标结果案例如下图所示。 ![在这里插入图片描述][20200114164626790.png] 具体步骤如

超、凢脫俗/ 2023年06月30日 02:38/ 0 赞/ 129 阅读

相关阿里巴巴字体图标iconfont使用

以前很早用过，中间很久没用了，最近项目需要，扒拉一下记忆，关于字体图标的好处就不赘述了，[阿里巴巴矢量图标库入口][Link 1]，他官网上的三种用法： ![在这里插入图片

我会带着你远行/ 2023年06月27日 05:31/ 0 赞/ 81 阅读

相关阿里iconfont图标不能修改颜色的解决方案

现象：iconfont安装后的图标，是通过symbol引用方式，有的图标不能通过color修改颜色的解决办法，有的又可以。 <svg class="icon" a

ゝ一纸荒年。/ 2023年03月02日 05:10/ 0 赞/ 3 阅读

相关 vue项目中使用阿里iconfont图标

方法一：简单粗暴 - 生成链接使用法 1.打开 [iconFont官网][iconFont] 选择自己喜欢的图标，并且添加购物车 ![20200911105914870.p

Love The Way You Lie/ 2022年12月05日 15:25/ 0 赞/ 339 阅读

相关阿里图标库iconfont下载和在旧有的iconfont中添加新的图标

一、阿里图标下载 1、访问阿里图标库官网：www.iconfont.cn，将喜欢的图标加入购物车 ![watermark_type_ZmFuZ3poZW5naGVpdG

迈不过友情╰/ 2022年10月23日 11:18/ 0 赞/ 427 阅读

相关阿里巴巴矢量图标库 iconfont图标的使用

step 1:搜索阿里巴巴矢量图标库官网（https://www.iconfont.cn）,然后注册登录,或者用github，微博登录也行,此步骤跳过; step

谁借莪１个温暖的怀抱￠/ 2022年02月02日 11:13/ 0 赞/ 572 阅读

相关在vue中使用阿里iconfont图标。

转自个人博客 [http://www.zuidaima.com/blog/4421067481730048.htm][http_www.zuidaima.com_blog_4

傷城~/ 2022年01月28日 17:15/ 0 赞/ 453 阅读

相关 Iconfont-阿里巴巴矢量图标库

1、可以对单个图标下载，下载PNG图片应用到项目中去。 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0c

本是古典何须时尚/ 2021年11月16日 19:52/ 0 赞/ 649 阅读