动态修改iconfont图标配色

引言

在 iconfont 图标字体库详细介绍一文中介绍了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>
);

正确显示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>
    );
  }
};

引用Icon组件，如下:

<Icon name="bianji" style={{ color: "#a7aebd" }} />

缺点

上面创建一个新symbol的方法只是解决了图标纯色动态修改的问题，即图标只有一个颜色，如果图标有多个颜色，那么这种解决方法就捉襟见肘。如果有这种需求，可以设计新的图标更为稳妥，不让，需要在iconfont定义多个color参数，显然代价更高，性价比很低。