Iconos

Uso en

La interfaz de usuario de Nuxt registra automáticamente el módulo @nuxt/icon por usted, por lo que no se requiere configuración adicional.

Componente ### Icon

Puede utilizar el componente Icon con un prop name para mostrar un icono:

<template>
  <UIcon name="i-lucide-lightbulb" class="size-5" />
</template>

Componentes accesorios

Algunos componentes también tienen un prop icon para mostrar un icono, como el Button por ejemplo:

<template>
  <UButton icon="i-lucide-sun" variant="subtle">Button</UButton>
</template>

Colecciones

Iconify dataset (Edición española)

Se recomienda encarecidamente instalar los datos de icono localmente con:

pnpm i @iconify-json/{collection_name}

yarn add @iconify-json/{collection_name}

npm install @iconify-json/{collection_name}

Por ejemplo, para usar el icono i-uil-github, instale su colección con @iconify-json/uil. De esta manera, los iconos se pueden servir localmente o desde sus funciones sin servidor, lo que es más rápido y más confiable tanto en SSR como en el lado del cliente.

Instalar la colección también permite que Nuxt UI incruste los iconos que utiliza en el paquete del cliente en el momento de la compilación, por lo que están disponibles en el primer renderizado en lugar de cargarse bajo demanda en tiempo de ejecución. Esto sucede automáticamente para los iconos propios de Nuxt UI, de la colección lucide por defecto. Añádelos a la opción clientBundle.icons de @nuxt/icon en su nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  icon: {
    clientBundle: {
      icons: ['lucide:heart', 'simple-icons:github']
    }
  }
})

O habilite clientBundle.scan para agrupar todos los iconos utilizados en su aplicación escaneando su fuente, para que no tenga que enumerarlos uno por uno:

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  icon: {
    clientBundle: {
      scan: true
    }
  }
})

El escaneo solo lee los archivos .vue, .jsx, .tsx, .md, .mdc, .mdx, .yml y .yaml, y solo coincide con los nombres de los iconos escritos como cadenas literales. como son los nombres construidos dinámicamente como i-lucide-${name}. Configure globInclude para escanear esos archivos también. Reemplaza la lista predeterminada, así que mantenga las extensiones que todavía necesita:

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  icon: {
    clientBundle: {
      scan: {
        globInclude: ['**/*.{vue,jsx,tsx,md,mdc,mdx,yml,yaml,ts,js}']
      }
    }
  }
})

Los nombres dinámicos aún se pueden agrupar cuando conoce todo el conjunto en el momento de la compilación, al enumerarlos en clientBundle.icons. Los nombres que solo existen en tiempo de ejecución, como los iconos que provienen de una API, no se pueden agrupar en absoluto. Se cargan a pedido desde la ruta /api/_nuxt_icon cuando su aplicación se procesa en el servidor, con la API de Iconify como alternativa, y desde la API de Iconify directamente cuando usa nuxt generate o ssr: false.

Colecciones locales personalizadas

Puede usar archivos SVG locales para crear una colección de Iconify personalizada.

Por ejemplo, coloca los archivos SVG de tus iconos en una carpeta de tu elección, por ejemplo, ./app/assets/icons:

assets/icons
├── add.svg
└── remove.svg

En su nuxt.config.ts, agregue un elemento en icon.customCollections:

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  icon: {
    customCollections: [{
      prefix: 'custom',
      dir: './app/assets/icons'
    }]
  }
})

Puedes usar iconos como este:

<template>
  <UIcon name="i-custom-add" />
</template>

Temas

Puede cambiar los iconos predeterminados utilizados por los componentes en su app.config.ts:

