Accepting an SVG as a prop to a React component - reactjs

Question

I am working on a React component that needs to accept an SVG as a prop.
I have a default svg in case the prop is not provided, but if it is provided then the default svg can be replaced out with the one accepted from prop.
So the component is like.
<MySvg src={path to svg or the svg itself} height={20} width={20} fillColor={'red'} />
All that the component should do is display this SVG with the provided props. I expect the DOM to be something like this.
<svg fill={this.props.fillColor} height={this.props.height} width={this.props.width}>
<g>
<rect />
</g>
</svg>
Since each SVG is different, meaning it might have a polygon, rect, g, etc., what is the best way to achieve this?
2 things I am looking for?
Loading an svg from a path and applying the props (color, height, width)?
If src prop has the SVG itself, how do we display that and apply the props (color, height, width)
Update: I tried out one of the approach in the answers below, but it does not seem to work. Here is a link to a CodeSandbox I have in place - codesandbox.io/s/n0yzv9yyvp

Answer 1

I worked with SVG in react.js a lot, the best solution I found is to use embed svg:
<MySvg src={'/path/to/svg'} height={20} width={20} fillColor={'red'} />
And inside your component
<svg fill={this.props.fillColor} height={this.props.height} width={this.props.width}>
<g>
<image
x="10"
y="197"
width="159"
height="113"
xlinkHref={this.props.src}
/>
</g>
</svg>
x, y, width and height are usual parameters of the image svg tag, you can omit or rewrite them as you want

Answer 2

Your best bet will be to use data URIs.
Example:
<img src='data:image/svg+xml;utf8,<svg ... > ... </svg>'>
Read more here:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs

Answer 3

you can pass props to svg components just like any other components
for example
function App() {
return <Svg height={20} width={20} fill={black} />;
}
const Svg = ({ height, width, color }) => (
<svg
height={height}
width={width}
fill={color}
xmlns="http://www.w3.org/2000/svg"
></svg>
);