Load the SVG into a dynamic component

[kissu]

Hi ! 👋🏻
I was wondering if that kind of code may work <component is="svg-grey-home"></component>.

Because we have Nuxt components now, so maybe it is possible in any way.

Without having to use

<script>
export default {
  components: {
    SvgGreyHome: () => import('~/assets/svg/grey/home.svg'),
  },
}
</script>

In my case, writting <svg-grey-home></svg-grey-home> totally works (the setup is done for that) but I want to make it dynamic without the need to import it beforehand.

[amirhoseinsalimi]

What you're looking for is completely doable.

This is from a project that I'm currently working on:

...
components: {
  VideoIcon: () => import('~/assets/icons/video.svg'),
  CalendarIcon: () => import('~/assets/icons/calendar.svg'),
},
...
computed: {
  iconComponentName() {
    if (!this.icon) {
      return;
    }

    return `${this.capitalize(this.icon)}Icon`;
  },
},

That this.icon is a prop. Then in your template, you can write:

<template v-if="icon">
  <Component :is="iconComponentName" />
</template>

Hope this helps.