Icon 图标

用于统一承载字体图标与内联 SVG 图标，支持主题变量驱动的颜色、尺寸和旋转状态，适合和按钮、标签、提示类组件组合使用。

基础用法

font-class 模式适合接入现有 iconfont 资源。下面的示例使用局部样式模拟字体图标类名，方便在文档里直接预览。

SVG 用法

svg 模式通过默认插槽传入 path、g 等 SVG 内容，不依赖额外图标资源。

主题能力

尺寸和颜色都可以直接通过 Props 驱动，也可以绑定到现有主题 CSS 变量。

状态与无障碍

通过 spin 启用旋转动画，通过 label 为辅助技术提供可读名称；没有 label 时组件会自动标记为装饰性图标。

结合 Button 使用

Icon 可以直接放进 Button 的 icon 插槽，复用按钮的前置图标布局能力。

接口说明

属性

名称	类型	默认值	说明
mode	'font-class' | 'svg'	'font-class'	图标渲染模式。
name	string	undefined	font-class 模式下的图标类名，例如 icon-search。
classPrefix	string	'iconfont'	font-class 模式下的基础类名。
size	string | number	'1em'	图标尺寸，数字会被转换为 px。
color	string	'currentColor'	图标颜色，支持主题变量和原始 CSS 颜色值。
viewBox	string	'0 0 1024 1024'	svg 模式下的 viewBox。
spin	boolean	false	是否启用内置旋转动画。
label	string	undefined	提供给辅助技术的可访问名称；未传时自动标记为装饰性图标。

事件

名称	类型	默认值	说明
click	(event: MouseEvent) => void	-	点击图标根节点时触发。

插槽

名称	类型	默认值	说明
default	() => VNode[]	-	svg 模式下的内联 SVG 内容，通常传入 path、g 等节点。