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

8oomwypt 于 2022-11-04 发布在 React

关注(0)|答案(3)|浏览(273)

我试图放置两个图标一个是相关的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 />位于文本的左侧。
有没有人能告诉我有什么办法可以做到这一点？

reactjs

来源：https://stackoverflow.com/questions/62939721/how-to-place-two-icons-in-a-button

3条答案

按热度按时间

z9ju0rcb1#

图标道具只有一个组件，所以你不能传递两个组件。
有两种方法可以获得2个图标。
1.删除图标属性并使用2个图标组件（例如<FileWordOutlined />, <DownloadOutlined />）作为按钮属性的子项。

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

1.如果要使用图标道具，请按如下方式使用：

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

赞(0）回复(0）举报 2022-11-04

oalqel3c2#

您所做的操作不起作用，因为您将icon设置为((<FileWordOutlined />), (<DownloadOutlined />))的返回值，即<DownloadOutlined />。
您可以省略icon，而将图标和按钮文字放在Button内：

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

demo

赞(0）回复(0）举报 2022-11-04

b1uwtaje3#

如果你想得到2个图标，然后创建这样的图标道具：

<Button icon={your primary icon}>
    {text}
    {extra icon}
</Button>

所以元素看起来像

<My Button 
    icon={<icon name/>}
    text={text}
    extra icon={<extra icon name/>}
/>

赞(0）回复(0）举报 2022-11-04

我来回答

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

3条答案

相关问题

热门标签

最新问答