1

I am using react functional components generated from svg files by svgr. I am using the standard Custom Templates and it works great. But I want to somehow extract the actual svg part as a string for some further external processing. How can I do that (I am using using Typescript, by the way) ?

I have modified the svgr template so that it gives me a component which holds the the ${variables.jsx} part in a distinct constant, but that still is a JSX.Element, not a string. And I don't want to do detailed parsing, who knows all the details of svg...

So, I need to turn something like this:

const svg: JSX.Element = (<svg> .... yahdah yahdah ... </svg>);

into something like this:

const str: string = "<svg> ... yahdah yahdah ... </svg>";

Some neat javascript magic, maybe ? .toString() gives [ object Object] or something similarly useless, of course.

onouv
  • 528
  • 1
  • 5
  • 12

1 Answers1

0

colleague of mine found this,

which leads to something like this:

import { renderToString } from 'react-dom/server';
const svg: JSX.Element = (<svg> .... yahdah yahdah ... </svg>);
const str = renderToString(svg);

Love it.

onouv
  • 528
  • 1
  • 5
  • 12