javascript - 从react-icons组件获取SVG

Question

我需要从react-icon组件获取svg元素，以使用不同的Javascript库渲染图像。

我正在使用paperjs作为我正在开发的这个演示的绘图引擎，对于 UI，我使用 react-icons 和 react-bootstrap。现在 paperjs 允许 importSVG图像，所以我尝试以下操作:

import { MdMemory } from "react-icons/md";

const addDevice = () => {
  const svgGroup = Paper.project.importSVG(<MdMemory />);
  svgGroup.position = pointA.clone();
}

但是当我这样做时，我收到以下错误:Error: Unsupported SVG source: [object Object]

当我检查我使用 <MdMemory /> 的其他地方时我得到一个svg元素，所以我想知道我想要实现的目标是否可能，因为我不想加载重复的资源。

更新

花了更多时间后，我得出以下结论:

console.log(MdMemory().props.children[0].props.d);
const svgGroup = Paper.project.importSVG(`<svg><path d=${MdMemory().props.children[0].props.d}></path></svg>`);

哪里MdMemory().props.children[0].props.d是实际的 svg 路径，但我仍然无法渲染任何内容...

Answer 1

明白了!要实现这一目标，您需要

1. 像这样提取路径元素MdMemory().props.children[0].props.d
2. 创建一个 svg 字符串，例如 const svg = "..."

const addDevice = () => {
  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="${MdMemory().props.children[0].props.d}"></path></svg>`;
  const svgGroup = Paper.project.importSVG(svg);
  svgGroup.fillColor = 'black';
  svgGroup.position = pointA.clone();
}