Dynamically import SVG files as React components

Icon.tsx

import React, { useState, useEffect } from "react";
import { err } from "src/utils/async";

interface Props extends React.SVGProps<SVGSVGElement> {
  // path relative to src/assets/icons. omit svg extension
  name: string;
}

interface Module {
  default: React.FC<React.SVGProps<SVGSVGElement>>;
}

const Icon: React.FC<Props> = ({ name, ...props }) => {
  const [module, setModule] = useState<Module>();

  async function importIcon() {
    const md = (await import(
      /* webpackMode: "eager" */ `src/assets/icons/${name}.svg`
    ).catch(err)) as Module;

    if (md instanceof Error) {
      console.error("Failed to load icon: " + md.message);
      return;
    }

    setModule(md);
  }

  useEffect(() => {
    void importIcon();
  }, []);

  if (module?.default) {
    const Icon = module.default;
    return <Icon {...props} />;
  }

  return null;
};

export default Icon;