Ant Design 中如何设置图标大小？

Question

所以当我在 Ant Design 中使用图标时，它始终是 14 * 14 px。 有没有办法手动设置尺寸？

类似的事情

<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

使用

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

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

Answer 6

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

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

虽然这里的许多解决方案给出了正确的答案，但我想解释一下为什么它会这样工作。

解决方案

正如其他答案所述，您需要更改字体大小，如下所示：

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

为什么这有效？

如果您检查 ant design 渲染的 svg，您会发现它使用 em 单位，而不是以像素为单位设置宽度和高度。

em 单位是相对单位，相对于父级的字体大小。因此，如果父级的字体大小为 16px

，则为 

1em = 16px

、

2em = 32px

 等等。

由于 ant design 将宽度和高度设置为

1em

，因此 svg 的宽度和高度将是父级的字体大小 - 在这种情况下，ant design 包装其的 

span

 的字体大小图标与.

为什么他们不只使用像素？

由于我没有参与开发过程，所以无法给你明确的答案，但我有两种理论。

由于图标是方形的并且宽度和高度相等，因此这样做将允许用户同时设置宽度和高度，而无需显式定义宽度和高度。
由于图标是用跨度包裹的，因此您需要能够使用 css 选择器来更改 svg 组件的宽度和高度。当使用内联样式时，这通常是不可能的。将宽度和高度设置为
2. em 单位允许用户更改 svg 的大小，而无需使用 css 选择器。

Answer 8

使用 javascript 实现此操作的最佳方法

Icon.setTwoToneColor("#000");