Icônes

Iconique
Nuxt UI s

Utilisation

L'interface utilisateur Nuxt embarque un composant Icon soutenu par @iconify/vue, donc aucune configuration supplémentaire n'est requise.

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>
Parcourez-les facilement sur https://icones.js.org ou recherchez directement à partir de votre assistant AI à l'aide de l'outil MCP [search-iconsxph022/docs/getting-started/ai/mcp#available-tools).
Lorsque vous utilisez des collections avec un tiret (-), vous devez séparer le nom de l'icône du nom de la collection avec un deux-points (:) car @iconify/vue ne gère pas cette casse comme @nuxt/icon.En savoir plus sur la convention de nommage Iconify .

Composants props

Certains composants disposent également d'un prop icon pour afficher une icône, comme le Button par exemple:

<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}

Par exemple, pour utiliser l'icône i-lucide-lightbulb, installez sa collection avec @iconify-json/lucide.

L'installation de la collection permet à Nuxt UI d'intégrer les icônes qu 'elle utilise dans votre build, de sorte qu' elles soient immédiatement affichées pendant la SSR et fonctionnent entièrement hors ligne au lieu d'être récupérées à partir de l'API Iconify lors de l'exécution.

Pour regrouper d'autres icônes, telles que celles que vous remplacez ou utilisez ailleurs dans votre application, ajoutez-les à l'option icon.clientBundle.icons dans votre 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']
        }
      }
    })
  ]
})
Vous pouvez utiliser soit la forme i-{collection}-{name} ou {collection}:{name}, par exemple i-lucide-heart ou lucide:heart, et i-material-symbols-menu ou material-symbols:menu.

Pour regrouper les icônes que vous utilisez sans les répertorier une par une, activez scan à la place. Il analyse votre source pour les utilisations d'icônes de vos collections installées et les regroupe, de la même manière que clientBundle.scan de @nuxt/icon fonctionne:

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

export default defineConfig({
  plugins: [
    ui({
      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 aussi bien. Il remplace la liste par défaut, alors gardez les extensions dont vous avez toujours besoin:

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

Les noms dynamiques peuvent toujours être regroupés lorsque vous connaissez l'ensemble au moment de la construction, en les répertoriant 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 et sont chargés à partir de l'API Iconify à la demande.

Les icônes dont la collection n'est pas installée se chargent toujours à partir de l'API Iconify au moment de l'exécution, installez donc chaque collection que vous utilisez avec @iconify-json/{collection_name}.

Thème

Vous pouvez modifier les icônes par défaut utilisées par les composants de l'interface utilisateur Nuxt dans votre vite.config.ts:

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.