title: Accepting an SVG as a prop to a React component
body: <p>I am working on a React component that needs to accept an SVG as a prop.</p>
  
  <p>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.</p>
  
  <p>So the component is like.</p>
  
  <pre><code>&lt;MySvg src={path to svg or the svg itself} height={20} width={20} fillColor={'red'} /&gt;
  </code></pre>
  
  <p>All that the component should do is display this SVG with the provided props. I expect the DOM to be something like this.</p>
  
  <pre><code>&lt;svg fill={this.props.fillColor} height={this.props.height} width={this.props.width}&gt;
      &lt;g&gt;
          &lt;rect /&gt;
      &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Since each SVG is different, meaning it might have a polygon, rect, g, etc., what is the best way to achieve this?</p>
  
  <p>2 things I am looking for?</p>
  
  <ol>
  <li>Loading an svg from a path and applying the props (color, height, width)?</li>
  <li>If src prop has the SVG itself, how do we display that and apply the props (color, height, width)</li>
  </ol>
  
  <p><strong>Update:</strong> 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 - <a href="https://codesandbox.io/s/n0yzv9yyvp" rel="nofollow noreferrer">codesandbox.io/s/n0yzv9yyvp</a></p>