Dynamic import support

[seahindeniz]

Hi Instead of importing SVG files individually, can we use a dynamic import?

For example,

<script setup lang="ts">
import { computed, onBeforeMount, ref } from 'vue';

export interface Props {
    name: string;
    /**
     * In pixels
     */
    size?: number | string;
}

const props = withDefaults(defineProps<Props>(), {
    size: 16,
});

const iconId = ref('');
const sizeInPx = computed(() => (String(props.size).endsWith('px') ? props.size : `${props.size}px`));

onBeforeMount(async () => {
    iconId.value = (await import(`../assets/icons/${props.name}.svg`)).default;
});
</script>

<template>
    <span
        :class="$style.container">
        <svg :class="$style.svg">
            <use :xlink:href="`#${iconId}`"></use>
        </svg>
    </span>
</template>

<style module lang="scss">
.container {
    width: v-bind(sizeInPx);
    height: v-bind(sizeInPx);
    display: block;
}

.svg {
    width: 100%;
    height: 100%;
}

.container, .svg {
    color: inherit;
}
</style>