themesberg/flowbite-svelte-icons

Dynamic icons with names

Opened this issue · 3 comments

laxmangaian commented

Describe the bug

I have dynamic icons to load, and I will receive the icons in string format. I need to render the icon based on that string.

  1. How can I achieve this?
  2. What could be the type of the variable?

Reproduction

<script>
    import { onMount } from 'svelte';
    import * as Icons from 'flowbite-svelte-icons';
    
    let iconName: string = $props();
    let IconComponent: <what is the type> = $state(null);

    onMount(() => {
           IconComponent = (Icons[iconName as keyof typeof Icons]) || null;
    })
</script>
    
{#if IconComponent}
    <IconComponent class="ml-1" />
{/if}

Version and System Info

"svelte": "^5.0.0-next.1",
"flowbite": "^2.5.2",
"flowbite-svelte": "^0.47.0",
"flowbite-svelte-icons": "^1.6.2",
laxmangaian commented

Thanks for your response. As mentioned earlier, I want to create a MyDynamicIconRenderComp that can dynamically load an icon based on the name provided as a prop. For instance:

<MyDynamicIconRenderComp iconName="AddressBookOutline" />

How can I implement this without importing all the Flowbite icons?