How to import SVGs in React?

Question

I am trying to import an SVG in React:

import promo from "../../promo.svg";

But I am getting the following error:

Cannot find module '../../promo.svg' or its corresponding type declarations.

Note: I am using typescript.

Answer 1

Can you try something like import { PromoSvg } from "../../promo.svg"; and then as <PromoSvg />

OR

import { ReactComponent as PromoSvg } from "../../promo.svg"; (from here)

Answer 2

Simply added this to your types.d.ts file in your src directory:

declare module '*.[format]'

Replace [format] with whatever image format you are using; in my case, it was svg.

My thanks goes out to @tsamridh86