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

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 />在文本Basis of Design 和<DownloadOutlined /> 的右侧位于文本的左侧。

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

Answer 1

图标 Prop 只需要一个组件。因此，您将无法在那里传递双分量。

获取2个图标的方法有两种。

1. 删除图标属性并使用 2 个图标组件，例如，<FileWordOutlined />, <DownloadOutlined />作为 Button Prop 的 child 。

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

2. 如果你想使用 icon Prop ，你可以像这样使用它:

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