SvgIcon inheriting viewBox - css

Question

I have different custom SVGs. Each one of this SVG has an own viewBox.
First Svg
<svg viewBox="-4 -4 24 24"><path something/></svg>
Second Svg
<svg viewBox="-5 -7 24 24"><path something/></svg>
Third Svg
<svg viewBox="-2 -1 24 24"><path something/></svg>
And so on...
I am using the Material UI component: SvgIcon.
<SvgIcon
component={component} // This is my custom SVG
/>
The SvgIcon has a default view of '0 0 24 24' and it is what is "set" for every SVG. I want it to inherit from the component.
I know I can defined a property such as:
<SvgIcon
component={component}
viewBox="my values" // Example "0 0 20 20"
/>
but the viewBox varies across different SVGs

Answer 1

One solution I've found is to provide the same matching viewBox from your original svg file to MUI's SvgIcon component. Otherwise, MUI's SvgIcon will use their default of 0 0 24 24 (defined here) which might not match the one from your svg.
Example:
The original svg might look like this, defining its own viewBox:
<svg width="12" height="12" viewBox="0 0 12 12">
<path d="..."/>
</svg>
Use your custom svg file with MUI's SvgIcon:
import MyCustomIcon from '../assets/MyCustomIcon.svg';
// ...
<SvgIcon
component={MyCustomIcon}
viewBox="0 0 12 12"
/>
You can see that the viewBox used in the SvgIcon matches the one from the original svg file.
I hope this helps.