在反应项目中导入 svg

Question

I learned svg animation in Gsap in React. So I tryed import that in my project in this method:

import React, {useRef, useEffect} from 'react'
import './App.css';
import { ReactComponent as Scene } from './undraw_Share_opinion_re_4qk7.svg'
import gsap from 'gsap'

function App() {
  const wrapper = useRef(null);



  useEffect(() => {
    const [elements]  = wrapper.current.children;
    const character = elements.getElementById('character');

    gsap.set([character], {autoAlpha: 0})
  })
  return (
    <div className="App" ref={wrapper}>
      <Scene />
    </div>
  );
}

export default App;

And I have this error:

./src/undraw_Share_opinion_re_4qk7.svg (./node_modules/@svgr/webpack/lib?-svgo,+titleProp,+ref!./src/undraw_Share_opinion_re_4qk7.svg)
SyntaxError: unknown: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set `throwIfNamespace: false` to bypass this warning.
   6 |   ...props
   7 | }, svgRef) {
  8 |   return <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" id="b34823bb-54c5-4248-96df-16f3b0e34aaf" data-name="Layer 1" width={965.9983} height={727.77798} viewBox="0 0 965.9983 727.77798" sodipodi:docname="undraw_Share_opinion_re_4qk7.svg" inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)" ref={svgRef} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<metadata id="metadata1113"><rdf:RDF><cc:Work rdf:about=""><dc:format>{"image/svg+xml"}</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title /></cc:Work></rdf:RDF></metadata><defs id="defs1111" /><sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity={1} objecttolerance={10} gridtolerance={10} guidetolerance={10} inkscape:pageopacity={0} inkscape:pageshadow={2} inkscape:window-width={1848} inkscape:window-height={1016} id="namedview1109" showgrid="false" inkscape:zoom={1} inkscape:cx={336.55308} inkscape:cy={181.96839} inkscape:window-x={72} inkscape:window-y={27} inkscape:window-maximized={1} inkscape:current-layer="b34823bb-54c5-4248-96df-16f3b0e34aaf" /><path d="M843.99644,259.05824h-3.99878V149.51291a63.40188,63.40188,0,0,0-63.4018-63.4019H544.50913a63.40183,63.40183,0,0,0-63.402,63.40171V750.48713A63.40181,63.40181,0,0,0,544.509,813.889H776.59556a63.40185,63.40185,0,0,0,63.402-63.40167V337.0345h3.99884Z" transform="translate(-117.00085 -86.11101)" fill="#3f3d56" id="path1044" /><path d="m 655.15306,12.49499 h -30.295 A 22.49487,22.49487 0 0 1 604.03091,43.48552 H 471.07146 A 22.4948,22.4948 0 0 1 450.24431,12.49499 h -28.2956 a 47.34782,47.34782 0 0 0 -47.34784,47.34774 v 600.09254 a 47.34781,47.34781 0 0 0 47.34778,47.34784 h 233.20441 a 47.34781,47.34781 0 0 0 47.34784,-47.34778 v 0 V 59.84271 A 47.34778,47.34778 0 0 0 655.15306,12.49499 Z" id="path1046" inkscape:connector-curvature={0} style={{
     |               ^^^^^^^^
   9 |       fill: "#ffffff"
  10 |     }} /><ellipse cx={593.85804} cy={272.70788} rx={42} ry={4} fill="#e6e6e6" id="ellipse1048" /><polygon points="965.998 99.868 579.346 99.868 579.346 226.799 593.992 226.799 593.992 259.997 627.189 226.799 965.998 226.799 965.998 99.868" fill="#6c63ff" id="polygon1050" /><rect x={622.38123} y={142.85169} width={175.8208} height={5.33572} fill="#fff" id="rect1052" /><rect x={622.38123} y={161.30963} width={306.4409} height={5.33572} fill="#fff" id="rect1054" /><rect x={622.38123} y={179.76757} width={306.14082} height={5.33572} fill="#fff" id="rect1056" /><polygon points="558.58,482.708 558.58,584.029 570.271,584.029 570.271,610.528 596.77,584.029 867.219,584.029 867.219,482.708 " id="polygon1058" transform="translate(-9,2)" style={{
  11 |       fill: "#6c63ff"

How can I solve my problem?

Answer 1

I would write like this.

import React, {useRef, useEffect} from 'react'
import './App.css';
import Img from './undraw_Share_opinion_re_4qk7.svg'
import gsap from 'gsap'

function App() {
  const wrapper = useRef(null);



  useEffect(() => {
    const [elements]  = wrapper.current.children;
    const character = elements.getElementById('character');

    gsap.set([character], {autoAlpha: 0})
  })
  return (
    <div className="App" ref={wrapper}>
      <img src={img} />
    </div>
  );
}

export default App;