Pictogrammen

Gebruik

Nuxt UI registreert automatisch de @nuxt/icon module voor u, 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>

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}

yarn add @iconify-json/{collection_name}

npm install @iconify-json/{collection_name}

Als u bijvoorbeeld het i-uil-github-pictogram wilt gebruiken, installeert u de collectie met @iconify-json/uil. Op deze manier kunnen de pictogrammen lokaal of vanuit uw serverloze functies worden bediend, wat sneller en betrouwbaarder is aan zowel SSR als client-side.

Door de collectie te installeren, kan Nuxt UI ook de pictogrammen die het gebruikt tijdens het bouwen in de clientbundel insluiten, zodat ze beschikbaar zijn bij de eerste weergave in plaats van op aanvraag te worden geladen op 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 clientBundle.icons van @nuxt/icon in uw nuxt.config.ts:

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

Of schakel clientBundle.scan in om elk pictogram dat in uw app wordt gebruikt te bundelen door uw bron te scannen, zodat u ze niet één voor één hoeft te vermelden:

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  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:

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 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. Ze worden op aanvraag geladen vanaf de /api/_nuxt_icon-route wanneer uw app door de server wordt gerenderd, met de Iconify API als fallback en rechtstreeks vanuit de Iconify API wanneer u nuxt generate of ssr: false.

Aangepaste lokale collecties

U kunt lokale SVG-bestanden gebruiken om een aangepaste Iconify-collectie te maken.

Plaats bijvoorbeeld de SVG-bestanden van uw pictogrammen onder een map naar keuze, bijvoorbeeld ./app/assets/icons:

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

Voeg in je nuxt.config.ts een item toe in icon.customCollections:

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

Dan kun je de icoontjes als volgt gebruiken:

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

Thema

U kunt de standaardpictogrammen wijzigen die worden gebruikt door componenten in uw 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'
        }
      }
    })
  ]
})