如何将SVG源码解析为React节点？

Question

我不是在问如何在React中嵌入SVG文件或图像。我需要一个如下类型签名的函数：

(source: string) => React.ReactNode

此函数解析SVG源字符串并返回React节点。我真的需要它，因为我正在处理Graphviz的输出。因为我想操作生成的React节点，所以dangerouslySetInnerHtml不能满足我的要求。

当然，我可以通过DOMParser将SVG源代码解析为SVGElement，然后将原生SVGElement节点转换为ReactElement。但这需要时间。我想知道以前有没有人做过这项工作？我搜索了整个互联网，但一无所获。

Answer 1

我不知道性能如何。但也有可能像https://github.com/egoist/svg-to-component或https://github.com/publitas/svg-to-react那样。