Icon 图标

xy-icon 用于渲染基于 Iconify 的图标标识，适合搭配按钮、提示和状态说明使用。

基础用法

最常见的用法是直接传入 Iconify 图标标识，例如 mdi:magnify、mdi:loading。

基础用法图标展示

图标用于增强视觉表达，支持旋转动画等效果。

尺寸、旋转与动画

你可以直接通过 size、rotate 和 spin 控制图标的展示状态，不需要额外包一层样式。

尺寸Size

图标支持自定义尺寸，通过 size 属性设置。

MDI 全量图标合集

下面的图标合集会加载 Iconify mdi 图标集的全量图标。页面先拿图标名称和分类，再按当前页批量加载 SVG 数据，避免一次性渲染几千个节点导致文档页卡顿。当前页保留了方案 B 的标签筛选，并按常见 UI 场景把热门分类前置，剩余分类折叠到“更多分类”；同时支持“清空筛选”、选中标签自动滚动定位，以及长列表的渐隐滚动提示，方便在长标签列表里来回切换。默认复制 xy-icon 代码，也可以切换成只复制 icon 值。

TIP

这里展示 Iconify `mdi` 图标集的全量图标。页面会先加载图标名称与分类，再按当前页批量加载 SVG 数据。

支持搜索、分类、分页和点击复制，可切换复制完整 `xy-icon` 代码或单独的 `icon` 值。

正在加载 mdi 图标集合...

使用建议

• 文档示例统一使用 mdi 图标集，便于直接复制。
• 图标合集支持搜索、热门分类标签筛选、“更多分类”折叠、清空筛选、选中标签自动定位、长列表滚动提示和分页浏览，适合在选型时快速定位图标名。
• 纯展示图标建议配合语义文本，不要只靠颜色表达状态。
• 用在按钮里的纯图标场景时，应补上 aria-label。

API

Icon Attributes

属性	说明	类型	默认值
icon	Iconify 图标标识	string	—
size	图标尺寸	number | string	16
rotate	旋转角度	number	0
spin	是否启用旋转动画	boolean	false