title: Render React SVG component as backgroundImage
body: <p>I am trying to render a React Component that returns an <code>&lt;svg&gt;</code> as a <code>backgroundImage</code> of a <code>&lt;div&gt;</code>.
  Currently I am using <code>ReactDOMServer</code> with <code>renderToStaticMarkup</code> or <code>renderToString</code> but nothing shows up:</p>
  
  <pre><code>const SvgComponent = () =&gt; {
      return (
          &lt;svg xmlns='http://www.w3.org/2000/svg'&gt;&lt;rect fill='red' x='0' y='0' /&gt;&lt;/svg&gt;
      )
  }
  
  const ParentComponent = () =&gt; {
      return (
          &lt;div
              className={classes.banner}
              style={{
                  backgroundImage: `url("data:image/svg+xml;utf8, ${ReactDOMServer.renderToStaticMarkup(&lt;SvgComponent /&gt;)} ")`
              }}
          &gt;
          &lt;/div&gt;
      )
  }
  </code></pre>
  
  <p>Would the package <a href="https://www.npmjs.com/package/jsx-to-string" rel="nofollow noreferrer">jsx-to-string</a> the way to do it?</p>