CODEWITHSUNDEEP
reactjsjsx
Josh Silveous
Josh Silveous

Reputation: 763

How do I use a SVG in React?

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

Upvotes: 0

Views: 83

Answers (2)

Pedro Borges Jr
Pedro Borges Jr

Reputation: 107

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!

Upvotes: 1

buzz
buzz

Reputation: 1106

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

Upvotes: 1

Related Questions