vue + vite import dynamic from @mdi/js ?

vite 4

vuetify 3

const getIcon = async (iconName) => {
    return { [iconName]: icon } = await import('@mdi/js')
}

<template>
    <Suspense>
    <v-icon >

      {{ getIcon('mdiAccount') }}
    </v-icon>
</Suspense>
</template>

Error: <path> attribute d: Expected moveto path command ('M' or 'm'), "async () =\u003E {\r\n …".

how i can import dynamic from "@ mdi/js" ?

MaverickChan

3 years ago

Best Answer

Level 47

don't do this , try defineAsyncComponent

<template>
    <Suspense>
		<component :is="iconComponent" />
	</Suspense>
</template>
<script setup>
	import { defineAsyncComponent } from 'vue'
	const props = defineProps({
		iconName: {
			type: String,
		}
	})
	const iconComponent = defineAsyncComponent(() => import(`path${iconName}`))
</script>

In your parent component pass the iconName instead of a function

Note: This is just a concept , you should modify it with your code , don't just copy

1 like

Please or to participate in this conversation.