正文

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

 2023-03-07  186

关键词：

【中文标题】如何在 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

【讨论】：

在表格单元格中设置 SVG 图标的大小

】在表格单元格中设置SVG图标的大小【英文标题】：SettingthesizeofanSVGiconinatablecell【发布时间】：2014-07-1512:17:06【问题描述】：我想增加显示在PySide/Qt表格单元格内的SVG图标的大小icon=QtGui.QIcon(\'icon.svg\')entry=QtGui.QTableWidgetItem()entry... 查看详情

如何在 Xcode 中设置 Mac 应用程序的图标？

】如何在Xcode中设置Mac应用程序的图标？【英文标题】：HowcanIsettheiconforaMacApplicationinXcode?【发布时间】：2011-09-1407:58:42【问题描述】：我在InterfaceBuilder中学习了很多关于编写Objective-C代码和设计的知识，我想为我的简单程序设置... 查看详情

如何在 XCode 5 中设置应用程序图标？

】如何在XCode5中设置应用程序图标？【英文标题】：Howtosetapp-iconsinXCode5?【发布时间】：2014-03-0406:36:52【问题描述】：我正在使用XCode5。我正在正确设置所有应用程序图标的大小和分辨率。当我在iPhone模拟器中运行应用程序时，... 查看详情

如何在 Material Design Components for Web 中设置主色和辅助色？

】如何在MaterialDesignComponentsforWeb中设置主色和辅助色？【英文标题】：HowtosetprimaryandsecondarycolorsinMaterialDesignComponentsforWeb?【发布时间】：2019-02-2203:14:19【问题描述】：详情我研究了用于Web的MaterialComponents(MDC)并开始使用CDN（托管... 查看详情

如何在 iOS 的 xamarin.forms 应用程序中设置应用程序的应用程序图标

】如何在iOS的xamarin.forms应用程序中设置应用程序的应用程序图标【英文标题】：howtosetappiconofappinxamarin.formsappforIOS【发布时间】：2018-05-2910:40:31【问题描述】：我知道如何设置应用程序图标图像，我们将所有相应大小的图标图像... 查看详情

如何在标签而不是文本中设置图像/图标？

】如何在标签而不是文本中设置图像/图标？【英文标题】：HowtosetImage/IconinTabsinsteadofText?【发布时间】：2017-01-2203:40:00【问题描述】：我想在Tabs中设置图片/图标，代码如下：在我的应用程序中，我在底部设置了Tabs，现在我想在... 查看详情

在bottomTab配置react-native-navigation中设置图标大小

】在bottomTab配置react-native-navigation中设置图标大小【英文标题】：SeticonsizeinbottomTabconfigurationreact-native-navigation【发布时间】：2020-01-1503:03:22【问题描述】：我正在用reactnative开发一个应用程序，并使用react-native-navigation库来创建... 查看详情

如何在 wpf 后面的代码中设置窗口图标？

】如何在wpf后面的代码中设置窗口图标？【英文标题】：Howtosetwindowiconincodebehindinwpf?【发布时间】：2012-01-0511:00:41【问题描述】：在xaml中是：<View:BaseWindow.Icon>/VBDAdvertisement;component/Images/logoVBD.png</View:BaseWindow.Icon>我想把... 查看详情

如何在 Cordova 中设置图标？

】如何在Cordova中设置图标？【英文标题】：HowtoseticoninCordova?【发布时间】：2020-10-1004:42:27【问题描述】：我知道这个问题被问了很多，但在升级我的平台后，我仍然无法在我的ios和android应用中显示图标。cordova--version|9.0.0(cordova... 查看详情

如何在 NET DLL 中设置默认图标？

】如何在NETDLL中设置默认图标？【英文标题】：HowtosetdefaulticoninNETDLL?【发布时间】：2014-11-2506:24:53【问题描述】：我管理了一个VB.NETClassLibrary项目并将其编译为DLL。问题是，这个dll是一个Win32程序的插件，可以显示DLL的主图标。... 查看详情

如何在选择中设置菜单图标向下的语言之间的距离？

】如何在选择中设置菜单图标向下的语言之间的距离？【英文标题】：HowdoIsetthedistancebetweenthelanguagewiththemenuicondowninselect?【发布时间】：2020-04-1401:42:28【问题描述】：我的代码是这样的：<v-selectv-model="e1":items="states"menu-props="aut... 查看详情

如何在 dxSlideOut、Devextreme 中设置图标

】如何在dxSlideOut、Devextreme中设置图标【英文标题】：HowtoseticonindxSlideOut,Devextreme【发布时间】：2015-09-0618:43:43【问题描述】：我在Devextreme基础项目的某些部分使用了dxslideout.dxView<divdata-bind="dxSlideOut:dataSource:musteriNavItems">..<... 查看详情

如何在 Android 中设置 AlertDialog 的大小？ [复制]

】如何在Android中设置AlertDialog的大小？[复制]【英文标题】：HowcanisetthesizeofanAlertDialoginAndroid?[duplicate]【发布时间】：2013-08-1002:14:02【问题描述】：我正在android中开发一个应用程序，我想在其中缩小默认警报对话框的大小。如何... 查看详情

如何在 Express 中设置自定义图标？

】如何在Express中设置自定义图标？【英文标题】：HowtosetcustomfaviconinExpress?【发布时间】：2013-03-0523:38:43【问题描述】：我最近开始使用Node.js，在app.js文件中有这一行：app.use(express.favicon());现在，我该如何设置自己的自定义favico... 查看详情

如何在cmd中设置cmd windows图标-windows 7

】如何在cmd中设置cmdwindows图标-windows7【英文标题】：Howtosetcmdwindow\'siconincmd-windows7【发布时间】：2019-07-1221:41:53【问题描述】：如何使用.bat文件设置cmd窗口的图标（如果没有办法从设置或任何东西设置它对我有好处），但只有wi... 查看详情

如何在 TThread 中设置堆栈大小？

】如何在TThread中设置堆栈大小？【英文标题】：HowtosetstacksizeinTThread?【发布时间】：2014-07-3104:10:05【问题描述】：如何在TThread中设置自定义堆栈大小？我正在尝试重新引入TThread的构造函数，但它说ThreadProc丢失了，但它就在Syste... 查看详情

在 Avalonia 中设置窗口图标

...我正在为一个学校项目编写一个小应用程序，但我不知道如何更改窗口图标。我找到了Window的“图标”属性，但我不知道它是如何工作的，因为我几乎没有找到关于它的文档。当我尝试在该字段中输入内容时，它抛出了一个错误... 查看详情

在 vscode 中设置扩展的图标或徽标

...已经为vscode创建了一个扩展（尚未发布，仅本地安装），如何设置一个图标以在vscode的扩展部分中看到？【问题讨论】：【参考方案1】：您可以在扩展的package.json文件中设置图标，该文件也称为“扩展清单”。您在其中设置图... 查看详情