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!

[wojtekmaj]

It looks like you confused React-PDF with @react-pdf/renderer. Please file an issue in their repo instead.