Import a different module acording to a string given in props

My question is pretty simple : I have some ugly repetitive React imports and rendering code, and couldn’t find a way to make it clean so I am hoping someone already encountered this problem and might know a better solution…

Here is the component I’m trying to make more dynamic :

import { InfoIcon } from '../assets/InfoIcon'

import { DemandsIcon } from '../assets/DemandsIcon'
import { HomeIcon } from '../assets/HomeIcon'
import { MyWorkIcon } from '../assets/MyWorkIcon'
import { PortfoliosIcon } from '../assets/PortfoliosIcon'
import { ProjectsIcon } from '../assets/ProjectsIcon'

export const ModuleIcon = ({ iconName }) => {
  switch (iconName) {
    case 'home':
      return <HomeIcon />
    case 'myWork':
      return <MyWorkIcon />
    case 'projects':
      return <ProjectsIcon />
    case 'portfolios':
      return <PortfoliosIcon />
    case 'demands':
      return <DemandsIcon />
    default:
      return <InfoIcon />
  }
}

Here, all the components I am importing are just a component that return an

If you need more info, I am available 🙂

I didn’t find any other solution as I just don’t understand how to import according to a string given in props