使用SVGR动态创建SVG React组件

Question

我在React应用程序中使用SVGR将SVG转换为React组件。效果很好。

但是，我还想研究动态加载用户传递的SVG的机会。因此，我将获得一个包含SVG代码的字符串，并希望获得一个React组件作为回报。

看看SVGR指南，看来我可以使用Node api（https://www.smooth-code.com/open-source/svgr/docs/node-api/）将其转换为jsCode。但是，我当然不想eval。

是否有一种具有SVGR功能但以字符串作为输入的方法？

Answer 1

首先需要将字符串转换为XML，以便可以将其传递给SVGR。

因此从here开始-您可以使用sax-js之类的东西将SVG字符串转换为SVG XML。

总结-

1. 将字符串转换为XML

2. 将XML传递给SVGR Node API以在运行时转换为JSX。

希望这会有所帮助。