Iconos

Iconización
Nuxt UI se integra con Iconify para acceder a más de 200,000 iconos.

Uso

La interfaz de usuario de Nuxt incluye un componente Icon respaldado por @iconify/vue, 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>
Puede utilizar cualquier nombre de la colección https://iconify.design.Examínelos fácilmente en https://icones.js.org o busque directamente desde su asistente de IA utilizando la herramienta MCP [search-iconsxph022/docs/getting-started/ai/mcp#available-tools).
Cuando se utilizan colecciones con un guión (-), es necesario separar el nombre del icono del nombre de la colección con dos puntos (:) ya que @iconify/vue no maneja este caso como @nuxt/icon.Obtenga más información sobre la convención de nombres Iconify .

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}

Por ejemplo, para usar el icono i-lucide-lightbulb, instale su colección con @iconify-json/lucide.

La instalación de la colección permite a Nuxt UI incrustar los iconos que utiliza en su compilación, por lo que se renderizan de inmediato durante SSR y funcionan completamente sin conexión en lugar de ser recuperados de la API de Iconify en tiempo de ejecución.

Para agrupar otros iconos, como los que se anulan o utilizan en otra parte de la aplicación, agréguelos a la opción icon.clientBundle.icons en su vite.config.ts:

vite.config.ts
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    ui({
      icon: {
        clientBundle: {
          icons: ['lucide:heart', 'simple-icons:github']
        }
      }
    })
  ]
})
Puede usar el formulario i-{collection}-{name} o {collection}:{name}, por ejemplo, i-lucide-heart o lucide:heart, y i-material-symbols-menu o material-symbols:menu.

Para agrupar los iconos que usa sin enumerarlos uno por uno, habilite scan en su lugar. Escanea su fuente en busca de usos de iconos de sus colecciones instaladas y los agrupa, de la misma manera que funciona clientBundle.scan de @nuxt/icon:

vite.config.ts
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    ui({
      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 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:

vite.config.ts
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    ui({
      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, enumerándolos 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 y se cargan desde la API de Iconify a pedido.

Los iconos cuya colección no está instalada aún se cargan desde la API de Iconify en tiempo de ejecución, por lo que instale cada colección que use con @iconify-json/{collection_name}.

Temas

Puede cambiar los iconos predeterminados utilizados por los componentes de interfaz de usuario de Nuxt en su vite.config.ts:

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'
    }
  }
})
vite.config.ts
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'
        }
      }
    })
  ]
})

Components

Learn how to customize Nuxt UI components with the Tailwind Variants API for advanced, flexible, and maintainable styling.

Color Mode

Nuxt UI integrates with VueUse to allow for easy switching between light and dark themes.