Using Tabler Component dynamically?

[brakop]

Not really an issue, but more if a question. I've used the Vue import to bring in all icons, but is there anyway to generically instantiate the icon without the custom component? I'm trying something like this, but it seems... inefficient:

        <template v-if="iconName=='OneTwoThreeIcon'"><OneTwoThreeIcon :size="size" :stroke-width="strokewidth" /></template>
        <template v-else-if="iconName=='TwentyFourHoursIcon'"><TwentyFourHoursIcon :size="size" :stroke-width="strokewidth" /></template>
        <template v-else-if="iconName=='TwoFactorAuthIcon'"><TwoFactorAuthIcon :size="size" :stroke-width="strokewidth" /></template>
        <template v-else-if="iconName=='Deg360Icon'"><Deg360Icon :size="size" :stroke-width="strokewidth" /></template>
        <template v-else-if="iconName=='Deg360ViewIcon'"><Deg360ViewIcon :size="size" :stroke-width="strokewidth" /></template>

What I'm trying to do is something more like: <TablerIcon :iconName="sMyObject.icon" :size="28" />

Cheers!

[alex-oleshkevich]

Try https://vuejs.org/api/built-in-special-elements.html#component

<component :is="Deg360Icon"></component>

But I don't recommend this. You will bundle all icons, which is ~3.5mb in total.

[brakop]

Thanks Alex! I'll see if I can get my team to agree to a smaller list instead of all of them, either way there's a lot of overhead for a ton of icons I can pretty much guarantee won't get used... :-) Cheers! Bryce