Die Icons

Usage (Verwendung)

Nuxt UI registriert automatisch das @nuxt/icon-Modul für Sie, so dass keine zusätzliche Einrichtung erforderlich ist.

Icon Komponenten

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>

Component Props (Deutsche Ausgabe)

Einige Komponenten haben auch eine icon-Prop, um ein Symbol anzuzeigen, wie zum Beispiel die 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}

yarn add @iconify-json/{collection_name}

npm install @iconify-json/{collection_name}

Um beispielsweise das i-uil-github-Symbol zu verwenden, installieren Sie seine Sammlung mit @iconify-json/uil. Auf diese Weise können die Symbole lokal oder von Ihren serverlosen Funktionen aus bedient werden, was sowohl auf SSR-als auch auf Clientseite schneller und zuverlässiger ist.

Durch die Installation der Sammlung kann Nuxt UI auch die verwendeten Symbole zur Build-Zeit in das Client-Bundle einbetten, sodass sie beim ersten Rendern verfügbar sind, anstatt zur Laufzeit bei Bedarf geladen zu werden. Dies geschieht automatisch für die eigenen Symbole von Nuxt UI, standardmäßig aus der lucide-Sammlung. 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 @nuxt/icon-Option clientBundle.icons in Ihrem nuxt.config.ts hinzu:

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

Oder aktivieren Sie clientBundle.scan, um jedes Symbol, das in Ihrer App verwendet wird, zu bündeln, indem Sie Ihre Quelle scannen, damit Sie sie nicht einzeln auflisten müssen:

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

Beim Scannen werden nur die Dateien .vue, .jsx, .tsx, .md, .mdc, .mdx, .yml und .yaml gelesen, und es werden nur Icon-Namen, die als wörtliche Zeichenfolgen geschrieben sind, abgeglichen. Icons, die in einer .ts-oder .js-Datei definiert sind, wie eine Liste von Navigationslinks, werden übersehen, 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 benötigen:

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

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. Sie werden bei Bedarf von der /api/_nuxt_icon-Route geladen, wenn Ihre App serverseitig gerendert wird, mit der Iconify API als Fallback und direkt von der Iconify API, wenn Sie nuxt generate oder ssr: false verwenden.

Custom lokale Sammlungen

Sie können lokale SVG-Dateien verwenden, um eine benutzerdefinierte Iconify-Sammlung zu erstellen.

Platzieren Sie beispielsweise die SVG-Dateien Ihrer Icons in einem Ordner Ihrer Wahl, z. B. ./app/assets/icons:

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

Fügen Sie in Ihrer nuxt.config.ts ein Element in icon.customCollections hinzu:

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

Dann können Sie die Icons so verwenden:

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

Theme Bearbeiten

Sie können die von Komponenten in Ihrem app.config.ts verwendeten Standardsymbole ändern:

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