import { renderToStaticMarkup } from 'react-dom/server';

const svgString = ({ size }) => renderToStaticMarkup((
  <svg height={`${size}`} width={`${size}`}>
    <circle cx="50" cy="50" r="40" stroke="red" stroke-width="3" fill="green" />
  </svg>
))

render((
  <Svg
    style={{ width: 100, height: 100 }}
    source={svgString({ size: 100 })}
  />
), figma.root);

import { Svg as SvgXml } from 'react-figma';
import { renderToStaticMarkup } from 'react-dom/server';


const Svg = ({ children, ...props }) => {
  const source = renderToStaticMarkup(children)// TODO: memoize this for performance, as we're escaping the virtual DOM :
    .replace('<figma_', '<');

  // Using `<figma_svg>` instead of `<svg>`, as this is an internal/private API that can break in the future

  return <SvgXml source={source} {...props} />;
};

Svg.Svg = (props) => <figma_svg {...props} />;
Svg.G = (props) => <figma_g {...props} />;
Svg.Rect = (props) => <figma_rect {...props} />;
// TODO: other SVG components here...

render((
  <Svg>
    <Rect ...(attributes_here) />
  </Svg>
));

import * as React from 'react';
import {Page, Svg} from 'react-figma';

const svg = `
    <svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M5 3H6V4H5V3ZM3 3H4V4H3V3ZM1 3H2V4H1V3ZM13 13H1V5H13V13ZM13 4H7V3H13V4ZM14 3C14 2.45 13.55 2 13 2H1C0.45 2 0 2.45 0 3V13C0 13.55 0.45 14 1 14H13C13.55 14 14 13.55 14 13V3Z" fill="#1B1F23"/>
    </svg>
`

export const App = () => {
    return (
        <Page name="New page" isCurrent>
            <Svg source={svg} />
        </Page>
    );
};

// [fake code]
import { renderToStaticMarkup } from 'react-dom/server';
import { SvgComp } from './SvgComp';

export const App = () => {
    return (
        <Page name="New page" isCurrent>
            <Svg source={renderToStaticMarkup(<SvgComp />)} />
        </Page>
    );
};

import * as React from 'react';
import { Page, Rectangle, Text, View, Svg } from 'react-figma';
import { Circle, G } from './react-figma-svg';
import { renderToStaticMarkup } from 'react-dom/server';

export const App = () => {
    console.log('render cycle');
    return (
        <Page isCurrent name="Page X">
            <Svg name="svg-test-1" source={
                renderToStaticMarkup(
                    <G name="circles"> 
                        <Circle cx={10} cy="100" r="10" stroke="lime" strokeWidth="3" fill="teal"/> 
                        <Circle cx={40} cy="100" r="10" stroke="lime" strokeWidth="3" fill="pink"/> 
                        <Circle cx={70} cy="100" r="10" stroke="lime" strokeWidth="3" fill="green"/> 
                    </G>
                )}>
            </Svg>
        </Page>
    );
};