注意事项
若为装饰性icon,请设置通过设置
aria-hidden
忽略;若为按钮类型icon,请务必设置role="button"
和aria-label
若为装饰性icon,请设置通过设置 aria-hidden
忽略;若为按钮类型icon,请务必设置 role="button"
和 aria-label
展示图标基本使用方法。
点击图标复制代码。
ICON的尺寸包括:small
,medium
,large
,xl
,xxl
,xxxl
。
图标字体本质上还是文字,可以使用 style 和 className 设置图标的大小和颜色。
若为装饰性icon,请设置通过设置 aria-hidden
忽略;若为按钮类型icon,请务必设置 role="button"
和 aria-label
。
对于使用 iconfont.cn 的用户,通过设置 createFromIconfont 方法参数对象中的 scriptUrl 和 symbolPrefix 字段, 即可轻松地使用已有项目中的图标。
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
size | 指定图标大小 可选值: 'xs', 'small', 'medium', 'large', 'xl', 'xxl', 'xxxl' | Enum | 'medium' |
type | 指定显示哪种图标 | String | - |
提供了createFromIconfont
方法,便于开发者调用在 iconfont.cn 上自行管理的图标。
const MyIcon = Icon.createFromIconfont({
scriptUrl: '//at.alicdn.com/t/font_1310450_c7pqbwsebhj.js',
symbolPrefix: 'at-', // Iconfont 项目的图标前缀
});
ReactDOM.render(
<div className="icons-list">
<MyIcon type="office-word" />
<MyIcon type="office-excel" />
<MyIcon type="office-powerpoint" />
</div>,
mountNode,
);
原理详见symbol使用。
createFromIconfont
方法的入参对象成员如下:
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
scriptUrl | 必填,iconfont.cn 项目在线生成的 js 地址 | String | - |
symbolPrefix | 必填,iconfont.cn 项目前缀,可从项目信息中查看 | String | - |