如何在 Ant Design 中设置图标的大小?
Posted
技术标签:
【中文标题】如何在 Ant Design 中设置图标的大小?【英文标题】:How can I set the size of icons in Ant Design? 【发布时间】:2019-06-24 16:48:03 【问题描述】:所以当我在 Ant Design 中使用图标时,它总是 14 * 14 像素。 有没有办法设置大小maual?
类似的东西
<Icon width="20px" type="setting" />
或
<Icon style=width: '20em' type="setting" />
不工作
【问题讨论】:
【参考方案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
【讨论】:
以上是关于如何在 Ant Design 中设置图标的大小?的主要内容,如果未能解决你的问题,请参考以下文章