[英]How can I set the size of icons in Ant Design?
So when I'm using an Icon in Ant Design it is always 14 * 14 px.所以当我在 Ant Design 中使用图标时,它总是 14 * 14 像素。 Is there a way to set the size maually?
有没有办法手动设置大小?
Things like像
<Icon width={"20px"} type="setting" />
or或者
<Icon style={{width: '20em'}} type="setting" />
do not work不工作
It should be它应该是
<Icon type="message" style={{ fontSize: '16px', color: '#08c' }} theme="outlined" />
https://codepen.io/anon/pen/wNgrWX https://codepen.io/anon/pen/wNgrWX
In the new antd Icon version, you can increase the size of the icon like this:在新的 antd Icon 版本中,您可以像这样增加图标的大小:
import { MessageTwoTone } from "@ant-design/icons";
And call it as:并将其称为:
<div style={{ fontSize: "30px" }}>
<MessageTwoTone />
</div>
I tried using it as an attribute of <MessageTwoTone>
but attribute no longer works like in the old version mentioned in the answers above.我尝试将它用作
<MessageTwoTone>
的属性,但属性不再像上面答案中提到的旧版本那样工作。
Edited:- I was told later that the above will only work while the Icon inherits its font-size from its parent.编辑:-后来有人告诉我,上面的内容只有在图标从其父级继承其字体大小时才有效。 So we should rather add the style attribute directly to the Icon
所以我们宁愿直接给 Icon 添加 style 属性
<MessageTwoTone style={{ fontSize: "30px" }}/>
Not sure if its just for me, but as of today the accepted answer does not work, I made it work by putting a className inside the Icon Component, and targeting the svg of that class.不确定它是否只适合我,但截至今天,接受的答案不起作用,我通过在图标组件中放置一个 className 并针对该类的 svg 使其工作。 here's an example
这是一个例子
component.js组件.js
import { CheckCircleTwoTone } from '@ant-design/icons';
<CheckCircleTwoTone
twoToneColor="#52c41a"
className="reg_icon"
/>
component.scss组件.scss
.reg_icon {
svg {
font-size: 120px !important;
}
}
Use <Icon style={{ fontSize: '30px'}} type="check-circle" />
使用
<Icon style={{ fontSize: '30px'}} type="check-circle" />
Here is a working codepen: https://codesandbox.io/s/x7r7k7j6xw这是一个工作代码笔: https ://codesandbox.io/s/x7r7k7j6xw
If using the icon inside the button like this:如果像这样使用按钮内的图标:
<Button type="text" icon={<GithubOutlined />} />
You can add these classes/styles and it will solve the issue for you (it solved it for me)您可以添加这些类/样式,它会为您解决问题(它为我解决了问题)
<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;
}
}
使用 javascript 的最佳方法
Icon.setTwoToneColor("#000");
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.