How do I use a SVG in React?-CodePudding

I'm using a Typescript app I created with create-react-app, with no other dependencies other than react and react-dom.

Using the tag, how do I display an SVG?

I've checked that I have the right path because an adjacent PNG will render. Are SVGs different?

<img src={'../assets/triangle.svg'} alt=''/>

CodePudding user response：

I always like to import the SVG in the top of the file, like this:

import FileSVG from "./file.svg";

and then use it as value for the src prop, like this:

<img src={FileSVG} />

Make sure to check if your path it is correct too!

CodePudding user response：

do not use direct path link in src...import it instead and later use that reference in src.

for example
import mySvg from "../asssets/triangle.svg"

then:
<img src={mySvg} alt=""/>