From dfc36962b01376ac66bbe29ee58ebc712d7acffa Mon Sep 17 00:00:00 2001 From: neverland Date: Tue, 21 Dec 2021 19:57:51 +0800 Subject: [PATCH] docs(Icons): add contribution guide (#10077) --- packages/vant-icons/README.md | 13 ------- packages/vant-icons/contribution.zh-CN.md | 47 +++++++++++++++++++++++ 2 files changed, 47 insertions(+), 13 deletions(-) create mode 100644 packages/vant-icons/contribution.zh-CN.md diff --git a/packages/vant-icons/README.md b/packages/vant-icons/README.md index c5c26e822..af0809483 100644 --- a/packages/vant-icons/README.md +++ b/packages/vant-icons/README.md @@ -17,16 +17,3 @@ pnpm add @vant/icons - [Usage in Vue](https://youzan.github.io/vant/#/zh-CN/icon) - [Usage in Weapp](https://youzan.github.io/vant-weapp/#/icon) - -## Contribution - -### Update Icons - -1. Update assets/icons.sketch -2. Make a Pull Request - -### Add New Icon - -1. Add new icon to assets/icons.sketch -2. Add icon name to src/config.js -3. Make a Pull Request diff --git a/packages/vant-icons/contribution.zh-CN.md b/packages/vant-icons/contribution.zh-CN.md new file mode 100644 index 000000000..f69823c86 --- /dev/null +++ b/packages/vant-icons/contribution.zh-CN.md @@ -0,0 +1,47 @@ +# 图标贡献指南 + +## 设计稿 + +Vant 图标库托管在 [iconfont.cn](https://iconfont.cn) 上,同时仓库中保留了一份完整的 Sketch 设计稿。 + +在线预览链接:https://iconfont.cn/collections/detail?cid=31945。 + +## 更新流程 + +新增/更新图标的标准流程如下: + +### 1. 绘制图标 + +在 Sketch 中绘制所需的图标,并更新到 `assets/icons.sketch` 文件中。 + +绘制图标前,请阅读:[iconfont - 图标绘制](https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.16&helptype=draw)。 + +### 2. 上传图标 + +从 Sketch 中导出图标对应的 SVG 文件,并上传到 [iconfont 项目](https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2553510) 中。 + + + +> 此步骤需要图标库管理员权限,请通过联系 Vant 维护者进行添加。 + +### 3. 更新代码 + +在 iconfont 中将更新后的图标库下载到本地,并更新以下文件: + +- `src/index.less`: 更新字体文件的 CDN 链接。 +- `src/encode-woff2.less`: 更新字体文件的 base64 URL。 + +如果有新增图标,还需要更新以下文件: + +- `src/config.js`: 增加新图标的英文名称。 +- `src/common.less`: 增加新图标的样式类。 + +字体文件的 base64 URL 通过 [transfonter](https://transfonter.org/) 生成,步骤如下图所示: + + + +### 4. 发布图标库 + +执行 `yarn release` 命令,发布 `@vant/icons` 到 npm。 + +发布完成后,在对应仓库中进行升级,即可使用新图标。