One interesting challenge I've encountered involves dynamically importing icons from mdi/js. The issue at hand is that tree-shaking does not seem to work with this setup. Does anyone have any insights on how to enable tree-shaking in this scenario? This component can be used anywhere like
<Icon name='mdiMagnify'>
Icon.vue
<template>
<v-icon v-bind="$attrs">{{ icon }}</v-icon>
</template>
<script>
export default {
name: 'Icon',
props: {
name: {
required: true,
type: String,
},
},
data: () => ({
icon: null,
}),
async created() {
const { [this.name]: icon } = await import('@mdi/js')
this.icon = icon
},
}
</script>
The main advantage of this approach is that there's no need to individually import each icon for every component and store it in a data variable just to use it in Vue templates.