File exported from SVGator fails to compile in React

Question

This is my first time posting a question. Please be cool if I don't know all the etiquette.. I am working with an SVG animation that I built-in SVGator. I am loading it into my react app as a loading page.

The SVG file itself displays fine in the browser, but when I load it into my React app, I am getting the error:

Failed to compile.

./src/assets/Loadingpage.svg (./node_modules/@svgr/webpack/lib?-svgo,+titleProp,+ref!./src/assets/Loadingpage.svg)

Error: Expected node, got `#eba7ha49d1l68_to {animation: eba7ha49d1l68_to__to 3000ms linear infinite normal forwards}@keyframes eba7ha49d1l68_to__to { 0% {transform: translate(0px,0px);animation-timing-function: cubic-bezier(0.420000,0,1,1)} 16.666667% {transform: translate(0px,-50px)} 33.333333% {transform: translate(0px,-100px)} 100% {transform: translate(0px,-100px)} }#eba7ha49d1l68 {animation: eba7ha49d1l68_c_o 3000ms linear infinite normal forwards}@keyframes eba7ha49d1l68_c_o { 0% {opacity: 0;animation-timing-function: cubic-bezier(0.420000,0,1,1)} 23.333333% {opacity: 1} 33.333333% {opacity: 0} 100% {opacity: 0} }#eba7ha49d1l69_to {animation: eba7ha49d1l69_to__to 3000ms linear infinite normal forwards}@keyframes eba7ha49d1l69_to__to { 0% {transform: translate(0px,0px)} 40% {transform: translate(0px,0px);animation-timing-function: cubic-bezier(0.420000,0,1,1)} 56.666667% {transform: translate(0px,-50.003000px)} 73.333333% {transform: translate(0px,-100.003000px)} 100% {transform: translate(0px,-100.003000px)} }#eba7ha49d1l69 {animation: eba7ha49d1l69_c_o 3000ms linear infinite normal forwards}@keyframes eba7ha49d1l69_c_o { 0% {opacity: 0} 40% {opacity: 0;animation-timing-function: cubic-bezier(0.420000,0,1,1)} 63.333333% {opacity: 1} 73.333333% {opacity: 0} 100% {opacity: 0} }`

That points me to this CDATA that is at the top of the file:

    <style>
      <![CDATA[#eba7ha49d1l68_to {
        animation: eba7ha49d1l68_to__to 3000ms linear infinite normal forwards
      }
      
      @keyframes eba7ha49d1l68_to__to {
        0% {
          transform: translate(0px, 0px);
          animation-timing-function: cubic-bezier(0.420000, 0, 1, 1)
        }
        16.666667% {
          transform: translate(0px, -50px)
        }
        33.333333% {
          transform: translate(0px, -100px)
        }
        100% {
          transform: translate(0px, -100px)
        }
      }
      
      #eba7ha49d1l68 {
        animation: eba7ha49d1l68_c_o 3000ms linear infinite normal forwards
      }
      
      @keyframes eba7ha49d1l68_c_o {
        0% {
          opacity: 0;
          animation-timing-function: cubic-bezier(0.420000, 0, 1, 1)
        }
        23.333333% {
          opacity: 1
        }
        33.333333% {
          opacity: 0
        }
        100% {
          opacity: 0
        }
      }
      
      #eba7ha49d1l69_to {
        animation: eba7ha49d1l69_to__to 3000ms linear infinite normal forwards
      }
      
      @keyframes eba7ha49d1l69_to__to {
        0% {
          transform: translate(0px, 0px)
        }
        40% {
          transform: translate(0px, 0px);
          animation-timing-function: cubic-bezier(0.420000, 0, 1, 1)
        }
        56.666667% {
          transform: translate(0px, -50.003000px)
        }
        73.333333% {
          transform: translate(0px, -100.003000px)
        }
        100% {
          transform: translate(0px, -100.003000px)
        }
      }
      
      #eba7ha49d1l69 {
        animation: eba7ha49d1l69_c_o 3000ms linear infinite normal forwards
      }
      
      @keyframes eba7ha49d1l69_c_o {
        0% {
          opacity: 0
        }
        40% {
          opacity: 0;
          animation-timing-function: cubic-bezier(0.420000, 0, 1, 1)
        }
        63.333333% {
          opacity: 1
        }
        73.333333% {
          opacity: 0
        }
        100% {
          opacity: 0
        }
      }
      
      ]]>
    </style>

When I comment that out, it seems to fix the rest of the <rect> and <path> tags in my entire document, and my app will compile fine. When I hit the SVG as a loading page in my app, it displays fine, but the animation is not working.

I'm pretty new to working with SVGs and CDATA is 100% new to me. Any help would be greatly appreciated. Thank you!

EDIT: I'm still not sure why, but removing the wrapping <![CDATA...]]> tags and keeping the CSS styles fixed my problem.

Answer 1

I'm new too but I found a simple solution, I hope that works for you, this still works for me.

1. Download the SVG file: "svgator":

2. Put the SVG file in your React app where you most desire, in my case is in assets folder:

3. Import the SVG file in your component, in my case is in App.js file:

4. My "App.js" file, is declared as a Class Component, at the return statement after the render method, you can put the "object" tag, taking as a data parameter the SVG component:

return (
  <div className={styles.App}>
    <object data={Test} />
  </div>
)

You don't need to remove anything from anywhere in this case, simple but hope this can work for you.