Pictogrammen

Iconificeren
Nuxt UI integreert met Iconify om toegang te krijgen tot meer dan 200.000 pictogrammen.

Gebruik

Nuxt UI levert een Icon-component die wordt ondersteund door @iconify/vue, dus er is geen extra installatie vereist.

Icon onderdeel

U kunt de Icon component met een name prop gebruiken om een pictogram weer te geven:

<template>
  <UIcon name="i-lucide-lightbulb" class="size-5" />
</template>
U kunt elke naam uit de https://iconify.design-collectie gebruiken. Blader ze gemakkelijk op https://icones.js.org of zoek rechtstreeks vanuit uw AI-assistent met behulp van de search-icons MCP-tool.
Wanneer u collecties met een streepje (-) gebruikt, moet u de pictogramnaam van de verzamelnaam scheiden met een dubbele punt (:), aangezien @iconify/vue dit geval niet behandelt zoals @nuxt/icon. In plaats van i-simple-icons-github moet je bijvoorbeeld i-simple-icons:github of simple-icons:github schrijven.Meer informatie over de naamgeving van Iconify convention.

Component rekwisieten

Sommige componenten hebben ook een icon prop om een pictogram weer te geven, zoals de Button bijvoorbeeld:

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

Collecties

Iconify gegevensset

Het wordt ten zeerste aanbevolen om de pictogramgegevens lokaal te installeren met:

pnpm i @iconify-json/{collection_name}

Als u bijvoorbeeld het i-lucide-lightbulb-pictogram wilt gebruiken, installeert u de collectie met @iconify-json/lucide.

Door de collectie te installeren, kan Nuxt UI de pictogrammen die het gebruikt in uw build insluiten, zodat ze meteen worden weergegeven tijdens SSR en volledig offline werken in plaats van te worden opgehaald uit de Iconify API tijdens runtime. Dit gebeurt automatisch voor Nuxt UI 's eigen iconen, standaard uit de lucide collectie.

Om andere pictogrammen te bundelen, zoals pictogrammen die u overschrijft of elders in uw app gebruikt, voegt u ze toe aan de icon.clientBundle.icons-optie in uw 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']
        }
      }
    })
  ]
})
U kunt het i-{collection}-{name}- of {collection}:{name}-formulier gebruiken, bijvoorbeeld i-lucide-heart of lucide:heart, en i-material-symbols-menu of material-symbols:menu. Installeer elke verzameling waarnaar u verwijst met @iconify-json/{collection_name}.

Om de pictogrammen die u gebruikt te bundelen zonder ze één voor één te vermelden, schakelt u in plaats daarvan scan in. Het scant uw bron voor pictogramgebruik van uw geïnstalleerde collecties en bundelt ze, op dezelfde manier @nuxt/icon 's clientBundle.scan werkt:

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

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

Scannen leest alleen .vue, .jsx, .tsx, .md, .mdc, .mdx, .yml en .yaml bestanden, en het komt alleen overeen met pictogramnamen die zijn geschreven als letterlijke tekenreeksen. Pictogrammen die zijn gedefinieerd in een .ts- of .js-bestand, zoals een lijst met navigatielinks, worden gemist, evenals namen die dynamisch zijn gebouwd zoals i-lucide-${name}. Stel globInclude in om die bestanden ook te scannen. Het vervangt de standaardlijst, dus bewaar de extensies die je nog nodig hebt:

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 kunnen nog steeds worden gebundeld wanneer u de hele set tijdens het bouwen kent, door ze in clientBundle.icons te vermelden. Namen die alleen tijdens runtime bestaan, zoals pictogrammen die afkomstig zijn van een API, kunnen helemaal niet worden gebundeld en worden op verzoek vanuit de Iconify API geladen.

Pictogrammen waarvan de verzameling niet is geïnstalleerd, worden tijdens runtime nog steeds geladen vanuit de Iconify API, dus installeer elke verzameling die u gebruikt met @iconify-json/{collection_name}. Als u zich wilt afmelden voor volledige bundeling, stelt u icon.clientBundle in op false.

Thema

U kunt de standaardpictogrammen die worden gebruikt door Nuxt UI-componenten in uw vite.config.ts wijzigen:

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.