tdesign-icons

TDesign Icon 图标统一管理仓库

Usage no npm install needed!

<script type="module">
  import tdesignIcons from 'https://cdn.skypack.dev/tdesign-icons';
</script>

README

TDesign Icon 图标公共仓库

TDesign Icons 组件库，统一管理 TDesign 各 UI 框架的 Icons 组件资源。

贡献指南

原始图标资源管理

将新图标放在 svg/ 目录下。

图标资源生成 🏗

在根目录运行 yarn generate，该命令会在 packages/ 目录下的各个子目录中生成资源文件。

更新了原始图标资源之后，请务必运行 yarn generate 命令。

此流程会生产发布到 CDN 的 iconfont 各字体资源、svgsprite 资源，并全量更新各框架包的单 Icon 的资源。

构建 NPM 包 📦

进入 packages/ 目录下的各个子目录分别执行 yarn build 命令以执行构建。

为什么要统一管理

  • 降低各框架基础组件库对 Icon 的维护成本，包括 Icon 命名变更、Icon 的增删带来的改动等。
  • 独立的 Icon 库可以保持一致，如果 TDesign 的 Icon 设计命名、规范发生变更，可以统一升级。
  • 满足单独使用 Icon 库的需求。

图标资源对应关系 📋

ICON 资源 对应 CDN 资源 Vue2 React Angular Vue3
第二版 svgsprite: https://tdesign.gtimg.com/icon/web/index.js
iconfont: https://tdesign.gtimg.com/icon/web/index.css		 ---- ----- -------
第三版 svgsprite: https://tdesign.gtimg.com/icon/0.0.3/fonts/index.js
iconfont: https://tdesign.gtimg.com/icon/0.0.3/fonts/index.css		 tdesign-icons-vue@0.0.4 tdesign-icons-react@0.0.4 tdesign-icons-angular@0.0.0-alpha.3