Nuxt UI 会自动注册@nuxt/icon模块，因此无需额外设置。
您可以使用 Icon 组件和 name prop 来显示图标。
<template>
<UIcon name="i-lucide-lightbulb" class="size-5" />
</template>
一些组件也有一个 icon prop 来显示图标，例如 Button。
<template>
<UButton icon="i-lucide-sun" variant="subtle">Button</UButton>
</template>
强烈建议使用以下方式在本地安装图标数据
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 和客户端都更快、更可靠。
您可以使用本地 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>
您可以在 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',
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',
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',
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',
success: 'i-lucide-circle-check',
system: 'i-lucide-monitor',
tip: 'i-lucide-lightbulb',
upload: 'i-lucide-upload',
warning: 'i-lucide-triangle-alert'
}
}
})
]
})