Tengo el siguiente componente para importar dinámicamente un ícono desde mdi/js. El único problema con esto es que no sacude los árboles. ¿Alguien sabe cómo hacer que el movimiento de árboles funcione con este tipo de configuración? Puedo usar esto en cualquier lugar como
<Icon name='mdiMagnify'>
Icono.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>La razón detrás de esto es que no tendré que importar todos y cada uno de los íconos que necesito en todos mis componentes y pasarlos a una variable de datos para poder utilizarlos en la plantilla vue.
Lo que terminé haciendo actualmente es tener todo el svg en el paquete @mdi/svg y usarlo como un img src. De esa manera, no tendré que lidiar con importarlo dinámicamente desde @mdi/js y esperar un movimiento de árboles.
si está utilizando nuxt.js (que supongo que lo hace ya que tiene la etiqueta en su pregunta), es bastante fácil, solo agregue lo siguiente en su nuxt.config.js :
vuetify: { defaultAssets: false, treeShake: true, icons: { iconfont: 'mdiSvg', // --> this should be enough // sideNote: you can also define custom values and have access to them // from your app and get rid of the imports in each component values: { plus: mdiPlus, // you have access to this like $vuetify.icons.values.plus from your component } } } para que los valores funcionen, solo tiene que importar el ícono apropiado en nuxt.config.js como:
import { mdiPlus } from '@mdi/js'o si no le gustan los valores personalizados, puede importar los íconos necesarios para cada componente en el componente mismo y usarlos allí como:
import { mdiPlus } from 'mdi/js' ... data() { return { plusIcon: mdiPlus } }