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

Question

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

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

我知道.svg文件是作为组件导入的，但是，我不知道ReactComponent是从哪里来的？我检查了.svg文件，其中没有提到它。在导入.svg文件时，这是一个特殊的关键字吗？如果有人能指点我的文档，那也会很好。

Answer 1

我想您使用的是。Create使用SVGR来转换.svg文件，这样您就可以将它们导入到您的React中。svg文件的转换方式是导出一个名为"ReactComponent“的反应性组件。这就是为什么您必须从文件中导入"ReactComponent“，然后将其重命名为您想要的任何名称！

在这个很不错的博客文章中可以找到更多信息。基本上，您可以在您的JSX中使用<svg>标记。但是，如果您想要导入.svg文件，则需要一个转换器将文件的内容转换为React组件，该组件只返回JSX中的<svg>内容。