Having trouble dynamic import SVG

[Jiaocz]

I've set the default import to url in vite.config.ts

svgLoader({
  defaultImport: 'url',
}),

And then when I'm using dynamic import for a certain icon, it will cause an error like:

<template>
  <component :is="icon" class="icon" />
</template>

<script setup lang="ts">
import { defineAsyncComponent } from "vue"

const props = defineProps<{ name: string }>()
const icon = defineAsyncComponent(() => import(`@/assets/svg/${props.name}.svg?component`))
</script>

Uncaught (in promise) Error: Invalid async component load result: /src/assets/svg/vue.svg

Is there any solution for this situation?