So I am trying to import SVG as string into my Vue component using inline import on Vite as follows
<script>
const getSvgIcon = async (name) => {
const module = await import(`../icons/${name}.svg?raw`)
return module.default
}
export default {
props: {
name: String,
},
data() {
return {
svg: null,
}
},
watch: {
name: {
async handler(name) {
this.svg = await getSvgIcon(name)
},
immediate: true,
},
},
}
</script>
<template>
<div v-html="svg"></div>
</template>
This works just fine when running on npm run dev
mode.
However, the issue happens when running npm run build
, I end up getting Error: Unknown variable dynamic import
apparently because I’m using ?raw
suffix.
Is there a solution or is this a handicap by Vite as of now?