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

在做项目的时候我发现下载的icon有的可以修改颜色而有的不能

这是因为那些本来就有颜色的icon或者自己选择了颜色的icon下载用到项目里之后就无法改变颜色了。有颜色的icon会在svg的path中增加fill属性，所以无法更改颜色。

方法一：直接删除fill属性：下载js文件后，用编辑器打开，然后用正则表达式查找：fill="#......" ，进行替换。

方法二：下载无颜色icon：把要下载的icon添加到项目中，然后在我的项目中选择批量操作，接着选择icon，点击批量去色。

方法三：使用svgo-loader删除fill属性：先安装：yarn add --dev svgo-loader，然后在vue.config.js中进行配置（代码加在.use("svg-sprite-loader")、、、.end()后面）：

.use("svgo-loader").loader("svgo-loader").tap((options) => ({...options,plugins: [{ removeAttrs: { attrs: "fill" } }],})).end();

iconfont图标不能修改颜色解决方案相关推荐

【解决】阿里巴巴icon图标无法修改颜色
解决方式很简单,把彩色图标的勾去掉就可以了,如下只要这个彩色图标不选就要可以,如果一定要选建议css文件分开存放就可以实现既有彩色又有可以修改颜色的字体图标的效果.
字体图标使用-修改颜色
今天在画一个页面的时候,用一个要用到图标的地方,产品要求使用字体图标,并联系UI提供了字体图标库给我,字体图标库结构如下: 使用方法如下: 1.在jsp中引入iconfont.css <link ...
Hexo博客之优雅使用阿里iconfont图标
前言为什么写这篇文章? Font Awesome 无论是 v4 还是 v5 图标都有一些局限性.因此不少小伙伴想到了使用阿里 iconfont 图标.然而很多小伙伴并不是前端这个专业,可能对使用图标 ...
Hexo-使用阿里iconfont图标
Hexo-使用阿里iconfont图标 Hexo系列文章已经完成上传: 一.Hexo准备-Node.js.Vue 二.Hexo.主题.部署上线三.Butterfly美化四.Hexo之更换背景及透明 ...
Iconfont 多色图标使用svg颜色无法修改问题
原因是因为iconfont.js里面的fill 被写死了,所以修改不了. 1.把icon文件下载下来,打开iconfont.js,使用编译器正则替换掉所有包含fill="xxx", ...
iconfont在html种颜色,iconfont+开始支持彩色图标
之前发表过一篇关于iconfont图标字体的相关教程,以文字的方式,实现网页中的图标和特殊字符.教程链接可参考:http://bbs.520it.com/forum.php?mod=viewthrea ...
iconfont svg图标不能更改颜色的解决方法
iconfont svg图标不能更改颜色的解决方法参考文章: (1)iconfont svg图标不能更改颜色的解决方法 (2)https://www.cnblogs.com/chaoyueqi/p/ ...
解决方案：macOS Mojave下Pycharm运行pygame无法加载外星人游戏图片以及无法修改颜色
关于macOS Mojave下,Pycharm 运行pygame,加载不出外星人游戏图片以及无法修改颜色,解决方案如下: 1.官网升级Python3.7.2,Python Releases for ...
iconfont图标、平面转换、颜色渐变
一.iconfont图标使用步骤 1.打开阿里巴巴矢量图标库,查找自己需要的图标. 2.点击下载,添加至项目 3.两种方法:下载至本地.生成线上链接(注意在生成链接后前面添加http:) 4.下载至本 ...

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

iconfont图标不能修改颜色解决方案相关推荐

最新文章

热门文章