Javascript 使用svg作为react组件

我正在尝试将SVG与react一起使用，但我不能。我尝试了一些解决方案，结果我没有找到出现此错误的原因：

InvalidCharacterError
Failed to execute 'createElement' on 'Document': The tag name provided ('<svg>
<g transform="translate(0.000000,227.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<

InvalidCharacterError
未能对“文档”执行“createElement”：提供的标记名为（'
<

如果有人能帮助我，我将非常感激。

---

codesandbox中的代码示例：

您应该使用img标记

import Logo from "./Logo.svg
<img src={Logo} alt="Logo" />

从“/Logo.svg”导入徽标

“作为新版本create react app（v2）新增功能的一部分，我们现在可以将SVG作为react组件导入。”

查看本文了解更多选项：

*编辑：要更改svg的颜色，请使用CSS中的“填充”属性。您可以在svg中添加id或类来选择它

fill: red;

---

这是我通常做的：

访问并粘贴到SVG中，它将SVG转换为React组件。它允许您将SVG属性作为道具传递

---

您可以查看它的原始库-用于其他用途。

谢谢您的回复，那么您如何更改svg的颜色？我看到在沙盒上您有react和react dom版本16.0.0。您是否尝试过更新到16.4或更高版本？感谢您的解释，目前我使用的是react样板文件而不是创建react应用程序d将代码包含在问题本身中。