SvgIcon继承viewBox

Question

我有不同的定制SVG。每个SVG都有自己的viewBox。

第一Svg

<svg viewBox="-4 -4 24 24"><path something/></svg>

第二次Svg

<svg viewBox="-5 -7 24 24"><path something/></svg>

第三代Svg

<svg viewBox="-2 -1 24 24"><path something/></svg>

等等..。

我正在使用Material组件：SvgIcon。

<SvgIcon
  component={component} // This is my custom SVG
/>

SvgIcon有一个默认的'0 0 24 24'视图，它是每个SVG的“设置”。我希望它从component继承。

我知道我可以定义一个属性，例如：

<SvgIcon
  component={component}
  viewBox="my values" // Example "0 0 20 20"
/>

但是viewBox因不同的SVGs而异。

Answer 1

我发现的一个解决方案是从原始svg文件向MUI的viewBox组件提供相同的匹配SvgIcon。否则，MUI的SvgIcon将使用它们的默认0 0 24 24 (定义这里)，这可能与您的svg中的这里不匹配。

示例：

最初的svg可能如下所示，定义了它自己的viewBox：

<svg width="12" height="12" viewBox="0 0 12 12">
    <path d="..."/>
</svg>

在MUI的SvgIcon中使用您的自定义svg文件

import MyCustomIcon from '../assets/MyCustomIcon.svg';

// ...

<SvgIcon
  component={MyCustomIcon}
  viewBox="0 0 12 12"
/>

您可以看到，在viewBox中使用的SvgIcon与原始svg文件中的那个匹配。

我希望这能帮到你。