How dynamically import multiple exports from module without knowing their values beforehand

user_4240304 0
Viewed 52

I have a set of SVG icons rendered as React components. Something like that:

 import { IconCancel } from 'icons';

I have backend endpoint that returns array of objects. Each object contains icon name.

Example of object:

{
  title: 'foo',
  icon: 'IconSubmit',
  // other properties...
}

I don't know what icons will be used until i fetch info from backend.

How can i dynamically import icons from icon module after i fetch info from backend?

reactjs javascript
1 Answers

You can use dynamically import.

const [listIcon, setListIcon] = useState([]);
useEffect(() => {
    import('icons').then(res =>
        setListIcon(res)
        console.log(res)
    )
}, [])


const Component = listIcon[apiObject.icon]
return <Component />
user_106495290
Related