React 组件

UGIcon 图标

统一第三方 SVG 图标的尺寸、线宽、颜色继承和辅助技术语义。

导入方式

按需从包入口导入组件，并在应用入口引入一次样式文件。

tsx

import { UGIcon } from '@ug666/ui-react'

icon 属性适合第三方图标组件；children 适合已有 SVG 或自定义图形，两种来源共用尺寸和语义规则。

图标继承当前文字颜色，尺寸和描边粗细可独立设置。

color 接受任意有效 CSS 颜色；不传时继承当前文字颜色。

spin 统一加载图标的旋转状态，并在用户要求减少动态效果时自动停用动画。

装饰图标默认隐藏于辅助技术；独立传达含义时关闭 decorative 并提供 aria-label。

属性	类型	默认值	说明
icon	ComponentType<IconGraphicProps>	—	要渲染的 SVG 图标组件；未传时渲染 children。
children	ReactNode	—	自定义 SVG 或图形内容，与 icon 二选一。
color	string	currentColor	设置图标颜色；未设置时继承当前文字颜色。
size	number \| string	16	设置图标宽高。
strokeWidth	number	2	设置线性图标描边粗细。
spin	boolean	false	启用统一旋转动画；系统减少动态效果时停止旋转。
decorative	boolean	true	装饰图标对辅助技术隐藏；语义图标应设为 false 并提供名称。
原生属性 / ref	HTMLAttributes<HTMLSpanElement>	—	透传颜色类、aria-label、data-* 等属性并暴露容器元素。