Dynamic inline importing raw SVG in Vue.js & Vite

Question

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?

Answer 1

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:

Step 1:

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'

Step 2:

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>

Step 3

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>

See it live on Stackblitz

---

If you like the above approach, I recently wrote an article about it:

Unified SVG icons with Vite, Vue 3, Quasar and Pinia

Answer 2

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"
/>