如何在React中调整Google Material Icons的大小?

我正在尝试在我的React应用程序中使用Google Material Icons,但在调整它们大小时遇到​​了麻烦。我正在使用@material-ui/icons将它们作为React组件导入。

<Pie radius={100} innerRadius={80} series={[40,0.5,30,20,10,0]} colors={['red','white','green','orange','blue','red']} backgroundColor="white" strokeCap="round" />

这些是我的样式,旨在替代默认的import { ArrowForward as IconArrowRight } from '@material-ui/icons';样式:

SvgIcon

由于某种原因,我想删除的SVG和路径之间有一个空格,但我不知道为什么它首先存在。如何删除该空间?

如何在React中调整Google Material Icons的大小?

sunyirui 回答:如何在React中调整Google Material Icons的大小?

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

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

,

在检查了实际的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"/>)。

我想这是使图标保持一致的一种尝试,但是如果您没有填充正方形,具有讽刺意味的是,这会使图标的设置更加麻烦。

本文链接:https://www.f2er.com/3165137.html

大家都在问