什么是 ReactComponent？在 React 中导入 svg 时它从何而来？

Question

我正在遵循一个教程，其中一个 .svg 文件正在作为组件导入。该行代码是：

import {ReactComponent as OfferIcon} from '../assets/svg/localOfferIcon.svg';。

我知道 .svg 文件正在作为组件导入，但是，我不明白 ReactComponent 来自哪里？我检查了 .svg 文件，其中没有提到它。这是导入 .svg 文件时的特殊关键字吗？如果有人可以向我指出该文档，那就太好了。

Answer 1

我假设您正在使用 Create React App。Create React App 使用SVGR来转换.svg文件，因此您只需将它们导入到 React 应用程序中即可。svg 文件以导出名为“ReactComponent”的 React 组件的方式进行转换。这就是为什么您必须从文件中导入“ReactComponent”，然后将其重命名为您想要的任何名称！

在这篇非常好的博客文章中查找更多信息。基本上，您可以<svg>在 JSX 中使用标签。但是，如果要导入.svg文件，则需要一个转换器，将文件的内容转换为 React 组件，该组件仅返回<svg>JSX 中的内容。