How can we dynamically import svg files?

I am not sure if this loader supports this:

  computed: {
    currentIcon() {
        return () => import('path/to/svg/file.svg');
    }
  }

and then we can use as

<template>
  <compoment
    :is="currentIcon"
    :aria-hidden="hidden"
  />
</template>

Currently console output as

runtime-core.esm-bundler.js:38 [Vue warn]: Invalid VNode type: undefined (undefined) 
  at <Anonymous is=fn aria-hidden=true > 
  at <UiIcon name="notification" > 

[JacobRex]

For those wanting to use <script setup> you can do this. This worked for me on Nuxt3.

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

<script lang="ts" setup>
const props = defineProps({
  name: {
    type: String,
    required: true
  },
});

const icon = defineAsyncComponent(() => import(`../../assets/icons/${props.name}.svg`));
</script>

[jrafaaael]

Hello! I was trying to do something similar and after several ideas that occurred to me, I managed to do it this way:

1. Put in assets/icons all the svg that you will use. Create a file index.js and import and export the svg

// src/assets/icons/index.js
import add from './add.svg'
import multiply from './multiply.svg'
// etc

export {
  add,
  multiply,
  // etc
}

1. In path src/components, create component Icon.vue:

// src/components/Icon.vue
<template>
  <component :is="icon"/>
</template>

<script>
import * as icons from "../assets/icons";

export default {
  name: "Icon",
  props: ["name"],
  computed: {
    icon() {
      return icons[this.name]
    }
  },
};
</script>

1. Use it!

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + Vite" />
  <icon name="add" />
  <icon name="multiply" />
</template>

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import Icon from "./components/Icon.vue";
</script>

IMPORTANT NOTE: If your svg has a name in kebab-case (i. e "heart-pulse.svg"), when you use the icon component, the prop name must be in snake_case (i. e "heart_pulse")