-
Notifications
You must be signed in to change notification settings - Fork 580
Ant Design Icon RoadMap
该图标库是从 antd@3.9.0
开始正式使用的图标库,本文将讲述该图标库如何处理从设计师拿到的图标和具体处理流程。
整个项目通过
lerna
进行管理,预计包管理目录结构如下如下packages ├── icons # 核心依赖 ├── icons-react ├── icons-angular └── icons-vue
所有命令运行之前,请确保运行 npm run bootstrap
引导各个包安装依赖和符号链接。
国内用户可以运行使用淘宝镜像的
npm run bootstrap:china
本项目中最重要的生成命令,运行后将读取 packages/icons/svg
目录下的所有图标文件,并通过 packages/icons/build/templates
中的模板文件,将 svg
转化成一个 json
格式的抽象树,生成 ts
文件并且存储在 packages/icons/src
目录中。
构建命令,使用 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 # 单元测试
- 确认从设计师拿到的图标命名是否正确。(单词顺序、单词拼写)
- 运行命令
npm run icons:generate
, 生成packages/icons/src/**/*.ts
文件 - 生成的
packages/icons/src
目录结构如下
packages/icons/src
├── dist.ts # 经过压缩后的全量图标文件
├── index.ts # 图标库入口
├── types.ts # 类型定义
├── manifest.ts # 生成的图标名字集合
├── fill
├── twotone
└── outline # 三种主题,存放着图标的抽象树
- 检查名字准确无误、抽象树符合预期后,运行命令
npm run icons:build
进行编译 - 检查编译后的文件目录
packages/icons/lib
- 确保代码风格检查和测试通过:
npm run lint
,npm run icons:test
-
使用到lerna
打包发布lerna publish
packages/icons
下npm publish
- 确认从设计师拿到的三种图标风格名字是否一致且正确
- 将图标根据风格分别存放进
packages/icons/svg
目录下的fill
、outline
和twotone
目录下 - 之后的流程同上文的打包发布流程一致
图标的处理可以抽象成管道的流动,所以使用了 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 元数据流
这是一个高阶流,根据三种主题风格 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$
打平,并且进行了如下处理:
- 对于非旧图标(指使用设计师给的新图标,通常大小比较小),修改其
viewBox
为64 64 896 896
。
为什么是
64 64 896 896
? 参见相关issue.