Die Icons

Ikonisch
Nuxt UI integriert sich mit Iconify, um auf über 200.000 Icons zuzugreifen.

Usage (englisch)

Nuxt UI liefert eine Icon-Komponente, die von @iconify/vue unterstützt wird, so dass keine zusätzliche Einrichtung erforderlich ist.

Icon Komponente

Sie können die Icon-Komponente mit einer name-Prop verwenden, um ein Symbol anzuzeigen:

<template>
  <UIcon name="i-lucide-lightbulb" class="size-5" />
</template>
Durchsuchen Sie sie einfach auf https://icones.js.org oder suchen Sie direkt von Ihrem KI-Assistenten mit dem [search-icons](](/docs/getting-started/ai/mcp#available-tools) MCP-Tool.
Wenn Sie Sammlungen mit einem Bindestrich (-) verwenden, müssen Sie den Symbolnamen mit einem Doppelpunkt (:) vom Namen der Sammlung trennen, da @iconify/vue diesen Fall nicht wie @nuxt/icon behandelt.Erfahren Sie mehr über die Iconify Namenskonvention .

Component props (Deutsche Ausgabe)

Einige Komponenten haben auch eine icon-Stütze, um ein Symbol anzuzeigen, wie zum Beispiel das Button:

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

Sammlungen

Iconify Dateiendung

Es wird dringend empfohlen, die Symboldaten lokal zu installieren mit:

pnpm i @iconify-json/{collection_name}

Um beispielsweise das Symbol i-lucide-lightbulb zu verwenden, installieren Sie die Sammlung mit @iconify-json/lucide.

Durch die Installation der Sammlung kann Nuxt UI die verwendeten Symbole in Ihren Build einbetten, sodass sie während SSR sofort gerendert werden und vollständig offline arbeiten, anstatt zur Laufzeit von der Iconify-API abgerufen zu werden.

Um andere Symbole zu bündeln, z. B. solche, die Sie überschreiben oder an anderer Stelle in Ihrer App verwenden, fügen Sie sie der Option icon.clientBundle.icons in Ihrem vite.config.ts hinzu:

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

export default defineConfig({
  plugins: [
    ui({
      icon: {
        clientBundle: {
          icons: ['lucide:heart', 'simple-icons:github']
        }
      }
    })
  ]
})
Sie können entweder das Formular i-{collection}-{name} oder {collection}:{name} verwenden, z. B. i-lucide-heart oder lucide:heart und i-material-symbols-menu oder material-symbols:menu.

Um die verwendeten Symbole zu bündeln, ohne sie einzeln aufzulisten, aktivieren Sie stattdessen scan. Es durchsucht Ihre Quelle nach Symbolverwendungen aus Ihren installierten Sammlungen und bündelt sie, genauso wie @nuxt/icon clientBundle.scan funktioniert:

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

export default defineConfig({
  plugins: [
    ui({
      icon: {
        clientBundle: {
          scan: true
        }
      }
    })
  ]
})

Beim Scannen werden nur die Dateien .vue, .jsx, .tsx, .md, .mdc, .mdx, .yml und .yaml gelesen und nur Icon-Namen, die als wörtliche Zeichenfolgen geschrieben wurden, werden abgeglichen. wie Namen dynamisch wie i-lucide-${name}. Set globInclude gebaut, um diese Dateien als auch zu scannen. Es ersetzt die Standardliste, so halten Sie die Erweiterungen, die Sie noch brauchen:

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}']
          }
        }
      }
    })
  ]
})

Dynamische Namen können immer noch gebündelt werden, wenn Sie den gesamten Satz zur Build-Zeit kennen, indem Sie sie in clientBundle.icons auflisten. Namen, die nur zur Laufzeit existieren, wie Symbole, die von einer API kommen, können überhaupt nicht gebündelt werden und werden bei Bedarf von der Iconify API geladen.

Icons, deren Sammlung nicht installiert ist, werden zur Laufzeit immer noch von der Iconify API geladen, also installieren Sie jede Sammlung, die Sie mit @iconify-json/{collection_name} verwenden.

Theme Bearbeiten

Sie können die Standardsymbole ändern, die von Nuxt-UI-Komponenten in Ihrem vite.config.ts verwendet werden:

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.