Simple way to add SVG images into a React project

Question

I'm using file loader and can load pngs just fine. I'm doing import myImage from "../../path/image.svg" and then <img src={myImage}/> . When I use the developer tools and click on the SVG I'm trying to include, I get a page with a message like:

"Error on line 1 at column 1: Document is empty 

Below is a rendering of the page up to the first error."

Has anyone seen this error before and if so what can be done about it?

Answer 1

If you look at the file loader docs there is no mention of being able to load svg files.

You need to use a specialised loader. Here are webpack docs for one svg loader but there are plenty of others.

Answer 2

我发现了@svgr/webpack ，有了它，您可以像模块一样导入SVG ，然后将它们用作组件。