大量 SVG 图标在 React 中的极速集成与应用

本文介绍: 这边建议 WOFF 字体优先，WOFF 是为 We b 设计的字体格式，WOFF 内置了字体的压缩，会有比 TTF/OTF 更小的文件体积，浏览器兼容性在 98% 左右。在一些业务场景中，可能需要使用一些业务上自定义的图标，而这些业务图标消费起来需要很多重复的流程和样板代码，用多了很繁琐。期待效果，尽量减少 SVG 样板代码的编写，减少特殊样式的注入，减少 import 及减少网络请求。如何使用 svg 的全部优势，无论纯色还是彩色的都可正常使用，且减少样板代码及缩短链路呢？

在一些业务场景中，可能需要使用一些业务上自定义的图标，而这些业务图标消费起来需要很多重复的流程和样板代码，用多了很繁琐。

大致流程：

Sk etc h svg 导出 ➡️ 压缩 svg ➡️ 纯色图标 currentCol o r 覆写 ➡️ 上传 svg 供 img 消费 OR svg 引入 Re a ct ➡️ svg Re a ct 组件样板代码编写 ➡️ -.125em 对齐处理 ➡️ 纯色图标 mask 处理 ➡️ 消费导入

可以看到当自定义的 svg 过多时，处理起来很繁琐。

期待效果，尽量减少 SVG 样板代码的编写，减少特殊样式的注入，减少 import 及减少网络请求。

下面有两种实现方式，一种是纯色的 font 化，一种是通过编写工具读取配置文件自动生成。

// ...
const svgData = fs.readFileSync(svgFile, "utf-8");

// 解析 SVG 文件
const svgTree = svgParser.parse(svgData);

// 提取路径数据
const paths = svgTree.children.filter((node) =&gt; node.tagName === "path");
const pathData = paths.map((path) =&gt; path.properties.d);

// 创建字体对象
const font = FontCarrier.create();

// 添加字形
pathData.forEach((data, index) =&gt; {
  const glyph = font.createGlyph();
  glyph.path(data);
  font.setGlyph("icon" + index, glyph);
});

// 生成字体文件
const fontBuffer = font.output();
// ...

@font-face {
  font-family: "xadmin";
  src: url("fonts/xadmin.woff?pf1byw") format("woff"), /* WOFF 字体格式优先 */
      url("fonts/xadmin.eot?pf1byw#iefix") format("embedded-opentype"),
    /* IE9 Compat Modes */ url("fonts/xadmin.ttf?pf1byw") format("truetype"), /* Safari, Android, iOS */
      url("fonts/xadmin.svg?pf1byw#xadmin") format("svg"); /* Legacy iOS */
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

字体加载过程中会发生偏移问题，这里可以通过设置 font-display: optional 来减少 CLS 问题。
由于浏览器解析 @font-face 定义后并不会下载字体，而是在构建 render tree 时发现有非空节点在使用该字体时才会触发字体的下载，所以字体文件需要通过 preload 进行提前加载，如果将 font 文件放在 CDN 还需要加入 crossorigin="anonymous" 来实现不同源的资源可以被缓存在浏览器中，并在不同网站之间共享。

在 TS 场景下为了更快速的活的提示，可以对 i 进行重新定义自动生成 icon.d.ts：

namespace JSX {
  interface IntrinsicElements {
    i: React.DetailedHTMLProps<
      React.HTMLAttributes<HTMLElement>,
      HTMLElement
    > &amp; {
      className?:
        | "icon-info"
        | "icon-send"
        | "icon-bread-delimiter"
        | "icon-copy"
        | "icon-terminal-folder"
        | "icon-terminal-all"
        | "icon-one"
        | "icon-lock"
        | "icon-edit"
        | "icon-delete";
    };
  }
}

这里有两种方式，一种是修改 svg 代码，将所有 fill 进行替换，修改为 currentColor，在外层直接设置 color 即可。

<path d="M7 1.75a....25v-.375a.25.25 0 0 1 .25-.25h.375Z" fill="currentColor" />

-webkit-mask: url("data:image/svg+xml,...C%2Fsvg%3E") no-repeat;
mask: url("data:image/svg+xml,...C%2Fsvg%3E") no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
background-color: currentColor;

background: url("data:image/svg+xml,...C%2Fsvg%3E") no-repeat;
background-size: 100% 100%;
background-color: transparent;

import React, { FC } from "react";

type TProps = {
  className?: string;
  style?: React.CSSProperties;
};

export const Icongoal: FC<TProps> = ({ className, style = {} }) => (
  <div
    style={{
      background:
        'url("data:image/svg+xml,%3Csvg...%3E%3C%2Fsvg%3E") no-repeat',
      backgroundSize: "100% 100%",
      backgroundColor: "transparent",
      width: "1em",
      height: "1em",
      ...style,
    }}
    className={className}
  />
);

export const Iconlocak: FC<TProps> = ({ className, style = {} }) => (
  <div
    style={{
      mask: 'url("data:image/svg+xml,%3Csvg%...3C%2Fsvg%3E") no-repeat',
      WebkitMask: 'url("data:image/svg+xml,%3Csvg%...vg%3E") no-repeat',
      backgroundColor: "currentColor",
      WebkitMaskSize: "100% 100%",
      maskSize: "100% 100%",
      width: "1em",
      height: "1em",
      ...style,
    }}
    className={className}
  />
);
// ...

optimize(item.content, {
  plugins: [
    { name: "removeAttrs", params: { attrs: "class" } },
    {
      name: "preset-default",
    },
    {
      name: "fill-currentColor",
      fn: () => {
        return {
          element: {
            enter: (node) => {
              if (
                node.attributes.fill == null ||
                node.attributes.fill == "" ||
                node.attributes.fill == "none"
              ) {
                return;
              }

              node.attributes.fill = "currentColor";
            },
          },
        };
      },
    },
  ],
});

module.exports = {
  // 有色 svg 列表
  colorIcon: [
    {
      // 名称
      name: "goal",
      // svg 内容
      content: `<?xml version="1.0" encoding="UTF-8"?>`,
    },
  ],
  // 单色 svg 列表
  solidColorIcon: [
    {
      name: "lock",
      content: `<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 0h16v16H0z"/><path d="M10.5 6.3v-1a2.5 2.5 0 0 0-5 0v1h5zm1.5 1H4v6h8v-6zM9.75 9.8a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-3.5a.25.25 0 0 1-.25-.25v-.5a.25.25 0 0 1 .25-.25zM4.5 5.3a3.5 3.5 0 0 1 7 0v1h.5a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1h.5v-1z" fill="#0D5DFF" class="fill-line"/></g></svg>`,
    },
  ],
  // 从文件夹读取彩色 svg 文件
  colorIconDirPath: "./",
  // 从文件夹读取单色 svg 文件
  solidColorIconDirPath: "./",

  // React 组件 TSX 导出目录
  output: "./dist",

  // React 组件前缀
  compoentPrefix: "Icon",
};