组件功能

用于显示图标的组件，内置 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 - 花环