Dynamically importing icons in react?

[aleyrizvi]

Hi,
I have a menu that is dynamic and the icon name is specified in the api response.

Is it possible to load icons dynamically in react?

Something like : let Icon = icons[icon] and then

Thanks.

[aleyrizvi]

For anyone looking for solution, I created a gist for it: https://gist.github.com/aleyrizvi/036b05e948307c28affdb4e16045f2dc

[dejurin]

It seems to me that this trick loads all the icons.

[aleyrizvi]

Yes, correct.

You can import specific and play with conditional rendering.

[dejurin]

Do you have example?

[aleyrizvi]

@dejurin something like this:
https://gist.github.com/aleyrizvi/0107975e2a5dbbf11c2ed34db1169eb9

[dejurin]

OK

[sovetski]

The selected answer is not correct for me, the 1st solution loads all icons which is not optimized, the second one needs that we precise which icons to load which is not logical too because if we need to load the icons dynamically, we can not load them one by one before..

[evolutionxbox]

Agreed. Neither of the solutions use the now built-in dynamic imports.