【版权声明】本文为 BFUI 组件库的故事，记录了关于 Icon 图标组件的开发设计历程。参考引用或合理转载本文内容时，请标明文章出处和链接。维护开源环境，尊重开发者劳动成果，从你我做起。

关于图标

一套常用的图标集合。

功能调研

我们学习了社区中优秀组件库的设计思路，以此来指导BFUI中该组件的开发，以下是调研总结：

同类型组件库 主要功能实现 说明
Ant Design 图标类型、旋转角度、旋转状态、图标样式 有线框风格、实底风格和双色风格三种
Element-plus 图标颜色、图标大小
Arco Design 图标类型、图标大小、旋转状态、旋转角度 有线性图标、面性图标、多色图标三种
TDesign 图标名称、图标大小、图标样式等
Vant 徽标提示、图标颜色、图标大小、自定义图标 有基础图标、线框风格、实底风格三种
iView 图标名称。图标大小、图标颜色、自定义图标

初步计划（2023-02-24）

结合其他组件库中该组件常用功能，我们初步拟定实现如下功能的开发：

Icon Props

属性 Props 说明 类型 默认值
name 图标名称 String -
spin 是否自旋转 Boolean false

实现难点

  1. 选择何种方法实现图标功能，Font 和 Svg 哪个更好？
  2. 选择哪种标签包裹，<i> 还是 <span>，还是直接 <svg>？或者是用 ::before 伪类来实现？
  3. 如何与 Button 组件结合？
  4. 如何实现加载中状态的图标旋转？