Icon 图标

最近更新时间:2025-12-30 17:25:52

我的收藏

组件功能

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