动态修改iconfont图标配色
# 引言
在 iconfont
图标字体库详细介绍 (opens new window)一文中介绍了iconfont
图标字体库的三种使用方法,分别是 1.unicode
引用 2.font-class
引用 3.symbol
引用。其中只有symbol
引用的方式才能保留图标的色彩。但是如果我们想改变图标的颜色,那么该如何做呢?
# 解决方法
以React
为例,在项目中,封装一个Icon
组件,方便在其它需要用到iconfont
图标时,传入name
即可,Icon
组件封装如下
export const Icon = ({ name, ...reset }) => (
<svg className="icon" {...reset}>
<use xlinkHref={`#icon-${name}`} />
</svg>
);
1
2
3
4
5
2
3
4
5
正确显示iconfont
的前提是引入了iconfont.js
,该文件会动态插入一段svg
代码,而图标的定义(如path
)就是在其中定义的。
# 修改symbol
分析symbol
的path
可知,它的属性fillColor
的值是固定的某一个颜色,如果动态修改这个值,那么所有引用该symbol
的地方,就都是统一的颜色,显然这种做法不可取。
# 创建新symbol
但是我们可以通过name
去找到对应的symbol
,再次创建一个symbol
,并给它赋新的颜色,代码如下:
export const Icon = ({ name, ...reset }) => {
const { style } = reset;
if (!style?.color) {
return (
<svg className="icon" {...reset}>
<use xlinkHref={`#icon-${name}`} />
</svg>
);
}
var oSvg = document.querySelector(`symbol#icon-${name}`);
let paths = "";
if (oSvg) {
var pathRegex = /<path[^>]*>[^<]*<\/path>/gi;
var pathMatches = oSvg.outerHTML.match(pathRegex);
if (pathMatches && pathMatches.length) {
paths = pathMatches
.map((path) => {
return path.replace(/fill="[^"]*"/, 'fill="currentColor"');
})
.join("");
}
return (
<svg className="icon" viewBox="0 0 1024 1024" {...reset}>
<g dangerouslySetInnerHTML={{ __html: paths }} />
</svg>
);
}
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
引用Icon
组件,如下:
<Icon name="bianji" style={{ color: "#a7aebd" }} />
1
缺点
上面创建一个新symbol
的方法只是解决了图标纯色动态修改的问题,即图标只有一个颜色,如果图标有多个颜色,那么这种解决方法就捉襟见肘。如果有这种需求,可以设计新的图标更为稳妥,不让,需要在iconfont
定义多个color
参数,显然代价更高,性价比很低。
编辑 (opens new window)
上次更新: 2024/10/08, 07:37:51