entityMap|0|type|IMAGE|mutability|IMMUTABLE|data|imageUrl|https://i.stack.imgur.com/Rmb1x.png|imageAlt|blocks|key|cdl5p|text|可以使用fontSize+style属性更改图标的大小。|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|5sb7l|例如：style={{+fontSize:+'150%25'}}的使用|evghd|<PlayCircleFilled+style={{+fontSize:+'150%25'}}+/>|code-block|syntax|javascript|7c2ms|​|7ev6g|?|atomic|5t4g1|4r9fu^0|4|8|0|3|R|0|0|0|0|1|0|0|0^^$0|$1|$2|3|4|5|6|$7|8|9|-4]]]|A|@$B|C|D|E|2|F|G|11|H|@$I|12|J|13|K|L]]|M|@]|6|$]]|$B|N|D|O|2|F|G|14|H|@$I|15|J|16|K|L]]|M|@]|6|$]]|$B|P|D|Q|2|R|G|17|H|@]|M|@]|6|$S|T]]|$B|U|D|V|2|F|G|18|H|@]|M|@]|6|$]]|$B|W|D|X|2|Y|G|19|H|@]|M|@$I|1A|J|1B|B|1C]]|6|$]]|$B|Z|D|V|2|F|G|1D|H|@]|M|@]|6|$]]|$B|10|D|-4|2|F|G|1E|H|@]|M|@]|6|$]]]]

Can change the size of the icon using <code>fontSize</code> style property.
eg: use of <code>style={{ fontSize: '150%'}}</code>
<pre><code>&lt;PlayCircleFilled style={{ fontSize: '150%'}} /&gt;
</code></pre>
<a href="https://i.stack.imgur.com/Rmb1x.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Rmb1x.png" alt="enter image description here" /></a>

entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://codepen.io/anon/pen/wNgrWX|blocks|key|ejmpe|text|它应该是|unstyled|depth|inlineStyleRanges|entityRanges|5i8ar|<Icon+type="message"+style={{+fontSize:+'16px',+color:+'#08c'+}}+theme="outlined"+/>|code-block|syntax|javascript|1k0j9|offset|length|fb4hg^0|0|0|0|Y|0|0^^$0|$1|$2|3|4|5|6|$7|8]]]|9|@$A|B|C|D|2|E|F|R|G|@]|H|@]|6|$]]|$A|I|C|J|2|K|F|S|G|@]|H|@]|6|$L|M]]|$A|N|C|8|2|E|F|T|G|@]|H|@$O|U|P|V|A|W]]|6|$]]|$A|Q|C|-4|2|E|F|X|G|@]|H|@]|6|$]]]]

It should be

<pre><code>&lt;Icon type="message" style={{ fontSize: '16px', color: '#08c' }} theme="outlined" /&gt;
</code></pre>

<a href="https://codepen.io/anon/pen/wNgrWX" rel="noreferrer">https://codepen.io/anon/pen/wNgrWX</a>

entityMap|blocks|key|6pi7q|text|在新的antd图标版本中，您可以像这样增加图标的大小：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|8fud1|import+{+MessageTwoTone+}+from+"@ant-design/icons";|code-block|syntax|javascript|7rekd|并将其称为：|ef980|++<div+style={{+fontSize:+"30px"+}}>
++++++++<MessageTwoTone+/>
++++++</div>|5haar|我尝试将其用作<MessageTwoTone>的属性，但attribute不再像上面答案中提到的旧版本那样工作。|offset|length|style|CODE|e6nuj|编辑：-我后来被告知，只有当图标从它的父级继承其字体大小时，上面的才能起作用。因此，我们应该将样式属性直接添加到图标中|2kpt0|+++++++++<MessageTwoTone+style={{+fontSize:+"30px"+}}/>|ufnj^0|0|0|0|0|7|G|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|W|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|X|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|Y|9|@]|A|@]|B|$]]|$2|J|4|K|6|E|8|Z|9|@]|A|@]|B|$F|G]]|$2|L|4|M|6|7|8|10|9|@$N|11|O|12|P|Q]]|A|@]|B|$]]|$2|R|4|S|6|7|8|13|9|@]|A|@]|B|$]]|$2|T|4|U|6|E|8|14|9|@]|A|@]|B|$F|G]]|$2|V|4|-4|6|7|8|15|9|@]|A|@]|B|$]]]]

In the new antd Icon version, you can increase the size of the icon like this:
<pre><code>import { MessageTwoTone } from &quot;@ant-design/icons&quot;;
</code></pre>
And call it as:
<pre><code> &lt;div style={{ fontSize: &quot;30px&quot; }}&gt;
 &lt;MessageTwoTone /&gt;
 &lt;/div&gt;
</code></pre>
I tried using it as an attribute of <code>&lt;MessageTwoTone&gt;</code> but attribute no longer works like in the old version mentioned in the answers above.
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
<pre><code> &lt;MessageTwoTone style={{ fontSize: &quot;30px&quot; }}/&gt;
</code></pre>

entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://codesandbox.io/s/x7r7k7j6xw|blocks|key|dti2u|text|使用<Icon+style={{+fontSize:+'30px'}}+type="check-circle"+/>|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|4qjft|下面是一个有效的代码：https://codesandbox.io/s/x7r7k7j6xw|37a4i^0|2|1K|0|B|Z|0|0^^$0|$1|$2|3|4|5|6|$7|8]]]|9|@$A|B|C|D|2|E|F|P|G|@$H|Q|I|R|J|K]]|L|@]|6|$]]|$A|M|C|N|2|E|F|S|G|@]|L|@$H|T|I|U|A|V]]|6|$]]|$A|O|C|-4|2|E|F|W|G|@]|L|@]|6|$]]]]

