Tree shaking icons using Vite

[adarshmadrecha]

Since we are using the import * as mdijs from '@mdi/js' in below initialization, all the icons are imported. Is it possible to enable tree shaking so that only the icons which are used are bundled?

import { createApp } from 'vue'
import mdiVue from 'mdi-vue/v3'
import * as mdijs from '@mdi/js'

createApp(App).use(mdiVue, {
  icons: mdijs
}) // etc...

[therufa]

hi @adarshmadrecha, the feature you're mentioning is already a feature of most build tools available, so to utilize this you just need to import the desired icons by name.

import {
    mdiSpaceStation,
    mdiApplication,
    mdiExclamation
} from '@mdi/js'

createApp(App).use(mdiVue, {
    icons: {
          mdiSpaceStation,
          mdiApplication,
          mdiExclamation
    }
})

It might seem a bit redundant, but it's the cleanest solution I know of. Once the icons are imported, you can use them as in the examples.

OFF: Also, here's a handy tool for searching icons: https://therufa.github.io/mdi-search/

I hope that I could help you a bit. Cheers

[adarshmadrecha]

Actually, I was looking for something like Vuetify, Element Plus. They import fully, but at Build time the tree shaking removes components which are not Used.

Thanks for sharing your thoughts. Will keep looking for a solution. In case I find, will share here.

[therufa]

Thanks for the hint, your input is much appreciated

[Zony-Zhao]

This is not tree shaking though... My code: My build with webpack --report:

hi @adarshmadrecha, the feature you're mentioning is already a feature of most build tools available, so to utilize this you just need to import the desired icons by name.

import {
  mdiSpaceStation,
  mdiApplication,
  mdiExclamation
} from '@mdi/js'

createApp(App).use(mdiVue, {
  icons: {
        mdiSpaceStation,
        mdiApplication,
        mdiExclamation
  }
})

It might seem a bit redundant, but it's the cleanest solution I know of. Once the icons are imported, you can use them as in the examples.

OFF: Also, here's a handy tool for searching icons: https://therufa.github.io/mdi-search/

I hope that I could help you a bit. Cheers