React SVG component as background-image to div

Question

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:

TypeError: Cannot convert a Symbol value to a string

SVG component code:

import React from "react";  const testSVG = props => {   return (     <svg version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 193.3 129.7">       <g>         <g>           <g>             <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"             />           </g>         </g>       </g>     </svg>   ); };  export default testSVG; 

Container component code:

import React, { Component } from "react"; import StepSVG from "../../components/UI/SVGs/Test";  class StepBar extends Component {   render() {     const { steps } = this.props;      return (       <div>         {steps           ? steps.map(step => {               return (                 <Wrap key={step._id} bg={StepSVG}>                   <P>                     {" "}                     <Link to={"/step/" + step._id}>{step.title} </Link>                   </P>                 </Wrap>               );             })           : null}       </div>     );   } }  export default StepBar;  const Wrap = styled.div`   padding: 30px 30px 0 0;   display: inline-block;   background-image: url(${props => props.bg}); `; 

I am using create-react-app out of the box.

I also tried without using styled components and used inline styles in place to no success.

Is it possible to use an SVG as a background-image in this context with the SVG being a component?

Answer 1

For React SVG background images, I find this works best:

// MyComponent.js  import mySvg from './mySvg.svg';  ...  function MyComponent() {   return (     <div        className="someClassName"        style={{ backgroundImage: `url(${mySvg})` }}     >   ... etc 

The path to the SVG file will change when webpack bundles, so by using the template string you can keep things linked up.

In the CSS class you can do whatever styling you like.