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?
As @tony19 commented, this is probably a bug. I opened an issue which you can follow here .
As a workaround to make your code working though, follow below:
Turn all your SVGs into Vue components. In that way, you can have better management. In order to do that, you simply edit the file name replacing from .svg
to .vue
and wrapping the content inside template
tag.
If you want to keep svg
files though, you can use vite-svg-loader plugin and with this, you will be able to do:
import IconComponent from './my-icon.svg?component'
Create an SVG icon component:
<script>
import { defineAsyncComponent } from 'vue';
export default {
props: {
name: {
type: String,
required: true,
},
},
computed: {
dynamicComponent() {
const name = this.name;
return defineAsyncComponent(() => import(`./icons/${name}.vue`));
},
},
};
</script>
<template>
<component :is="dynamicComponent" />
</template>
Now you can import SvgIcon.vue
and use the name of the SVG icon like this:
<script>
import SvgIcon from './components/SvgIcon.vue'
export default {
components: {
SvgIcon
}
}
</script>
<template>
<SvgIcon name="user" />
</template>
If you like the above approach, I recently wrote an article about it:
Look at this example created by myself.
<template>
<i v-html="svg" />
</template>
<script lang="ts" setup>
import { computed } from 'vue';
const props = defineProps({
icon: {
type: String,
required: true,
},
src: {
type: String,
default: '',
},
});
const path = props.src ? props.src : '';
const file = `${path}icon-${props.icon}`;
const modules = import.meta.glob('../../assets/icons/**/*.svg', {
as: 'raw',
eager: true,
});
const svg = computed(() => {
return modules['../../assets/icons/' + file + '.svg'] ?? modules['../../assets/icons/icon-logo-cone.svg'];
});
</script>
This is all you need to dynamically load your SVG in a nice and minimalistic component.
Ah don't forget you can also change the colors of your svg, by using plain css.
Usage:
<UiIcon
class="w-4 text-gray-600"
icon="search"
/>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.