从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();
}

Answer 2

这对我来说效果更好：

ReactDOMServer.renderToString(<MdMemory/>)

Answer 3

我只是在 React Icon 上搜索图标，然后通过控制台检查该图标，然后复制并粘贴它

浏览器 [1]：

复印 [2]：

粘贴 [3]：