export default defineAppConfig({
  ui: {
    icons: {
      arrowDown: 'i-lucide-arrow-down',
      arrowLeft: 'i-lucide-arrow-left',
      arrowRight: 'i-lucide-arrow-right',
      arrowUp: 'i-lucide-arrow-up',
      caution: 'i-lucide-circle-alert',
      check: 'i-lucide-check',
      chevronDoubleLeft: 'i-lucide-chevrons-left',
      chevronDoubleRight: 'i-lucide-chevrons-right',
      chevronDown: 'i-lucide-chevron-down',
      chevronLeft: 'i-lucide-chevron-left',
      chevronRight: 'i-lucide-chevron-right',
      chevronUp: 'i-lucide-chevron-up',
      close: 'i-lucide-x',
      copy: 'i-lucide-copy',
      copyCheck: 'i-lucide-copy-check',
      dark: 'i-lucide-moon',
      drag: 'i-lucide-grip-vertical',
      ellipsis: 'i-lucide-ellipsis',
      error: 'i-lucide-circle-x',
      external: 'i-lucide-arrow-up-right',
      eye: 'i-lucide-eye',
      eyeOff: 'i-lucide-eye-off',
      file: 'i-lucide-file',
      folder: 'i-lucide-folder',
      folderOpen: 'i-lucide-folder-open',
      hash: 'i-lucide-hash',
      info: 'i-lucide-info',
      light: 'i-lucide-sun',
      loading: 'i-lucide-loader-circle',
      menu: 'i-lucide-menu',
      minus: 'i-lucide-minus',
      panelClose: 'i-lucide-panel-left-close',
      panelOpen: 'i-lucide-panel-left-open',
      plus: 'i-lucide-plus',
      reload: 'i-lucide-rotate-ccw',
      search: 'i-lucide-search',
      stop: 'i-lucide-square',
      star: 'i-lucide-star',
      success: 'i-lucide-circle-check',
      system: 'i-lucide-monitor',
      tip: 'i-lucide-lightbulb',
      upload: 'i-lucide-upload',
      warning: 'i-lucide-triangle-alert'
    }
  }
})

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        icons: {
          arrowDown: 'i-lucide-arrow-down',
          arrowLeft: 'i-lucide-arrow-left',
          arrowRight: 'i-lucide-arrow-right',
          arrowUp: 'i-lucide-arrow-up',
          caution: 'i-lucide-circle-alert',
          check: 'i-lucide-check',
          chevronDoubleLeft: 'i-lucide-chevrons-left',
          chevronDoubleRight: 'i-lucide-chevrons-right',
          chevronDown: 'i-lucide-chevron-down',
          chevronLeft: 'i-lucide-chevron-left',
          chevronRight: 'i-lucide-chevron-right',
          chevronUp: 'i-lucide-chevron-up',
          close: 'i-lucide-x',
          copy: 'i-lucide-copy',
          copyCheck: 'i-lucide-copy-check',
          dark: 'i-lucide-moon',
          drag: 'i-lucide-grip-vertical',
          ellipsis: 'i-lucide-ellipsis',
          error: 'i-lucide-circle-x',
          external: 'i-lucide-arrow-up-right',
          eye: 'i-lucide-eye',
          eyeOff: 'i-lucide-eye-off',
          file: 'i-lucide-file',
          folder: 'i-lucide-folder',
          folderOpen: 'i-lucide-folder-open',
          hash: 'i-lucide-hash',
          info: 'i-lucide-info',
          light: 'i-lucide-sun',
          loading: 'i-lucide-loader-circle',
          menu: 'i-lucide-menu',
          minus: 'i-lucide-minus',
          panelClose: 'i-lucide-panel-left-close',
          panelOpen: 'i-lucide-panel-left-open',
          plus: 'i-lucide-plus',
          reload: 'i-lucide-rotate-ccw',
          search: 'i-lucide-search',
          stop: 'i-lucide-square',
          star: 'i-lucide-star',
          success: 'i-lucide-circle-check',
          system: 'i-lucide-monitor',
          tip: 'i-lucide-lightbulb',
          upload: 'i-lucide-upload',
          warning: 'i-lucide-triangle-alert'
        }
      }
    })
  ]
})