如何在一个按钮中放置两个图标

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

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

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

1. 删除 icon 道具并使用 2 个图标组件，例如，<FileWordOutlined />, <DownloadOutlined />作为 Button 道具的子组件。

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

2. 如果你想使用 icon 属性，你可以像这样使用它：

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