将 SVG 图像添加到 React 项目的简单方法

Question

我正在使用文件加载器，可以很好地加载 png。 我正在import myImage from "../../path/image.svg"然后<img src={myImage}/> 。 当我使用开发人员工具并单击我尝试包含的 SVG 时，我收到一个页面，其中包含如下消息：

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

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

有没有人以前见过这个错误，如果有的话可以做些什么？

Answer 1

如果您查看文件加载器文档，则没有提到能够加载 svg 文件。

您需要使用专门的装载机。 这是一个 svg 加载器的 webpack文档，但还有很多其他的。

Answer 2

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