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

一、SVG对象转React组件的替代方法 #

1. 递归创建React元素 #

针对你已转换好的嵌套SVG对象（svg包含path），可以写一个递归函数处理所有层级元素：

function renderSvgElement(element) {
  if (!element) return null;
  const { type, props, key, ref } = element;
  const cleanedProps = { ...props };
  // 处理子元素，兼容单个对象或数组格式
  const children = Array.isArray(cleanedProps.children)
    ? cleanedProps.children.map(child => renderSvgElement(child))
    : renderSvgElement(cleanedProps.children);
  delete cleanedProps.children;
  return React.createElement(type, { ...cleanedProps, key, ref }, children);
}

在组件中直接调用即可：

<Button onClick={() => setIsOpenModal(true)}>
  {selectedIcon ? renderSvgElement(selectedIcon) : 'icons'}
</Button>

2. 使用dangerouslySetInnerHTML（简单但需注意风险） #

若能将SVG对象转回原始HTML字符串，可直接用此方法，但仅适合完全信任SVG来源的场景（避免XSS风险）：

// 从SVG对象拼接出原始字符串
const svgString = `<svg xmlns="${selectedIcon.props.xmlns}" width="${selectedIcon.props.width}" height="${selectedIcon.props.height}" viewBox="${selectedIcon.props.viewBox}"><path fill="${selectedIcon.props.children.props.fill}" d="${selectedIcon.props.children.props.d}"></path></svg>`;

<Button onClick={() => setIsOpenModal(true)}>
  {selectedIcon ? <span dangerouslySetInnerHTML={{ __html: svgString }} /> : 'icons'}
</Button>

注意：该方法存在安全隐患，仅限内部可控的SVG资源使用。

二、按钮替换动态SVG的完整示例 #

结合你的代码，完整组件实现如下：

import { useState } from '@wordpress/element';
import { Button } from '@wordpress/components';

function IconSelectorButton() {
  const [selectedIcon, setSelectedIcon] = useState(null);
  const [isOpenModal, setIsOpenModal] = useState(false);

  // 递归渲染SVG元素的工具函数
  function renderSvgElement(element) {
    if (!element) return null;
    const { type, props, key, ref } = element;
    const cleanedProps = { ...props };
    const children = Array.isArray(cleanedProps.children)
      ? cleanedProps.children.map(renderSvgElement)
      : renderSvgElement(cleanedProps.children);
    delete cleanedProps.children;
    return React.createElement(type, { ...cleanedProps, key, ref }, children);
  }

  return (
    <Button onClick={() => setIsOpenModal(true)}>
      {selectedIcon ? renderSvgElement(selectedIcon) : 'icons'}
    </Button>
  );
}

export default IconSelectorButton;

三、额外优化建议 #

• 把renderSvgElement抽成独立工具函数，方便多组件复用
• 保留SVG对象中的key属性，避免React列表渲染警告
• 给SVG添加style={{ verticalAlign: 'middle' }}，让图标与按钮布局更协调

内容的提问来源于stack exchange，提问作者sanjeev gwachha