Skip to content

Ant Design Icon RoadMap

Jump to bottom
zombieJ edited this page Feb 28, 2019 · 2 revisions
logo

该图标库是从 antd@3.9.0 开始正式使用的图标库，本文将讲述该图标库如何处理从设计师拿到的图标和具体处理流程。

项目命令

整个项目通过 lerna 进行管理，预计包管理目录结构如下如下

packages
├── icons          # 核心依赖
├── icons-react
├── icons-angular
└── icons-vue

所有命令运行之前，请确保运行 npm run bootstrap 引导各个包安装依赖和符号链接。

国内用户可以运行使用淘宝镜像的 npm run bootstrap:china

npm run icons:generate

本项目中最重要的生成命令，运行后将读取 packages/icons/svg 目录下的所有图标文件，并通过 packages/icons/build/templates 中的模板文件，将 svg 转化成一个 json 格式的抽象树，生成 ts 文件并且存储在 packages/icons/src 目录中。

npm run icons:build

构建命令，使用 tsc 将 packages/icons/src 目录下的文件编译到 packages/icons/lib 目录下，使用的是 commonjs 模块规范。同时也将 packages/icons/src/index.ts 文件使用 babel 编译到 packages/icons/lib/index.es.js ， 使用的是 ECMAScript 模块规范，用于未来可以使用 tree shaking 打包特性。

项目结构

packages/icons
├── build
│   ├── constants.ts         # 包括替换符、重新命名映射表、旧图标标记
│   ├── env.ts               # 生成时各个参数配置
│   ├── generateIcons.ts     # 最主要的生成过程函数 build(env)
│   ├── index.ts
│   ├── scripts
│   │   └── clean.ts
│   ├── templates            # 转换时使用模板存放
│   ├── typings
│   │   ├── index.ts
│   │   └── types.ts
│   └── utils
│       ├── index.ts
│       └── normalizeNames
│           ├── helpers.ts
│           └── index.ts
├── docs
├── lib                      # 构建目标文件夹
├── packages
│   └── icons-react
├── site
├── src                      # 构建源文件夹，抽象树生成目标文件夹
├── svg                      # 存放设计师的所有图标，数据源，有三种主题风格分类
│   ├── fill
│   ├── outline
│   └── twotone
└── test                     # 单元测试

基本用法

打包发布

  1. 确认从设计师拿到的图标命名是否正确。（单词顺序、单词拼写）
  2. 运行命令 npm run icons:generate, 生成 packages/icons/src/**/*.ts 文件
  3. 生成的 packages/icons/src 目录结构如下
packages/icons/src
├── dist.ts      # 经过压缩后的全量图标文件
├── index.ts     # 图标库入口
├── types.ts     # 类型定义
├── manifest.ts  # 生成的图标名字集合
├── fill
├── twotone
└── outline      # 三种主题，存放着图标的抽象树
  1. 检查名字准确无误、抽象树符合预期后，运行命令 npm run icons:build 进行编译
  2. 检查编译后的文件目录 packages/icons/lib
  3. 确保代码风格检查和测试通过：npm run lint, npm run icons:test
  4. 使用 lerna 打包发布 lerna publish 到 packages/icons 下 npm publish

添加新图标

  1. 确认从设计师拿到的三种图标风格名字是否一致且正确
  2. 将图标根据风格分别存放进 packages/icons/svg 目录下的 fill、outline 和 twotone 目录下
  3. 之后的流程同上文的打包发布流程一致

进阶指南

工作流

图标的处理可以抽象成管道的流动，所以使用了 rxjs 来优雅地描述处理的过程。

命令 npm run icons:generate 的本质就是运行 packages/icons/build/generateIcon.ts 中的 build(env) 函数。

初始化环境

  • SVGO 处理器配置

单色图标的 SVGO 处理器会额外清除路径元素上的 fill 属性，因为单色图标路径上的 fill 是没有必要的

  • 清理原来的旧的生成文件

本质是清理 env.paths 路径中以 _OUTPUT 结尾的标识符所代表的文件或者表达式

  • 规范化图标命名

这是单向一次性的过程，会根据 packages/icons/build/constants.ts 中的 renameMapper 重新命名 svg 目录下的图标文件。

最好重命名都写在该映射表下，重命名会同时影响三种主题风格下的同名图标

流

  • svgMetaDataWithTheme$ SVG 元数据流

svg-meta-data-with-theme-flow

这是一个高阶流，根据三种主题风格 fill、outline、twotone 分别发射出分支流，每个分支流上的数据的接口类型如下：

export interface BuildTimeIconMetaData {
  identifier: string; // 标识符，以大写风格名结尾，例如：AccountBookFill、AlertFill
  icon: IconDefinition; // 图标定义类型
}

上述的图标定义类型接口如下：

export interface IconDefinition {
  name: string; // kebab-case-style
  theme: ThemeType;
  icon:
    | ((primaryColor: string, secondaryColor: string) => AbstractNode) // 接受主色和副色生成抽象树的函数
    | AbstractNode; // 定义SVG结构的抽象树
}
  • BuildTimeIconMetaData$ 构建时图标原数据流

该数据流将高阶流 svgMetaDataWithTheme$ 打平，并且进行了如下处理：

  1. 对于非旧图标（指使用设计师给的新图标，通常大小比较小），修改其 viewBox 为 64 64 896 896。

为什么是 64 64 896 896 ? 参见相关issue.

Clone this wiki locally