如何在 React 中使用 SVG？

Question

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=''/>

Answer 1

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=""/>

Answer 2

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!