Convert SVG files to react-pdf SVG components

[robertsargent]

For a number of stylistic elements in our app, we render .svg files as follows:

import { ReactComponent as Icon } from 'icon.svg';

const App = () => (
 <div>
   <Icon />
 </div>
);

We wanted to be able to render these as SVGs in our PDF exports, so I created a wrapper to convert standard XML syntax to react-pdf SVG components:

ReactPdfSvg.tsx

import React, { Children, Component, FC, PropsWithChildren, ReactElement, memo } from 'react';
import ReactDomServer from 'react-dom/server';
import {
  Circle,
  ClipPath,
  Defs,
  Ellipse,
  G,
  Line,
  LinearGradient,
  Path,
  Polygon,
  Polyline,
  RadialGradient,
  Rect,
  Stop,
  Svg,
  Text,
  Tspan,
} from '@react-pdf/renderer';

export const parseSvg = (node: Node) => {
  if (node.hasChildNodes()) {
    return Array.from(node.childNodes).map<JSX.Element | null>((child: ChildNode, index: number) => {
      const { nodeName, attributes } = child as Element;
      let ReactPdfComponent: typeof Component<React.PropsWithChildren<any>>;
      switch (nodeName.toLowerCase()) {
        case 'svg':
          ReactPdfComponent = Svg;
          break;
        case 'line':
          ReactPdfComponent = Line;
          break;
        case 'polyline':
          ReactPdfComponent = Polyline;
          break;
        case 'polygon':
          ReactPdfComponent = Polygon;
          break;
        case 'path':
          ReactPdfComponent = Path;
          break;
        case 'rect':
          ReactPdfComponent = Rect;
          break;
        case 'circle':
          ReactPdfComponent = Circle;
          break;
        case 'ellipse':
          ReactPdfComponent = Ellipse;
          break;
        case 'text':
          ReactPdfComponent = Text;
          break;
        case 'tspan':
          ReactPdfComponent = Tspan;
          break;
        case 'g':
          ReactPdfComponent = G;
          break;
        case 'stop':
          ReactPdfComponent = Stop;
          break;
        case 'defs':
          ReactPdfComponent = Defs;
          break;
        case 'clippath':
          ReactPdfComponent = ClipPath;
          break;
        case 'lineargradient':
          ReactPdfComponent = LinearGradient;
          break;
        case 'radialgradient':
          ReactPdfComponent = RadialGradient;
          break;
        default:
          return null;
      }
      const props = {};
      for (const attr of attributes) {
        props[attr.name] = attr.value;
      }
      return (
        ReactPdfComponent && (
          <ReactPdfComponent key={`${child.nodeName}-${index}`} {...props}>
            {parseSvg(child)}
          </ReactPdfComponent>
        )
      );
    });
  }
  return null;
};

export const getSvgDom = (svgString: string) => {
  return new DOMParser().parseFromString(svgString, 'image/svg+xml');
};

const ReactPdfSvg: FC<PropsWithChildren> = ({ children }) => {
  return Children.toArray(children).map((child) => {
    return parseSvg(getSvgDom(ReactDomServer.renderToString(child as ReactElement)));
  });
};

export default memo(ReactPdfSvg);

Example.tsx

import { Document, Page } from '@react-pdf/renderer';
import { ReactComponent as Icon } from 'icon.svg';

export default Example = () => (
  <Document>
    <Page size="A4">
      <ReactPdfSvg>
        <Icon />
      </ReactPdfSvg>
    </Page>
  </Document>

Let me know your comments/thoughts. I have a nagging feeling there might be a better/simpler way to achieve the same result!

[poojas10]

Hey I've tried something like this and this worked for most of the cases

`import React, { useEffect, useRef, useState } from "react";
import * as htmlToImage from "html-to-image";
import { Image as PDFImage } from "@react-pdf/renderer";
import { createRoot } from "react-dom/client";

const CaptureAndExportPDF = ({
component: Component,
}: CaptureAndExportPDFProps) => {
const [imageSrc, setImageSrc] = useState("");
const containerRef = useRef(null);

useEffect(() => {
if (!containerRef.current) {
containerRef.current = document.createElement("div");
document.body.appendChild(containerRef.current);
}

const container = containerRef.current;
const root = createRoot(container);
root.render(<Component />);

const capture = () => {
  htmlToImage
    .toPng(container)
    .then((dataUrl) => {
      setImageSrc(dataUrl);
      root.unmount();
    })
    .catch((err) => {
      console.error("Capture failed", err);
      root.unmount();
    });
};

requestAnimationFrame(() => {
  requestAnimationFrame(capture);
});

return () => {
  root.unmount();
};

}, [Component]);

useEffect(() => {
return () => {
if (containerRef.current) {
document.body.removeChild(containerRef.current);
containerRef.current = null;
}
};
}, []);

return <>{imageSrc ? : null}</>;
};

`