超实用的iconfont中svg图片颜色动态修改方法

前言

在前面有提过iconfont字体图标的使用步骤和实现原理，参考这篇文章iconfont图标字体库详细介绍，以及以React为例，如何动态修改图标的颜色，参考这篇文章动态修改iconfont图标配色。

今天讲解更通用的两个函数，适用于任意前端项目，项目中使用iconfont字体图标更佳。

这两个函数的目的是根据传入的 symbolId 和 color 来生成一个 SVG 图像，并将其转换成一个可以用作图片源的 data URI 格式。下面是对每个函数的详细解释：

getSVGForSrcById 函数

export const getSVGForSrcById = ({
    symbolId = "icon-symbol-one",
    color = "red",
}) => {
    let svgstr = getSVGElementById({ symbolId, color });
    let src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svgstr);

    return src;
};

解释：

• 目的：生成一个包含指定 symbolId 和 color 的 SVG 图像，并将其转为可以作为 src 使用的 data URI 格式。

• 参数：

  • symbolId：指定符号的 ID，默认值为 "icon-symbol-one"。

  • color：指定 SVG 图形的填充颜色，默认值为 "red"。

• 逻辑：
  调用 getSVGElementById 函数，获取指定 symbolId 和 color 的 SVG 字符串。

使用 encodeURIComponent 对返回的 SVG 字符串进行 URI 编码，并将其作为 data:image/svg+xml;charset=utf-8, 形式的 src。这是一个包含 SVG 数据的 URI，可以直接在 HTML 中作为图像源使用。

• 返回值：

返回一个包含 SVG 图像数据的 data URI，例如：data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" ...></svg>。

getSVGElementById 函数

export const getSVGElementById = ({
    symbolId,
    color = "red",
}) => {
    symbolId = symbolId || "icon-symbol-one";
    var oSvg = document.querySelector(`symbol#${symbolId}`);
    let paths = "";
    if (oSvg) {
        var pathRegex = /<path[^>]*>[^<]*<\/path>/gi;
        var pathMatches = oSvg.outerHTML.match(pathRegex);
        if (pathMatches && pathMatches.length) {
            paths = pathMatches.join("");
        }
    }

    var svgStr = `<svg xmlns="http://www.w3.org/2000/svg" id="${symbolId}" viewBox="0 0 1024 1024" height="36px" width="36px" fill="${color}">${paths}</svg>`;
    return svgStr;
};

解释：

• 目的：根据 symbolId 获取 SVG 图标，并将其转换为带有颜色的 SVG 字符串。

• 参数：

  • symbolId：指定符号的 ID，默认值为 "icon-symbol-one"。

  • color：指定 SVG 图形的填充颜色，默认值为 "red"。

• 逻辑：

使用 document.querySelector 获取页面中指定 symbolId 的 <symbol> 元素。如果找到了该 <symbol> 元素，通过正则表达式提取其中的 <path> 元素（表示路径）。提取到的路径会拼接成一个字符串，作为最终的 SVG 内容的一部分。
构造一个完整的 SVG 字符串，指定 xmlns（命名空间）、id、viewBox、height、width 和 fill 属性，将提取到的路径插入其中。

• 返回值：

返回一个包含 SVG 图形的字符串，该字符串可以被用作 HTML 或 CSS 中的 SVG 图像。例如：

<svg xmlns="http://www.w3.org/2000/svg" id="icon-symbol-one" viewBox="0 0 1024 1024" height="36px" width="36px" fill="red">
    <path d="..." />
</svg>

总结

getSVGForSrcById：调用 getSVGElementById 获取一个包含指定符号 ID 和颜色的完整 SVG 字符串，然后将其转换为 data URI，这个 data URI 可以作为图片源 src 使用。

getSVGElementById：根据给定的 symbolId 和 color 获取相应的 SVG 元素并生成 SVG 字符串，确保填充颜色符合要求。

这两个函数一起工作，首先从页面中提取 SVG 图形，然后根据需求生成可嵌入到 HTML 中的 data URI 格式。