In my React app I'm using material UI (material-ui.com) with SVG icons. When I try to export components including SVG icons to PDF using react-component-export-image, then all SVG icons are missing.
The SVG icons are defined such as:
// autogenerated from icon svg file "icons/Screenshot.svg", do not edit;
import * as React from 'react';
import { SvgIcon, SvgIconProps } from '@material-ui/core';
export const ScreenshotIcon = (props: SvgIconProps) => <SvgIcon {...props}><path d="M0 0h24v24H0V0z" fill="none" /><path d="M17 1.01L7 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 21H7v-1h10v1zm0-3H7V6h10v12zm0-14H7V3h10v1zM9.5 8.5H12V7H8v4h1.5V8.5zM12 17h4v-4h-1.5v2.5H12V17z" /></SvgIcon>;
export default ScreenshotIcon;
What am I missing that the SVG icons do not get rendered?
The simple solution: use html-to-image instead which works out of the box with the SVG icons but also in more complex scenarios (I was asking here only about the first of a series of html-to-image bugs I was confronted with).
Moreover, html2canvas also is buggy in what could be described as "shadow" matte overlays appearing (no idea why it creates them) and arbitrary clipping.