Dynamic import specific icon from ionicons?

I want to show user ionicons on the screen, after he chooses one I want to save it to backend(not the whole svg, only the name) afterwards I want to show this specific icon on some screens.

Since I use Ionic Vue i am importing specific icon and using it in ion icon component as
<ion-icon :icon='whatever'> </ion-icon>

and first i import it from ionicons

import { whatever } from 'ionicons/icons'

How can I make this import dynamic so i import only icon user chose?

I found some solutions online and this one only worked :

import * as icons from 'ionicons/icons';

and then I can do icons['whatever'] which will give me same result as above.
I can then change ‘whatever’ to variable and make this dynamic.

This is working however I am importing all the icons and I wanted to know if there is cleaner way to import only the icon user chose and not all of them and then taking just one.

Imho the import is handled at compile time, the user’s choice at runtime.

Can u tell upfront, at compile/bundling time, what the full range of icons the user may choose?

That is the range of icons u have to import, right?

And which problem r u seeking to solve? Imho u might be able to save a bit on bundle size?

1 Like

Yeah I actually did that. I gave user limited icons he may chose and imported them only.

But then I save name of icon in DB. On other page icon is presented but then I don’t know upfront which icon he will choose and the icon depends on his previous choice. I guess I will again import all of the icons available on this page as well, put them in array and filter one he choses.

Since I cannot import only specific icon from module I will import only limited ones. This should make less load on app then loading them all.

Thanks for reply!