icons-svg

icons-svg 是一个能使用 svg icon 就像使用 @ant-design/icons 一样的工具。

本项目核心逻辑参考自 @ant-design/icons，将其改写为一个能在任意项目中使用的包。 核心逻辑就是将 svg 文件解析为 js 对象，并提供 React 组件可直接使用该 js 对象渲染图标。

本项目分几种使用方式

1. 将 svg 作为单个 npm 包发布后使用
2. 将 svg 作为多个 npm 包发布后使用（@ant-design/icon 就是如此，好处是多框架复用，不局限于 react)
3. 在项目中直接使用
4. 在 umi 项目中使用

下面详细说明各种使用方式

1、将 svg 作为单个 npm 包发布后使用

1yarn create icons-svg ./my-icons

1cd my-icons
2yarn

将自己的 svg 图标按主题放入项目 svg 下的主题文件夹中。

- svg
  - filled 填充类型的图标
  - outlined 线性图标
  - twotone 颜色图标

执行命令 npm publish 即可发布到 npm 上。之后有新增 svg icon 也是直接 npm publish 发布即可。

2、将 svg 作为多个 npm 包发布后使用（todo）

在不同包中执行不同命令。

3、仅在项目中使用

必须是 ts 项目，否则还是建议发成 npm 包后使用。

和之前步骤类似，找一个目录存放 svg、outlined 等文件夹，以如下目录结构为例

1- package.json
2- src
3  - svg
4    - filled
5    - outlined
6  - icons

依次执行

1yarn ei gen all --svg src/svg --output src/icons

然后在项目中引用即可。

1// src/App.tsx
2const { SmileOutlined } from '@/icons';

4、在 umi 项目中使用

使用 umi-plugin-icons 插件即可。

faq

新增一个 icon 要怎么做

目前没有增量新增或指定新增 icon 功能，每次都是全量处理，所以和初始化流程相同

1yarn gen all --svg <svg-dir> --output <output-dir>

如何实现按需加载

使用 babel-plugin-import 插件，并配置

1 {
2  libraryName: '@icons',
3  libraryDirectory: 'icons',
4  camel2DashComponentName: false,
5},

原理说明

现在有一个 svg 图标，使用编辑器打开查看，它的的内容是这样的（省去了路径的一些信息，标签结构是这样的）

1<?xml version="1.0" standalone="no"?>
2<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 1024 1024">
3  <path d="M885.9 533.  .....     2.1-19.6 43z"/>
4</svg>

将其作为字符串读取并使用 SVGO 解析、处理，偏向「清理」这种行为，对属性排序、移除不必要的属性等等。

1const svg = '<?xml version="1.0" ...>';
2const optimizer = new SVGO({
3  floatPrecision: 2,
4  // 通过 plugins 来对内容进行修改，支持自定义 plugin
5  plugins: [],
6});
7const { data } = await optimizer.optimize(svg);

处理得到的 data 还是字符串，但移除掉了一些无关信息，如 class、fill 等属性。

接下来就是重点，根据「清理」后的 svg 字符串，生成 asn，类似这样

1{
2  "tag": "svg",
3  "attrs": { "viewBox": "0 0 1024 1024", "focusable": "false" },
4  "children": [
5    {
6      "tag": "path",
7      "attrs": {
8        "d": "..."
9      }
10    }
11  ]
12}

再生成一个 asn.ts 文件，里面会导出上述对象，这样一个文件就可以供组件调用。

1// React Icon component
2import * as React from 'react';
3import LikeOutlinedSvg from './asn/LikeOutlined.ts';
4import AntdIcon, { AntdIconProps } from '../components/AntdIcon';
5
6const LikeOutlined = (
7  props: AntdIconProps,
8  ref: React.ForwardedRef<HTMLSpanElement>,
9) => <AntdIcon {...props} ref={ref} icon={LikeOutlinedSvg} />;
10
11LikeOutlined.displayName = 'LikeOutlined';
12export default React.forwardRef<HTMLSpanElement, AntdIconProps>(LikeOutlined);

这个组件可以直接在项目中使用。

当然，上面所有流程都会由本项目完成，用户只需要直接使用 <LikeOutlined /> 即可在页面中渲染一个点赞按钮。