Icônes

Utilisation

Nuxt UI enregistre automatiquement le module @nuxt/icon pour vous, aucune configuration supplémentaire n'est nécessaire.

Composant ### Icon

Vous pouvez utiliser le composant Icon avec une prop name pour afficher une icône:

<template>
  <UIcon name="i-lucide-lightbulb" class="size-5" />
</template>

Composants props

Some components also have a prop icon to display an icon, like the Button for example:

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

Collections

Iconify jeu de données

Il est fortement recommandé d'installer les données d'icônes localement avec:

pnpm i @iconify-json/{collection_name}

yarn add @iconify-json/{collection_name}

npm install @iconify-json/{collection_name}

Par exemple, pour utiliser l'icône i-uil-github, installez sa collection avec @iconify-json/uil. De cette façon, les icônes peuvent être servies localement ou à partir de vos fonctions sans serveur, ce qui est plus rapide et plus fiable à la fois côté SSR et côté client.

L'installation de la collection permet également à Nuxt UI d'intégrer les icônes qu 'il utilise dans le bundle client au moment de la construction, de sorte qu' elles sont disponibles sur le premier rendu au lieu d'être chargées à la demande à l'exécution. Cela se produit automatiquement pour les propres icônes de Nuxt UI, à partir de la collection lucide par défaut. Pour regrouper d'autres icônes, telles que celles que vous remplacez ou utilisez ailleurs dans votre application, Ajoutez-les à l'option clientBundle.icons de @nuxt/icon dans votre nuxt.config.ts:

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

Vous pouvez également activer clientBundle.scan pour regrouper toutes les icônes utilisées dans votre application en analysant votre source, de sorte que vous n'avez pas à les lister une par une:

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

La numérisation lit uniquement les fichiers .vue, .jsx, .tsx, .md, .mdc, .mdx, .yml et .yaml, et ne correspond qu 'aux noms d'icônes écrits sous forme de chaînes littérales. tout comme les noms construits dynamiquement comme i-lucide-${name}. Définissez globInclude pour analyser ces fichiers également. Il remplace la liste par défaut, alors gardez les extensions dont vous avez toujours besoin:

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

Les noms dynamiques peuvent toujours être regroupés lorsque vous connaissez l'ensemble au moment de la compilation, en les listant dans clientBundle.icons. Les noms qui n'existent qu'à l'exécution, comme les icônes provenant d'une API, ne peuvent pas être regroupés du tout. Ils sont chargés à la demande à partir de la route /api/_nuxt_icon lorsque votre application est rendue par le serveur, avec l'API Iconify en tant que solution de secours, et à partir de l'API Iconify directement lorsque vous utilisez nuxt generate ou ssr: false.

Collections locales personnalisées

Vous pouvez utiliser les fichiers SVG locaux pour créer une collection Iconify personnalisée.

Par exemple, placez les fichiers SVG de vos icônes dans un dossier de votre choix, par exemple, ./app/assets/icons:

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

Dans votre nuxt.config.ts, ajoutez un élément dans votre icon.customCollections:

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

Vous pouvez utiliser des icônes comme ceci:

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

Thème

Vous pouvez modifier les icônes par défaut utilisées par les composants de votre 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'
        }
      }
    })
  ]
})