使用法
Nuxt UIは自動的に@nuxt/iconモジュールを登録しますので、追加のセットアップは必要ありません。
Iconコンポーネント
Iconコンポーネントとnameプロパティを使用してアイコンを表示できます。
<template>
<UIcon name="i-lucide-lightbulb" class="size-5" />
</template>search-icons MCPツールを使用してAIアシスタントから直接検索してください。コンポーネント小道具
一部のコンポーネントにはアイコンを表示するためのiconプロパティもあります。Buttonのように：
<template>
<UButton icon="i-lucide-sun" variant="subtle">Button</UButton>
</template>コレクション
Iconifyデータセット
アイコンデータをローカルにインストールすることを強くお勧めします。
pnpm i @iconify-json/{collection_name}
yarn add @iconify-json/{collection_name}
npm install @iconify-json/{collection_name}
例えば、i-uil-githubアイコンを使用するには、@iconify-json/uilを使用してコレクションをインストールします。この方法でアイコンをローカルまたはサーバレス関数から提供することができ、SSRとクライアント側の両方でより高速で信頼性が高くなります。
コレクションをインストールすることで、Nuxt UIはビルド時に使用するアイコンをクライアントバンドルに埋め込むことができます。そのため、実行時にオンデマンドでロードされるのではなく、最初のレンダリングで利用できます。これは、デフォルトでlucideコレクションからNuxt UI自身のアイコンに対して自動的に行われます。アプリの他の場所でオーバーライドしたり使用したりするアイコンなど、他のアイコンをバンドルするには、nuxt.config.tsの@nuxt/iconのclientBundle.iconsオプションに追加してください
export default defineNuxtConfig({
modules: ['@nuxt/ui'],
css: ['~/assets/css/main.css'],
icon: {
clientBundle: {
icons: ['lucide:heart', 'simple-icons:github']
}
}
})
または、clientBundle.scanを有効にして、ソースをスキャンしてアプリ全体で使用されるすべてのアイコンをバンドルします。
export default defineNuxtConfig({
modules: ['@nuxt/ui'],
css: ['~/assets/css/main.css'],
icon: {
clientBundle: {
scan: true
}
}
})
スキャンは.vue .jsx .tsx .md .mdc .mdx .yml .yamlファイルのみを読み込み、文字列として書かれたアイコン名のみにマッチします。ナビゲーションリンクのリストのような.tsまたは.jsファイルで定義されたアイコンは見逃されます。i-lucide-${name}のように動的にビルドされた名前も同様です。これらのファイルもスキャンするようにglobIncludeを設定します。デフォルトのリストを置き換えるので、まだ必要な拡張子を残してください。
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}']
}
}
}
})
ビルド時にセット全体がわかっている場合でも、clientBundle.iconsにリストすることで動的な名前をバンドルすることができます。APIからのアイコンなど、実行時にのみ存在する名前はまったくバンドルすることはできません。アプリケーションがサーバーレンダリングされるときに/api/_nuxt_iconルートからオンデマンドでロードされ、Iconify APIをフォールバックとして使用され、nuxt generateまたはssr: falseを使用するときにIconify APIから直接ロードされます。
カスタムローカルコレクション
ローカルSVGファイルを使用して、カスタムIconifyコレクションを作成できます。
たとえば、アイコンのSVGファイルを任意のフォルダ（./app/assets/icons）の下に配置します。
assets/icons
├── add.svg
└── remove.svg
nuxt.config.tsで、icon.customCollectionsに項目を追加します。
export default defineNuxtConfig({
modules: ['@nuxt/ui'],
css: ['~/assets/css/main.css'],
icon: {
customCollections: [{
prefix: 'custom',
dir: './app/assets/icons'
}]
}
})
次に、次のようにアイコンを使用できます：
<template>
<UIcon name="i-custom-add" />
</template>
Theme
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'
}
}
})
]
})app.config.tsでオーバーライドするアイコンは、クライアントバンドルに埋め込まれるのではなく、実行時にオンデマンドでロードされます。それらもバンドルするには、nuxt.config.tsの@nuxt/iconのclientBundle.iconsに)形式例えばlucide:rocketで追加してください。