Get SVG from react-icons components

Question

I need to get the svg element from a react-icon component to render the image using a different Javascript library.

I'm using 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 images, so I try the following:

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

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

But when I do so I get the following error: Error: Unsupported SVG source: [object Object]

When I inspect the other place where I use <MdMemory /> I get an svg element, so I wonder if what I'm trying to achieve is possible as I don't want to load duplicated assets.

UPDATE

After spending a bit more time, I came up with the following:

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

Where MdMemory().props.children[0].props.d is the actual svg path, but I'm still unable to render anything...

Answer 1

This worked better for me:

ReactDOMServer.renderToString(<MdMemory/>)

Answer 2

I just searched for the icon on React Icons and inspected that icon through console, and then I copied and pasted it:

• Browser

  

• Copying

  

• Paste