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

Question

我正在尝试放置两个图标，一个与 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 /> 在文本的左侧.

任何人都可以让我知道有什么办法可以做到这一点吗？

提前致谢！！！

Answer 1

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

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

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

demo

Answer 2

图标道具只有一个组件。所以你将无法在那里传递双分量。

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

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

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

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

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

trying to place two icons in button

javascript

css

icons

reactjs

antd