如何在 Ant Design 中设置图标的大小？答案

【问题标题】：How can I set the size of icons in Ant Design?如何在 Ant Design 中设置图标的大小？
【发布时间】：2019-06-24 16:48:03
【问题描述】：

所以当我在 Ant Design 中使用图标时，它总是 14 * 14 像素。有没有办法设置大小maual？

类似的东西

<Icon width={"20px"} type="setting" />

或

<Icon style={{width: '20em'}} type="setting" />

不工作

【问题讨论】：

标签： javascript html reactjs icons ant-design-pro

【解决方案1】：

应该是

<Icon type="message" style={{ fontSize: '16px', color: '#08c' }} theme="outlined" />

https://codepen.io/anon/pen/wNgrWX

【讨论】：

我也试过了，效果很好。我发布了一个 codepen 示例。
也可以使用单独的图标组件，就像<MessageOutlined style={{ fontSize: '20px'}}/>
至少在我的浏览器中，你的 codepen 不起作用。

【解决方案2】：

使用<Icon style={{ fontSize: '30px'}} type="check-circle" />

这是一个有效的代码笔： https://codesandbox.io/s/x7r7k7j6xw

【讨论】：

【解决方案3】：

使用 javascript 的最佳方式

Icon.setTwoToneColor("#000");

【讨论】：

【解决方案4】：

在新的antd Icon版本中，你可以像这样增加图标的大小：

import { MessageTwoTone } from "@ant-design/icons";

并将其称为：

  <div style={{ fontSize: "30px" }}>
        <MessageTwoTone />
      </div>

我尝试将其用作<MessageTwoTone> 的属性，但属性不再像上面答案中提到的旧版本那样起作用。

编辑：- 后来有人告诉我，上述内容仅在 Icon 从其父级继承其字体大小时才有效。所以我们宁愿直接给 Icon 添加 style 属性

         <MessageTwoTone style={{ fontSize: "30px" }}/>

【讨论】：

【解决方案5】：

可以使用fontSize样式属性改变图标的大小。

例如：使用style={{ fontSize: '150%'}}

<PlayCircleFilled style={{ fontSize: '150%'}} />

【讨论】：

虽然来自@ßiansor Å 的回答。 Ålmerol 在当时是正确的，这是目前更好的解决方案。

【解决方案6】：

不确定它是否只适合我，但截至今天接受的答案不起作用，我通过在图标组件中放置一个 className 并以该类的 svg 为目标使其工作。这是一个例子

component.js

import { CheckCircleTwoTone } from '@ant-design/icons';

  <CheckCircleTwoTone
                    twoToneColor="#52c41a"
                    className="reg_icon"
                />

组件.scss

.reg_icon {
    svg {
        font-size: 120px !important;
    }
}

【讨论】：

谢谢你的提示，你是对的。他们更新了它，现在你应该使用另一种方法。我接受了@Kelum Sampath 的回答

【解决方案7】：

如果像这样使用按钮内的图标：

<Button type="text" icon={<GithubOutlined />} />

您可以添加这些类/样式，它会为您解决问题（它为我解决了问题）

<Button type="text"
        className={styles.button}
        icon={<GithubOutlined className={styles.icon}/>}
/>

.button {
  
  // The wanted size...
  font-size: 2.5em;

  // Without it, changing the font size will cause problems.
  width: fit-content;
  height: fit-content;

  .icon {
    font-size: inherit;
  }
}

CodePen Demo

【讨论】：