@powersi/icons-svg v4.0.1

icons-svg包

【注】原包地址，已经安装不上，由此上传该版本包。【原包版本】4.0.1

项目命令

npm run icons:generate

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

npm run icons:build

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

基本用法

打包发布

请在打包发布1、2中选择一个步骤执行即可 注意：由于发布时使用了np模块，所以，在发布时，会在命令行提醒选择要发布的版本号、npm-tag等信息，请按照需要进行选择。

打包发布1

1. 可直接使用封装的npm脚本：npm run icons:publish，即可完成从生成、编译到发布的一套流程。

打包发布2

1. 确认从设计师拿到的图标命名是否正确。（单词顺序、单词拼写）
2. 运行命令 npm run icons:generate, 生成 src/**/*.ts 文件
3. 生成的 src 目录结构如下

   src
   ├── dist.ts      # 经过压缩后的全量图标文件
   ├── index.ts     # 图标库入口
   ├── types.ts     # 类型定义
   ├── manifest.ts  # 生成的图标名字集合
   ├── fill
   ├── twotone
   └── outline      # 三种主题，存放着图标的抽象树

4. 检查名字准确无误、抽象树符合预期后，运行命令 npm run icons:build 进行编译
5. 检查编译后的文件目录 lib
6. 确保代码风格检查和测试通过：npm run lint, npm run icons:test
7. 移除package.json文件中的prepublishOnly，修改version及其他可能需要的信息
8. 执行npm publish
9. 恢复package.json

添加新图标

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

提交规范

1. 不允许提交src下自动生成的ts文件
2. 仅需要提供svg目录下3种不同样式的svg文件，其他ts、js等会在编译过程中自动生成

进阶指南

工作流

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

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

初始化环境

• SVGO 处理器配置

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

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

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

• 规范化图标命名

这是单向一次性的过程，会根据 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$ 打平，并且进行了如下处理：

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

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