javascript - 如何在 Ant Design 中设置图标的大小？

Question

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

像

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

或者

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

不工作

Answer 1

它应该是

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

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

Answer 2

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

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

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

Answer 3

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

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

并将其称为：

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

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

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

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

Answer 4

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

组件.js

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

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

组件.scss

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

Answer 5

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

<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 演示

Answer 6

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

这是一个工作代码笔： https ://codesandbox.io/s/x7r7k7j6xw

Answer 7

使用 javascript 的最佳方法

Icon.setTwoToneColor("#000");