Dynamic import example

[wiesson]

I'm wondering if we could lazy load icons by prop name on mount:

export let icon; // desired icon name

onMount(async () => {
  const { default: Icon } = await import(`svelte-hero-icons`); // does somehow not work on sveltekit
})

[JustinVoitel]

@wiesson yea I already tried this approach some weeks ago, this was my code:

onMount(async () => {
   let res = await import(`./heroicons/hero-${src}.json`).then(
     ({ default: res }) => res
   );
   icon = res;
 });

dev worked perfectly and it was only importing the stuff wanted, but when bundling for production it didn't include the json data in build/assets/_app/chunks/[iconname].json.

Even more weirdly that if I hardcoded the icon name into the snippet above, e.g:

await import(`./heroicons/hero-ArrowUp.json`)

The build would include it exactly as I want it. I'm guessing it has something to do with @rollup/plugin-dynamic-import-vars which vite uses under the hood.

I stopped digging deeper because I think in this early stage of both projects a lot will change and might make this possible in the future. Though I kinda like how the API is now but I'm open to try other ways :) PR's welcome!