Icon

Icon 用于通过 Iconify 图标名渲染 SVG 图标。组件直接封装 @iconify/react 的 Icon，默认宽高为 1.25em，可以随文本字号缩放，也可以通过 width 和 height 显式设置尺寸。

import { Icon } from '@skyroc/web-ui';

何时使用

通过 icon 传入 Iconify 图标名称，格式通常为 prefix:name。

预览

代码

默认尺寸为 1.25em，会跟随当前字号。也可以通过 width 和 height 设置固定尺寸。

预览

代码

Icon 支持通过 className 使用主题色，也支持通过 color 传入 CSS 颜色值。颜色只对可重设颜色的单色图标生效，带固定调色板的图标不会被强制改色。

预览

代码

Icon 透传 Iconify 的变换属性和 SVG 属性，可以使用 rotate、flip、inline、className 等能力。

<Icon
  className="animate-spin text-primary"
  icon="lucide:loader-circle"
/>

通用属性参考：继承 @iconify/react 的 Icon props，并支持常规 SVG 元素属性。

Props属性、类型与默认值

15 properties

属性	说明	类型	默认值
icon*	Iconify 图标名称或图标数据对象	string \| icon data	-
width	图标宽度	string \| number \| null	'1.25em'
height	图标高度	string \| number \| null	'1.25em'
color	图标颜色，支持任意 CSS 颜色值	string	-
className	自定义 class，可用于颜色、尺寸、动画等样式	string	-
style	内联样式，来自 svg 元素属性	style object	-
inline	是否按内联图标方式对齐文本基线	boolean	false
rotate	旋转图标，可传角度字符串或四分之一圈数值	string \| number	-
flip	翻转图标	'horizontal' \| 'vertical' \| 'horizontal,vertical'	-
mode	渲染模式	'style' \| 'bg' \| 'mask' \| 'svg'	-
fallback	图标加载前或加载失败时展示的内容	ReactNode	-
onLoad	图标数据加载完成时触发	(name: string) => void	-
ssr	是否启用 Iconify 的服务端立即渲染模式	boolean	-
id	图标唯一 id，也会透传给底层 SVG	string	-
aria-label	无文字说明的语义图标应提供可访问名称	string	-

Icon 组件属性。来自 @iconify/react 的 IconProps，并由本组件补充默认 width 和 height。

字段	类型	说明
icon*	string \| icon data	Iconify 图标名称或图标数据对象。
width	string \| number \| null	图标宽度。默认值为 1.25em。
height	string \| number \| null	图标高度。默认值为 1.25em。
color	string	图标颜色。
className	string	自定义 class。
style	style object	内联样式。
inline	boolean	是否按内联图标方式对齐文本基线。
rotate	string \| number	旋转图标。
flip	'horizontal' \| 'vertical' \| 'horizontal,vertical'	翻转图标。
mode	'style' \| 'bg' \| 'mask' \| 'svg'	Iconify 渲染模式。
fallback	ReactNode	加载前或加载失败时的回退内容。
onLoad	(name: string) => void	图标数据加载完成回调。
ssr	boolean	是否启用 Iconify 服务端立即渲染模式。
...svgProps	svg element props	透传常规 svg 元素属性。