Dynamic Imports?

[Readf0x]

Is there any way to do dynamic imports?

I have a button component that allows you to specify what icon it should use. Before now, I used the svelte-feather package to do a quick and dirty dynamic icon like this:

<script lang="ts">
  import * as FeatherIcon from "svelte-feathers"

  export let icon: string = ""
</script>

<button on:click={href ? redirect : func}>
  {#if icon}
    <svelte:component this={FeatherIcon[icon]} size="12" />
  {/if}
</button>

Obviously there are more options and more code than this, but it shows the way I've been doing this. It works, it's simple, and it's even performant enough for my needs, since it will almost exclusively be used in static elements, but I have yet to figure out a way to do this with unplugin.

PS: How do I get the typescript lsp to stop yelling at me about this?

[rkh]

I think you might be better off using Iconify. I am fairly certain this isn't possible with unplugin-icons because it is designed to download icons at compile time and thus have a tree-shaking-like behavior in order to bundle only exactly the icons needed (which unfortunately means no dynamic/on demand import).

Regarding the typescript warning, try adding unplugin-icons/types/svelte to compilerOptions.types in your tsconfig.json.