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?
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 />