Allow icons dynamic imports

Hello ! What about importing components like this : import IconFa2 from '@tabler/icons/IconFa2 ? With Next.js, we could then use this :

const IconFa2 = dynamic(() => import('@tabler/icons/IconFa2'));

Or more dynamic :

const Icon = dynamic(() => import(`@tabler/icons/${name}`));

Or maybe export a default, so we can :

const Icon = dynamic(() => import('@tabler/icons').then(mod => mod[name]))`;

What do you think ?

_Originally posted by @matha-io in https://github.com/tabler/tabler-icons/issues/126#issuecomment-829368683_

[adambrgmn]

Ah I see. But then you don’t mind including the full icon library in your code. But I guess publishing each icon as its own file would solve some parts and then you could use (await import(@tabler/icons/${icon})).default.

Note though that I don’t think it is possible to use template string literals with Next.js dynamic, but that is not a concern for this library. You would have to roll your own loading mechanism.

Another issue is in which format to publish the separate files. CommonJS or ESM? ESM is probably more future safe…

[sapkra]

Is there any update on this topic?