如何在 React 中调整 Google Material 图标的大小？答案

【问题标题】：How can I size Google Material Icons in React?如何在 React 中调整 Google Material 图标的大小？
【发布时间】：2020-03-01 00:30:47
【问题描述】：

我正在尝试在我的 React 应用程序中使用 Google Material Icons，但无法调整它们的大小。我正在使用 @material-ui/icons 将它们作为 React 组件导入。

import { ArrowForward as IconArrowRight } from '@material-ui/icons';

这些是我的样式，旨在覆盖默认的SvgIcon 样式：

svg {
  display: inline-block;
  width: auto;
  height: 40px;
}

出于某种原因，我的 SVG 和路径之间有一个空格，我想删除它，但我不知道它为什么会存在。如何删除这个空间？

【问题讨论】：

标签： reactjs svg import google-material-icons

【解决方案1】：

您应该使用Icon。有关演示用法，请参阅here。这些属性也适用于从@material-ui/icons 导入的图标。

您可以将它与fontSize 一起使用，或者通过修改样式/类来使用。因此你应该看看Icon的实现。

【讨论】：

我没有意识到这个库是多么的固执己见。我不想介绍带有样式等的<Icon/> 或<SvgIcon/> 组件。我真的只想要 SVG 本身，所以我决定简化我的方法，只需单独下载 SVG 并像往常一样导入它们。不过感谢您的提示。

【解决方案2】：

在检查了实际的 SVG 之后，我了解到额外的空间是存在的，因为 SVG 中都有相同的方形路径。调整 SVG 的大小将调整方形路径的大小，而不一定是其中的形状（在我的例子中是 X）。

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
  <path d="M0 0h24v24H0z" fill="none"/>
</svg>

该正方形没有填充，因此您看不到它，但它就在那里 (<path d="M0 0h24v24H0z" fill="none"/>)。

我想这是为了让图标保持一致，但如果你没有填充正方形，讽刺的是，它会使你的图标大小变得更加麻烦。

【讨论】：