title: React SVG component as background-image to div
body: <p>I am trying to get styled-components to take an SVG that is a react component and set it as a background-image but I get the error: </p>
  
  <blockquote>
    <p>TypeError: Cannot convert a Symbol value to a string</p>
  </blockquote>
  
  <p>SVG component code:</p>
  
  <pre><code>import React from "react";
  
  const testSVG = props =&gt; {
    return (
      &lt;svg version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 193.3 129.7"&gt;
        &lt;g&gt;
          &lt;g&gt;
            &lt;g&gt;
              &lt;path
                fill="#434343"
                class="st0"
                d="M162.4,116c-4.6,7.5-15.6,13.6-24.4,13.6H16c-8.8,0-12.3-6.2-7.7-13.7c0,0,4.6-7.7,11.1-18.4
                  c4.4-7.4,8.9-14.7,13.3-22.1c1.1-1.8,6.1-7.7,6.1-10.1c0-7.3-15-24.9-18.5-30.7C13.5,23.6,8.3,14.9,8.3,14.9
                  C3.7,7.4,7.2,1.2,16,1.2c0,0,65.9,0,106.8,0c10,0,25.9-4.5,33.5,3.8c8.7,9.3,15.5,25.4,22.5,36.8c2.6,4.2,14.5,18.3,14.5,23.8
                  c-0.1,7.6-16,26.1-19.6,32C167.1,108.3,162.4,116,162.4,116z"
              /&gt;
            &lt;/g&gt;
          &lt;/g&gt;
        &lt;/g&gt;
      &lt;/svg&gt;
    );
  };
  
  export default testSVG;
  </code></pre>
  
  <p>Container component code:</p>
  
  <pre><code>import React, { Component } from "react";
  import StepSVG from "../../components/UI/SVGs/Test";
  
  class StepBar extends Component {
    render() {
      const { steps } = this.props;
  
      return (
        &lt;div&gt;
          {steps
            ? steps.map(step =&gt; {
                return (
                  &lt;Wrap key={step._id} bg={StepSVG}&gt;
                    &lt;P&gt;
                      {" "}
                      &lt;Link to={"/step/" + step._id}&gt;{step.title} &lt;/Link&gt;
                    &lt;/P&gt;
                  &lt;/Wrap&gt;
                );
              })
            : null}
        &lt;/div&gt;
      );
    }
  }
  
  export default StepBar;
  
  const Wrap = styled.div`
    padding: 30px 30px 0 0;
    display: inline-block;
    background-image: url(${props =&gt; props.bg});
  `;
  </code></pre>
  
  <p>I am using create-react-app out of the box.</p>
  
  <p>I also tried without using styled components and used inline styles in place to no success.</p>
  
  <p>Is it possible to use an SVG as a background-image in this context with the SVG being a component?</p>