将 SVG 文件解析为 React 组件答案

【问题标题】：Parse SVG file to React component将 SVG 文件解析为 React 组件
【发布时间】：2020-06-12 18:58:45
【问题描述】：

我有一个 SVG 文件：check.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.3 28.3"><path d="M25.2 3.638l-1.6 1.6c-4.3 4.3-8.9 9.2-13.2 13.6l-5.9-4.9-1.7-1.4-2.8 3.3 1.7 1.4 7.5 6.2 1.6 1.3 1.4-1.4c4.8-4.8 9.9-10.4 14.6-15l1.6-1.6-3.2-3.1z"/></svg>

我想要一个 React 组件；但我不想要任何包装标签，只是

<svg>
    <path […]/>
</svg>

我知道我可以做类似的事情

const renderSvg = svg => React.createElement('svg', {
  dangerouslySetInnerHTML: { __html: svg }
});

甚至更简单

const RenderSvg = (svg) => <svg dangerouslySetInnerHTML={{ __html: svg }} />;

但我最终会得到：

<svg>
  <svg>
    <path […]/>
  </svg>
</svg>

有人知道如何在不使用外部库的情况下实现这一目标吗？

【问题讨论】：

如果您需要包装一些东西，但又不想在 DOM 中添加任何额外元素，您可能需要查看 Fragements。
只要有一个功能组件就可以正常工作，例如codesandbox.io/s/vibrant-hopper-7k8q3
@Ma'mounothman 不，您正在编写的是 jsx，而不是 HTML，因此已经是一个反应组件。我的 svg 是 HTML
@DBS，由于同样的原因，片段不会有帮助
不确定你想要什么，但如果你不想有重复的svg标签，你可以只将path标签传递给你的函数。

标签： javascript reactjs svg

【解决方案1】：

将您的 SVG 放在一个单独的文件中，而不是将 import 作为一个组件，如下所示：

import {ReactComponent as Circle} from "./circle.svg"

以下是演示sandbox

【讨论】：

这绝对是对的，但是……你如何在 webpack 中使用这种语法？
@Nikita：我不太明白你的担心。 webpack 不是用来在我指的沙箱中交付应用程序的内容吗？
是的，它可以工作；但是为 webpack 找到合适的加载器非常困难
无论如何，这是一个不同的问题，我会将此作为正确答案进行检查，如果您有进一步的建议，我们将不胜感激
感谢您的回答。至于您进一步的担忧，我想 create-react-app 使用的 the one 或 this one（就在我的脑海中）可能会完美地解决这个问题。