Reports

@jesvin-palatty and @yoduh (thank you), I've tried to expand on these answers using defineAsyncComponent, the following does indeed work, but I wonder whether my approach would be considered good practice?

<script>
import IconError from '@/components/icons/IconError.vue';
import {defineAsyncComponent} from "vue";

function getIcon(key) {
    return defineAsyncComponent({
        loader: () => import(`@/components/icons/Icon${key}.vue`),
        errorComponent: IconError,
        timeout: 3000
    })
};

</script>

<template>
  <IconBase><component :is="getIcon(item.icon)"></component></IconBase>
</template>

Reasons:

Blacklisted phrase (0.5): thank you
Long answer (-0.5):
Has code block (-0.5):
Ends in question mark (2):
User mentioned (1): @jesvin-palatty
User mentioned (0): @yoduh
Self-answer (0.5):
Looks like a comment (1):
Low reputation (0.5):

Posted by: Nicola Zilio

79695540