Skip to content
Alebat

Módulo de Iconos

Instalación del Módulo

Para añadir el módulo de Iconos en Nuxt, es necesario ejecutar el comando de instalación correspondiente. Aquí está el comando que debes usar:

Terminal window
npm install @nuxtjs/icon

Una vez hecho esto, verifica si la configuración del módulo se ha añadido automáticamente al archivo nuxt.config.ts en el apartado modules. En caso contrario, será necesario incluirla manualmente en dicho apartado. Aquí tienes un ejemplo de cómo hacerlo:

export default {
  modules: [
    '@nuxtjs/icon'
  ]
}

Extensión Recomendada: Iconify IntelliSense

Se recomienda instalar la extensión Iconify IntelliSense. Esta herramienta facilita la visualización de cada icono de forma visual directamente en el editor, ayudando a identificar rápidamente a qué corresponde cada icono.

Uso del Componente Icon

El módulo de Iconos en Nuxt introduce un componente autoimportado llamado Icon. Este componente permite mostrar iconos mediante las siguientes propiedades:

  • name (requerido): Nombre del icono o nombre global del componente.
  • size: Tamaño del icono (valor predeterminado: 1em).
  • mode: Modo de renderizado del icono (svg o css, valor predeterminado: css).

Aquí tienes un ejemplo de cómo utilizar el componente Icon:

<template>
  <Icon name="home" size="24px" mode="svg"/>
</template>

Instalación de Paquetes de Iconos Locales

Para mejorar el rendimiento y disponer de iconos específicos, se recomienda instalar paquetes de iconos en local. Esto se hace utilizando el comando correspondiente para el paquete que se desea. Por ejemplo:

Terminal window
npm install @iconify-icons/mdi

Uso de Iconos Personalizados en el Servidor de Nuxt

Si se utiliza el servidor de Nuxt, es posible añadir paquetes de iconos personalizados siguiendo estos pasos:

  1. Crear un directorio (ejemplo: assets/my-icons) donde se guarden los archivos SVG que se deseen añadir.

  2. Configurar el módulo en el archivo nuxt.config.ts en el apartado correspondiente, indicando la ruta del directorio de iconos y asignando un prefijo para referenciarlos.

export default {
  icons: {
    customSources: [
      '~/assets/my-icons'
    ]
  }
}

Una vez configurado, los iconos personalizados pueden ser utilizados mediante el componente Icon. Sin embargo, esto solo funcionará si se está usando el servidor de Nuxt, ya que el módulo realiza llamadas a los endpoints tanto del servidor como del módulo para acceder a los iconos.

Configuración Global de los Iconos

Es posible personalizar la configuración global de los iconos del módulo creando un archivo app.config.ts en la raíz del proyecto. Este archivo permite definir propiedades predeterminadas como:

  • Tamaño por defecto (size).
  • Clase CSS por defecto (class).
  • Modo de renderizado (mode).
  • Aliases, que permiten asignar nombres cortos a iconos específicos.
export default {
  icons: {
    defaultSize: '32px',
    defaultClass: 'my-icon-class',
    defaultMode: 'svg',
    aliases: {
      'logo': 'custom-logo'
    }
  }
}

Personalización de Iconos a Nivel de Componente

Además de la configuración global, los iconos pueden personalizarse directamente en los componentes donde se utilizan. Esto permite ajustar propiedades como tamaño, clase o modo de renderizado de manera específica para cada caso.

Más Funcionalidades y Configuraciones

Esta documentación cubre las funcionalidades y configuraciones más importantes del módulo de Iconos en Nuxt. Si necesitas más información o quieres explorar otras posibilidades, se recomienda consultar la documentación oficial del módulo.