¿Cómo puedo crear un archivo de icono para toda mi aplicación? Actualmente importo en cada archivo *.vue los íconos y luego los declaro como puede ver en el siguiente ejemplo.
<template> <div> <v-icon> {{mdiCheck}} </v-icon> </div> </template> <script> import { mdiClose, mdiCheck } from '@mdi/js' export default { data: () => ({ mdiClose: mdiClose, mdiCheck: mdiCheck }), </script>Yo uso Nuxt. Quiero definir los íconos en un archivo central y usarlos en todos mis proyectos sin importar ni declarar los íconos en cada archivo. ¿Cómo puedo hacer eso?
Recomendaría crear un componente separado:
componentes/icono.vue
template> <div> <v-icon> {{icons[name]}} </v-icon> </div> </template> <script> import { mdiClose, mdiCheck } from '@mdi/js' export default { data: () => ({ icons: { mdiClose: mdiClose, mdiCheck: mdiCheck } }), props: { name: { type: String, required: true } } }Luego haga que el componente sea global creando un complemento.
plugins/componentes-globales.js
import Vue from 'vue' import Icon from '../components/icon.vue' Vue.component('icon', Icon)Finalmente registre el complemento en nuxt.config.js
export default { ... plugins: [ { src: '~/plugins/global-components.js' } ] }Ahora, puede usar este componente en todas partes de esta manera:
template> <div> <icon name="mdiCheck" /> </div> </template> <script> export default { data: () => ({}) } </script>