使用 svg 作为反应组件答案

【问题标题】：using svg as react component使用 svg 作为反应组件
【发布时间】：2020-10-10 06:24:57
【问题描述】：

我正在尝试将 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">
<

如果有人可以帮助我，我将非常感激。 codeandbox 中的代码示例：https://codesandbox.io/s/svg-in-react-r3g6l?file=/index.js

【问题讨论】：

您需要在问题本身中包含代码。

标签： javascript reactjs svg

【解决方案1】：

这是我通常做的：

访问https://react-svgr.com/playground/ 并粘贴到您的 SVG 中，它会将 SVG 转换为 React 组件。它允许您将 SVG 属性作为道具传递。

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

【讨论】：

【解决方案2】：

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

查看这篇文章了解更多选项： using-svg-icons-components-in-react

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

fill: red;

【讨论】：

谢谢你的解释，目前我使用的是反应样板而不是创建反应应用程序

【解决方案3】：

你应该使用 img 标签

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

【讨论】：

感谢您的回复，请问如何更改 svg 的颜色？
我看到在沙箱上你有 react 和 react-dom 版本 16.0.0。您是否尝试过更新到 16.4 或更高版本？