试图在按钮中放置两个图标答案

【问题标题】：trying to place two icons in button试图在按钮中放置两个图标
【发布时间】：2020-11-06 10:03:05
【问题描述】：

我正在尝试放置两个图标，一个与 wordDocument 相关，另一个与下载图标和按钮相关，但一个图标覆盖了另一个图标，

这是相关的代码

import { FileWordOutlined, DownloadOutlined } from '@ant-design/icons';

return (
<Fragment>
  <Button
    type="primary"
    style={{ width: '30%' }}
    onClick={() => {
      authProvider.getIdToken().then(token => {
        downloadFile(
          `${process.env.REACT_APP_API_URL}/api/Projects/${projectNumber}`,
          token.idToken.rawIdToken
        );
      });
    }}
    icon={((<FileWordOutlined />), (<DownloadOutlined />))}
    size="small"
  >
    Basis of Design
  </Button>
</Fragment>
);

按钮图像现在看起来像这样

我希望将图标 <FileWordOutlined /> 放在文本的右侧设计基础，<DownloadOutlined /> 放在文本的左侧。

谁能告诉我有什么办法可以做到这一点？

提前致谢！！！！

【问题讨论】：

标签： javascript css reactjs icons antd

【解决方案1】：

图标道具只包含一个组件。所以你将无法在那里传递两个组件。

有两种方法可以获得 2 个图标。

移除 icon 属性并使用 2 icon 组件，例如，<FileWordOutlined />, <DownloadOutlined /> 作为 Button 属性的子项。
```
<Button type="primary">
<FileWordOutlined />
  Basis of Design
<DownloadOutlined />
</Button>
```

如果你想使用 icon 道具，你可以这样使用：

<Button
type="primary"
icon={<FileWordOutlined />}
size="small"
>
 Basis of Design
 <DownloadOutlined />
</Button>

【讨论】：

【解决方案2】：

您正在做的事情不起作用，因为您将icon 设置为((<FileWordOutlined />), (<DownloadOutlined />)) 的返回值，即<DownloadOutlined />。

您可以省略 icon 并将图标和按钮文本放在 Button 中：

<Button
  type="primary"
  size="small"
>
  <DownloadOutlined />
  Basis of Design
  <FileWordOutlined />
</Button>

demo

【讨论】：