组件功能
用于显示图标的组件,内置 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" |
注意:
★ 标记为必填属性。
可用图标列表(共 68 个)
通用图标
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 - 花环