ant-design/components/button/demo/icon.md
二货机器人 64b905e9bd
chore: Update @ant-design/icons deps (#19979)
* update icons deps

* update all icon ref

* fix lint

* update snapshot
2019-11-28 12:34:33 +08:00

1.4 KiB

order title
1
zh-CN en-US
图标按钮 Icon

zh-CN

当需要在 Button 内嵌入 Icon 时,可以设置 icon 属性,或者直接在 Button 内使用 Icon 组件。

如果想控制 Icon 具体的位置,只能直接使用 Icon 组件,而非 icon 属性。

en-US

Button components can contain an Icon. This is done by setting the icon property or placing an Icon component within the Button.

If you want specific control over the positioning and placement of the Icon, then that should be done by placing the Icon component within the Button rather than using the icon property.

import { Button } from 'antd';
import { SearchOutlined } from '@ant-design/icons';

ReactDOM.render(
  <div>
    <Button type="primary" shape="circle" icon={<SearchOutlined />} />
    <Button type="primary" shape="circle">
      A
    </Button>
    <Button type="primary" icon={<SearchOutlined />}>
      Search
    </Button>
    <Button shape="circle" icon={<SearchOutlined />} />
    <Button icon={<SearchOutlined />}>Search</Button>
    <br />
    <Button shape="circle" icon={<SearchOutlined />} />
    <Button icon={<SearchOutlined />}>Search</Button>
    <Button type="dashed" shape="circle" icon={<SearchOutlined />} />
    <Button type="dashed" icon={<SearchOutlined />}>
      Search
    </Button>
  </div>,
  mountNode,
);