アイコンズ

Iconify
Nuxt UIはIconifyと統合され、20万以上のアイコンにアクセスできます。

使用法

Nuxt UIは@iconify/vueをバックアップしたIconコンポーネントを出荷しますので、追加のセットアップは必要ありません。

Iconコンポーネント

Iconコンポーネントとnameプロパティを使用してアイコンを表示できます。

<template>
  <UIcon name="i-lucide-lightbulb" class="size-5" />
</template>
https://iconify.designコレクションから任意の名前を使用できます。https://icones.js.orgで簡単に参照するか、search-icons MCPツールを使用してAIアシスタントから直接検索してください。
ダッシュ-でコレクションを使用する場合、@iconify/vueは@nuxt/iconのようにこのケースを処理しないため、アイコン名とコレクション名をコロン:で区切る必要があります。例えばi-simple-icons-githubの代わりにi-simple-icons:githubやsimple-icons:githubと書く必要があります。Iconify命名規約の詳細をご覧ください。

コンポーネント小道具

一部のコンポーネントには、アイコンを表示するためのiconプロパティもあります。例えば、Buttonです。

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

コレクション

Iconifyデータセット

アイコンデータをローカルにインストールすることを強くお勧めします。

pnpm i @iconify-json/{collection_name}

たとえば、i-lucide-lightbulbアイコンを使用するには、@iconify-json/lucideでコレクションをインストールします。

コレクションをインストールすると、Nuxt UIが使用するアイコンをビルドに埋め込むことができます。そのため、SSR中にすぐにレンダリングされ、実行時にIconify APIからフェッチされるのではなく、完全にオフラインで動作します。これは、デフォルトでlucideコレクションからNuxt UI自身のアイコンに対して自動的に行われます。

アプリの他の場所でオーバーライドしたり使用したりするアイコンなど、他のアイコンをバンドルするには、vite.config.tsのicon.clientBundle.iconsオプションに追加します。

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

export default defineConfig({
  plugins: [
    ui({
      icon: {
        clientBundle: {
          icons: ['lucide:heart', 'simple-icons:github']
        }
      }
    })
  ]
})
i-{collection}-{name}または{collection}:{name}形式のいずれかを使用できます。例えば、i-lucide-heartまたはlucide:heart、i-material-symbols-menuまたはmaterial-symbols:menuです。@iconify-json/{collection_name}で参照する各コレクションをインストールします。

アイコンを1つずつリストしないでバンドルするには、代わりにscanを有効にします。@nuxt/iconのclientBundle.scanと同じように、インストールされたコレクションからアイコンの使用状況をソースからスキャンしてバンドルします。

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

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

スキャンは.vue .jsx .tsx .md .mdc .mdx .yml .yamlファイルのみを読み込み、文字列として書かれたアイコン名のみにマッチします。ナビゲーションリンクのリストのような.tsまたは.jsファイルで定義されたアイコンは見逃されます。i-lucide-${name}のように動的にビルドされた名前も同様です。これらのファイルもスキャンするようにglobIncludeを設定してください。デフォルトのリストを置き換えるので、まだ必要な拡張子を残してください。

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

ビルド時にセット全体がわかっている場合でも、clientBundle.iconsにリストすることで動的な名前をバンドルすることができます。APIからのアイコンのように、実行時にのみ存在する名前はバンドルすることができず、Iconify APIからオンデマンドでロードされます。

コレクションがインストールされていないアイコンは、実行時にIconify APIからロードされるため、@iconify-json/{collection_name}で使用する各コレクションをインストールします。バンドルを完全にオプトアウトするには、icon.clientBundleをfalseに設定します。

Theme

vite.config.tsのNuxt UIコンポーネントが使用するデフォルトのアイコンを変更できます。

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.