Icon图标

Examples

基本用法

通过Type属性设置图标名称，Theme属性设置主题，还可以通过设置 Spin 属性来实现动画旋转效果。

自定义图标

利用 Icon 组件封装一个可复用的自定义图标。可以通过 component 属性传入一个组件来渲染最终的图标，以满足特定的需求。

使用 iconfont.cn 的多个资源

可通过 <script> 引用多个资源，用户可灵活的管理 iconfont.cn 图标。如果资源的图标出现重名，会按照数组顺序进行覆盖。

多色图标

双色图标可以通过 twoToneColor 属性设置主题色。

使用 iconfont.cn

对于使用 iconfont.cn 的用户，通过设置 <script> 引入 "symbol 引用" 中的 JS，即可轻松地使用已有项目中的图标。

JS 获取方法：创建项目 -> 导入图标 -> 选择 “Symbol” -> 查看在线链接

属性	描述	类型	默认值
Alt	属性图标的替代文本	String	--
Role	属性旋转带有动画的图标	String	img
AriaLabel	属性设置 aria-label 属性的值	String	--
Spin	属性旋转带有动画的图标	Boolean	false
Rotate	属性旋转 n 度 - 在 IE9 中不起作用	Int32	0
Type	属性要显示的图标名称	String	--
Theme	属性图标的哪个主题 - 'fill' \| '大纲' \| '双色';	String	IconThemeType.Outline
TwotoneColor	属性使用 TwoTone 主题时指定主色。其他主题忽略此参数。	String	--
IconFont	属性`IconFont` 的类型	String	--
Width	属性图标的宽度	String	1em
Height	属性图标的高度	String	1em
Fill	属性图标 SVG 的填充值	String	currentColor
TabIndex	属性包装范围的 Tabindex	String	--
StopPropagation	属性停止传播图标上的点击事件	Boolean	false
OnClick	属性图标的 OnClick 事件	EventCallback<MouseEventArgs>	--
Component	属性呈现为自定义图标的组件	RenderFragment	--
Id	属性组件 HTML 的 ID	String	Uniquely Generated ID
Class	属性为 DOM 元素指定一个或多个类名。	String	--
Style	属性指定 DOM 元素的内联样式。	String	--
RefBack	属性`一个 ForwardRef` 实例。您可以使用 `AntDesign.ForwardRef.Current` 获取对内部 DOM 的引用。	ForwardRef	--