# 图标组件库

# 现状

• 图标名称规范无法把控
• 只能全量引入，无法按需加载
• 业务项目中使用各种标签 (i , span)， 即通过class类名来使用，不好统一样式及维护
• 组件库与图标库耦合问题
  • 组件库 awesome-ui 没有引用图标库，而是使用项目中引用的图标库，导致项目只能使用指定的图标库，若修改图标库可能需要改动组件库
  • 组件库 thinking-ui 全量引用图标库，图标利用率低，同时还是存在修改图标库，同时需要修改组件库的情况

# 优劣

# 优势

• 图标名称规范纳入把控。
  • 初期人工把控，后期通过上传限制控制。
• 输出独立的图标组件，可以按需加载
• 项目中无需引用 iconfont 上资源，通过安装图标库，直接使用相应的图标组件，避免直接使用 class 类名，利于后期维护。
• 组件库可以按需引用所需要的图标组件，同时与业务项目解耦。

# 劣势

• 灵活度较使用iconfont 资源低，无法直接使用 class 类名切换
  • 无法避免，但是相对于按需加载及方便维护可以接受
• 新增图标时，需要发包
  • 可以开发上传图标服务页面，触发构建 @dev ，迭代完成后手动发布 @latest
    • 纳入图标名称规范门禁
    • 接入单点登录，记录及限制上传人员
• 项目多依赖一个包且较大（包含大量 svg 代码）
  • 打包输出是按需加载，不会导致输出变得更大

# 命名规范

我们为每个图标赋予了语义化的命名，命名规则如下:

• 命名顺序：[icon名称]-[外框可选]-[方向可选]-[描线与否]
• 外框类别 (无) square (方形) circle (圆形)
• 方向类别 (无) left (左) right (右) top (上) bottom (下)
• 图标类型 stroke (描线) fill (实底) colorful (多色)

# svg制作规范

iconfont 制作规范 (opens new window)

# 语雀文档

图标组件库文档 (opens new window)