How to lazy load icons with React.lazy and Suspense

Question

I have all my icons in icons.ts. Currently they are all put into main.bundle.js during build time.

I have an idea of lazy loading the icons in the file so I change them into dynamic import style. This time, the main.bundle.js is 30kb less than previous size.

However, I do not know how to lazy load them in my page with React.lazy and Suspense because of following errors. I also do not know if this is a good way to handle icons because I could not find similar dynamic import style on icons online.

Static Import

import AppDownloadQrCode from '@static/img/app-download-qr-code.png';
import CameraIcon from '@static/img/camera.svg';
import CaretDown from '@static/img/caret-down.svg';
import CarouselNextIcon from '@static/img/icon-next-carousel.svg';
import CarouselPrevIcon from '@static/img/icon-prev-carousel.svg';
import ChatUserIcon from '@static/img/icon-chat-user.png';
import CloseIcon from '@static/img/icon-close.svg';
import CrossIcon from '@static/img/cross.svg';
    
export {   //actually there are many more icon imports but removed for simplicity
  AppDownloadQrCode,
  CameraIcon,
  CaretDown,
  CarouselNextIcon,
  CarouselPrevIcon,
  ChatUserIcon,
  CloseIcon,
  CrossIcon,
};

Dynamic Import

const AppDownloadQrCode = ()=>import('@static/img/app-download-qr-code.png')
const CameraIcon = ()=>import('@static/img/camera.svg')
const CameraIcon = ()=>import('@static/img/camera.svg')
const CaretDown =()=>import( '@static/img/caret-down.svg')
const CarouselNextIcon =()=>import( '@static/img/icon-next-carousel.svg')
const CarouselPrevIcon =()=>import( '@static/img/icon-prev-carousel.svg')
const ChatUserIcon =()=>import( '@static/img/icon-chat-user.png')
const CloseIcon =()=>import( '@static/img/icon-close.svg')
const CrossIcon =()=>import( '@static/img/cross.svg')

export {
  AppDownloadQrCode,
  CameraIcon,
  CaretDown,
  CarouselNextIcon,
  CarouselPrevIcon,
  ChatUserIcon,
  CloseIcon,
  CrossIcon,
};

Following is the error.