[Vuejs]-How can I lazy load icons from Vue CoreUI?

by

0👍

Okay I fixed it! 😀

So I threw away CIconWrapperSuspense.vue, that wasn’t necessary at all.
Then I rewrote CIconWrapper.vue as follows:

<template>
  <CIcon v-if="i" :content="i" :size="size" :customClasses="customClasses" />
</template>

<script lang="ts" setup>
import { onMounted } from "vue"
import { CIcon } from "@coreui/icons-vue"

let i = $ref()
const { icon, size = "", customClasses = "" } = defineProps<{
  icon: string, size?: string, customClasses?: string|string[]|object
}>()

onMounted(async () => {
  const iconName = icon.replace(/-(\w)/g, match => match[1].toUpperCase())
  const fileName = icon.replace(/([a-z])([A-Z])/g, match => `${match[0]}-${match[1].toLowerCase()}`)
  // Vite / Rollup only accept dynamic imports that start with ./ or ../
  i = (await import(`../../node_modules/@coreui/icons/js/free/${fileName}.js`))[iconName]
})
</script>

And now my main.ts file has this code:

// icons
import CIcon from '@/components/CIconWrapper.vue'
app.component('CIcon', CIcon)

Leave a comment