从 react-icons 组件获取 SVG

Question

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

我正在使用 paperjs as the drawing engine for this demo I'm working on, for the UI I use react-icons and react-bootstrap. Now paperjs allows to 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

知道了！为此，您需要

像这样提取路径元素MdMemory().props.children[0].props.d
创建一个 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();
}

从 react-icons 组件获取 SVG

Get SVG from react-icons components

javascript

svg

paperjs

reactjs