Ant Design 如何设置图标大小？

Question

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

诸如此类的事情

<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

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

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

Answer 3

使用 javascript 的最佳方法

Icon.setTwoToneColor("#000");

Answer 4

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

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

并将其命名为：

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

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

已编辑：- 后来有人告诉我，以上内容仅在图标从其父级继承其字体大小时才有效。所以我们应该直接将 style 属性添加到 Icon

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

Answer 5

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

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

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

Answer 6

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

component.js

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

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

component.scss

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

Answer 7

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

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

您可以添加这些 classes/styles 它会为您解决问题（它为我解决了）

<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

Ant Design 如何设置图标大小？

How can I set the size of icons in Ant Design?

javascript

html

reactjs

icons

ant-design-pro