Icon 图标

图标的命名规范

• 实心和描线图标保持同名，用 -o 来区分，比如 question-circle(实心) 和 question-circle-o(描线)；

• 命名顺序：[icon名]-[形状可选]-[描线与否]-[方向可选]。

如何使用

<Icon type="check" />

提示

不再支持 自定义 icon，如果需要用自定义的 icon 类型，有这几种方法：

• 查看 /docs/react/upgrade-notes 中 1.x => 2.0 的 svg icon 文档介绍

• 使用自己的 iconfont 文件

• 其他方法，可以复用我们已经提供的 .am-icon 样式名

代码演示

基本

import { Icon, Grid } from 'antd-mobile';
const list = [
  'check-circle', 'check', 'check-circle-o',
  'cross-circle', 'cross', 'cross-circle-o',
  'up', 'down', 'left',
  'right', 'ellipsis',
  'loading',
];
const Demo = () => {
  const data = list.map(item => ({
    icon: (<Icon type={item} />),
    text: item,
  }));
  return (
    <Grid data={data} columnNum={3} hasLine={false} activeStyle={false} />
  );
};
ReactDOM.render(<Demo />, mountNode);

大小

import { Icon, Grid } from 'antd-mobile';
const Demo = () => {
  const size = ['xxs', 'xs', 'sm', 'md', 'lg'];
  const data = size.map(item => ({
    icon: (<Icon type="search" size={item} />),
    text: item,
  }));
  return (<Grid data={data} columnNum={5} hasLine={false} activeStyle={false} />);
};
ReactDOM.render(<Demo />, mountNode);

API