Lazy load SVG import in React + Vite

sample.jsx

import useLazyLoadSvg from "useLazyLoadSvg";

function TestComponent () {
  const { url, Icon } = useLazyLoadSvg(() => import("your-svg-path.svg"))
  
  return (
    <img src={url} />
    <<Icon />
  )
}

useLazyLoadSvg.tsx

import { FunctionComponent, useState } from "react";

type SvgRef = {
  default: string;
  ReactComponent: FunctionComponent<any>;
};

function lazyLoadFile(factory: () => Promise<SvgRef>) {
  return () => factory().then((res) => res);
}

// NOTE: Placeholder component to prevent build error.
const PlaceholderComponent = () => <></>;

export default function useLazyLoadSvg(factory: () => Promise<SvgRef>) {
  const [url, setUrl] = useState("");
  const [Icon, setIcon] = useState<FunctionComponent<SVGElement> | JSX.Element>(
    () => PlaceholderComponent
  );

  const svgData = lazyLoadFile(factory);

  svgData()
    .then((result) => {
      setUrl(result.default);
      setIcon(result.ReactComponent);
    })
    .catch((err) => {
      console.error(err);
    });

  return {
    url,
    Icon,
  };
}