【版权声明】本文为 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. 如何实现加载中状态的图标旋转?