title: How to use a SVG React component as background?
body: <p>I have SVG files written in Function Components. </p>
  
  <pre><code>import React from "react";
  
  const MySVGBackground= (props) =&gt; {
    return (
      &lt;svg&gt; some svg here&lt;/svg&gt;
    );
  };
  
  export default MySVGBackground;
  </code></pre>
  
  <p>I need to render this as a background:</p>
  
  <pre><code>&lt;div style={{ backgroundImage: `url(${MySVGBackground})` }}&gt; &lt;/div&gt;
  </code></pre>
  
  <p>but it's not working.</p>
  
  <p>I can't purely import the SVG directly, because it gives me an error of Unexpected Token. So I have to wrap the SVG into the FC and export it.</p>
  
  <p>Here is the sample code:
  <a href="https://codesandbox.io/s/react-background-issue-9wt4x?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/react-background-issue-9wt4x?file=/src/App.js</a></p>