Use <code>&lt;Icon style={{ fontSize: '30px'}} type="check-circle" /&gt;</code>

Here is a working codepen:
<a href="https://codesandbox.io/s/x7r7k7j6xw" rel="nofollow noreferrer">https://codesandbox.io/s/x7r7k7j6xw</a>

entityMap|blocks|key|artgq|text|不知道这是不是只适合我，但到今天为止，公认的答案不起作用，我通过在图标组件中放入一个className，并针对该类的svg来使其起作用。下面是一个例子|type|unstyled|depth|inlineStyleRanges|entityRanges|data|9517r|component.js|9kiho|import+{+CheckCircleTwoTone+}+from+'@ant-design/icons';

++<CheckCircleTwoTone
++++++++++++++++++++twoToneColor="#52c41a"
++++++++++++++++++++className="reg_icon"
++++++++++++++++/>|code-block|syntax|javascript|1d7pv|component.scss|826u7|.reg_icon+{
++++svg+{
++++++++font-size:+120px+!important;
++++}
}|fp1ge^0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|O|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|P|9|@]|A|@]|B|$]]|$2|E|4|F|6|G|8|Q|9|@]|A|@]|B|$H|I]]|$2|J|4|K|6|7|8|R|9|@]|A|@]|B|$]]|$2|L|4|M|6|G|8|S|9|@]|A|@]|B|$H|I]]|$2|N|4|-4|6|7|8|T|9|@]|A|@]|B|$]]]]

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. here's an example
component.js
<pre><code>import { CheckCircleTwoTone } from '@ant-design/icons';

 &lt;CheckCircleTwoTone
 twoToneColor=&quot;#52c41a&quot;
 className=&quot;reg_icon&quot;
 /&gt;
</code></pre>
component.scss
<pre><code>.reg_icon {
 svg {
 font-size: 120px !important;
 }
}

</code></pre>

entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://codepen.io/raz-luvaton/pen/MWopmLW|blocks|key|2m1qi|text|如果像这样使用按钮内部的图标：|unstyled|depth|inlineStyleRanges|entityRanges|5t3rg|<Button+type="text"+icon={<GithubOutlined+/>}+/>|code-block|syntax|javascript|758op|您可以添加这些类/样式，它将为您解决问题(它为我解决了问题)|4f8fr|<Button+type="text"
++++++++className={styles.button}
++++++++icon={<GithubOutlined+className={styles.icon}/>}
/>|astjl|.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;
++}
}|1rhms|CodePen+Demo|offset|length|c5dp9^0|0|0|0|0|0|0|C|0|0^^$0|$1|$2|3|4|5|6|$7|8]]]|9|@$A|B|C|D|2|E|F|Y|G|@]|H|@]|6|$]]|$A|I|C|J|2|K|F|Z|G|@]|H|@]|6|$L|M]]|$A|N|C|O|2|E|F|10|G|@]|H|@]|6|$]]|$A|P|C|Q|2|K|F|11|G|@]|H|@]|6|$L|M]]|$A|R|C|S|2|K|F|12|G|@]|H|@]|6|$L|M]]|$A|T|C|U|2|E|F|13|G|@]|H|@$V|14|W|15|A|16]]|6|$]]|$A|X|C|-4|2|E|F|17|G|@]|H|@]|6|$]]]]

If using the icon inside the button like this:
<pre><code>&lt;Button type=&quot;text&quot; icon={&lt;GithubOutlined /&gt;} /&gt;
</code></pre>
You can add these classes/styles and it will solve the issue for you (it solved it for me)
<pre><code>&lt;Button type=&quot;text&quot;
 className={styles.button}
 icon={&lt;GithubOutlined className={styles.icon}/&gt;}
/&gt;
</code></pre>
<pre><code>.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;
 }
}
</code></pre>
<a href="https://codepen.io/raz-luvaton/pen/MWopmLW" rel="nofollow noreferrer">CodePen Demo</a>

entityMap|blocks|key|268p6|text|用javascript做这件事的最好方法|type|unstyled|depth|inlineStyleRanges|entityRanges|data|a2sgt|Icon.setTwoToneColor("#000");|code-block|syntax|javascript|2pn5n^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|I|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|J|9|@]|A|@]|B|$F|G]]|$2|H|4|-4|6|7|8|K|9|@]|A|@]|B|$]]]]

Best way to do it with javascript 

<pre><code>Icon.setTwoToneColor("#000");
</code></pre>

So when I'm using an Icon in Ant Design it is always 14 * 14 px.
Is there a way to set the size maual?
Things like
<pre><code>&lt;Icon width={&quot;20px&quot;} type=&quot;setting&quot; /&gt;
</code></pre>
or
<pre><code>&lt;Icon style={{width: '20em'}} type=&quot;setting&quot; /&gt;
</code></pre>
do not work

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

所以当我在Ant Design中使用图标时，它总是14 * 14像素。有没有办法设置最大尺寸？ 像这样的事情 <Icon width={"20px"} type="setting" /> 或者 <Icon style={{width: '20em'}} type="setting" /> 不工作

问如何在Ant Design中设置图标的大小？
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Ant Design中设置图标的大小？EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Ant Design中设置图标的大小？
EN