一、组件功能
用于显示图标的组件,内置 68 个常用图标(见下图),支持尺寸、颜色等自定义配置。
二、基础用法
通过 name 指定图标名称,size 设置图标尺寸,color 设置图标颜色。
Template 示例:
<Icon name="check-circle" size="lg" color="#00A870" />
效果展示如下:
三、属性说明
| 属性名 | 类型 | 描述 | 默认值 |
| name ★ | string | 图标名称 (见下方可用图标列表) | – |
| color | string | 图标颜色 (CSS 颜色值) | – |
| size | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | 图标尺寸 | "md" |
注意:★ 标记为必填属性。
四、通用图标
·agent – 智能体
·analytics – 分析
·atom – 原子
·batch – 批处理
·bolt – 闪电
·bug – 调试
·check – 勾选
·check-circle – 勾选圆圈
·check-circle-filled – 勾选圆圈(填充)
·close – 关闭
·compass – 指南针
·confetti – 彩纸
·cube – 立方体
·dot – 点
·dots-horizontal – 横向点
·dots-vertical – 纵向点
·empty-circle – 空圆圈
·external-link – 外部链接
·info – 信息
·lifesaver – 救生圈
·lightbulb – 灯泡
·play – 播放
·plus – 加号
·reload – 重载
·search – 搜索
·sparkle – 星光
·sparkle-double – 双星光
·star – 星星
·star-filled – 星星(填充)
五、方向图标
·chevron-down – 下箭头
·chevron-left – 左箭头
·chevron-right – 右箭头
·chevron-up – 上箭头
·chevron-up-down – 上下箭头
六、文档与内容
·book-clock – 书本时钟
·book-closed – 合上的书
·book-open – 打开的书
·calendar – 日历
·chart – 图表
·document – 文档
·images – 图片
·notebook – 笔记本
·notebook-pencil – 笔记本铅笔
·page-blank – 空白页
七、地图与位置
·globe – 地球
·map-pin – 地图标记
·maps – 地图
八、设备
·desktop – 桌面
·mobile – 移动设备
·phone – 电话
九、用户与身份
·name – 名称
·profile – 个人资料
·profile-card – 个人资料卡
·user – 用户
十、开发与代码
·keys – 密钥
·lab – 实验室
·settings-slider – 设置滑块
·square-code – 方形代码
·square-image – 方形图片
·square-text – 方形文本
十一、其他
·circle-question – 问号圆圈
·mail – 邮件
·suitcase – 公文包
·wreath – 花环