Way to dynamic import a huge set of icons as component?

[quank123wip]

I'm new to Vite 2.0 project, and I used to use Vuetify in Vue 2.0, and it has a easy-to-use component v-icon allows me just to find the icons name and use it in other components/views. Now I want to try different icon sets, for example fluentui-system-icon. Is there a way to do this? I have no idea about this.

[quank123wip]

Seems we need a way to create a component that takes 1 props like icon's name and import it. It's seems easy to implentment one, but will it be dynamic imported by rollup? Or it will include the whole icon library? That's definitely not good for performance...

[jpkleemans]

Hi, thanks for your question. You can lazy load icons using defineAsyncComponent:

import { defineAsyncComponent } from 'vue'

export default {
  props: {
    name: String
  },
  computed: {
    icon () {
      return defineAsyncComponent(() => import(`../assets/icons/${this.name}.svg`))
    }
  }
}