如何将 SVG 图标字符串转换为 WordPress 中的 React 组件？

Question

我正在开发一个 WordPress 项目，允许用户从一组中选择 SVG 图标。选择图标后，其 SVG 标记将作为字符串存储在 Redux 存储中。

我需要将这个存储的 SVG 字符串渲染为页面上的 React 组件。如何将 SVG 字符串转换回 React 组件以显示所选图标？

这是我到目前为止所拥有的：

将 SVG 存储为字符串：SVG 标记存储在 Redux 存储中。 渲染 SVG：我需要一种方法将此 SVG 字符串转换回 React 组件，以便我可以正确显示它。 在 React 环境中实现这一目标的最佳方法是什么？

选定的 SVG 图标作为字符串存储在 Redux 存储中。我已经成功地将这个 SVG 字符串转换为对象，但现在我需要将其转换为 React 组件以显示在页面上。

我尝试过使用

React.createElement

来渲染 SVG，但我正在寻找替代方法。还有哪些其他方法可以将 SVG 字符串或对象转换为 React 组件？

// in state it will store the string of icons like 
{"type":"svg","key":null,"ref":null,"props":{"xmlns":"http://www.w3.org/2000/svg","width":"1em","height":"1em","viewBox":"0 0 24 24","children":{"type":"path","key":null,"ref":null,"props":{"fill":"currentColor","d":"M1 19V5h2v14zm3 0V5h2v14zm3 0V5h1v14zm3 0V5h2v14zm3 0V5h3v14zm4 0V5h1v14zm3 0V5h3v14z"},"_owner":null}},"_owner":null}

以下是简单的测试代码

import {useState} from '@wordpress/element';
 const [selectedIcon, setSelectedIcon] = useState();

<Button onClick={() => setIsOpenModal(true)}>icons</Button>

现在我想渲染 SVG 图标，而不是按钮中的图标。

提醒：我有一堆图标并动态获取它们。

Answer 1

要在React中渲染SVG字符串，请使用react-svg库。添加库： npm 安装react-svg

如何使用ReactSVG组件：

import { ReactSVG } from 'react-svg';

const MyComponent = () => {
    const svgString = '<svg>...</svg>'; // Your SVG string

    return (
        <ReactSVG src={`data:image/svg+xml;utf8,${encodeURIComponent(svgString)}`} />
    );
};