图标
Nuxt UI 集成了 Iconify，可访问超过 200,000+ 个图标。
用法
图标组件
您可以使用 Icon 组件，通过 name 属性来显示图标
<template>
<UIcon name="i-lucide-lightbulb" class="size-5" />
</template>
您可以使用来自以下来源的任何名称：https://icones.js.org集合。
当使用带有短划线 (
-) 的集合时，您需要用冒号 (:) 将图标名称与集合名称分开，因为 @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>
主题
您可以在 vite.config.ts 中更改 Nuxt UI 组件使用的默认图标。
app.config.ts
export default defineAppConfig({
ui: {
icons: {
arrowLeft: 'i-lucide-arrow-left',
arrowRight: 'i-lucide-arrow-right',
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',
ellipsis: 'i-lucide-ellipsis',
external: 'i-lucide-arrow-up-right',
file: 'i-lucide-file',
folder: 'i-lucide-folder',
folderOpen: 'i-lucide-folder-open',
loading: 'i-lucide-loader-circle',
minus: 'i-lucide-minus',
plus: 'i-lucide-plus',
search: 'i-lucide-search',
upload: 'i-lucide-upload'
}
}
})
app.config.ts
export default defineAppConfig({
ui: {
icons: {
arrowLeft: 'i-lucide-arrow-left',
arrowRight: 'i-lucide-arrow-right',
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',
ellipsis: 'i-lucide-ellipsis',
external: 'i-lucide-arrow-up-right',
file: 'i-lucide-file-text',
folder: 'i-lucide-folder',
folderOpen: 'i-lucide-folder-open',
loading: 'i-lucide-loader-circle',
minus: 'i-lucide-minus',
plus: 'i-lucide-plus',
search: 'i-lucide-search',
upload: 'i-lucide-upload',
arrowUp: 'i-lucide-arrow-up',
arrowDown: 'i-lucide-arrow-down',
caution: 'i-lucide-circle-alert',
copy: 'i-lucide-copy',
copyCheck: 'i-lucide-copy-check',
dark: 'i-lucide-moon',
error: 'i-lucide-circle-x',
eye: 'i-lucide-eye',
eyeOff: 'i-lucide-eye-off',
hash: 'i-lucide-hash',
info: 'i-lucide-info',
light: 'i-lucide-sun',
menu: 'i-lucide-menu',
panelClose: 'i-lucide-panel-left-close',
panelOpen: 'i-lucide-panel-left-open',
reload: 'i-lucide-rotate-ccw',
stop: 'i-lucide-square',
success: 'i-lucide-circle-check',
system: 'i-lucide-monitor',
tip: 'i-lucide-lightbulb',
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: {
arrowLeft: 'i-lucide-arrow-left',
arrowRight: 'i-lucide-arrow-right',
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',
ellipsis: 'i-lucide-ellipsis',
external: 'i-lucide-arrow-up-right',
file: 'i-lucide-file',
folder: 'i-lucide-folder',
folderOpen: 'i-lucide-folder-open',
loading: 'i-lucide-loader-circle',
minus: 'i-lucide-minus',
plus: 'i-lucide-plus',
search: 'i-lucide-search',
upload: 'i-lucide-upload'
}
}
})
]
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro({
ui: {
icons: {
arrowLeft: 'i-lucide-arrow-left',
arrowRight: 'i-lucide-arrow-right',
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',
ellipsis: 'i-lucide-ellipsis',
external: 'i-lucide-arrow-up-right',
file: 'i-lucide-file',
folder: 'i-lucide-folder',
folderOpen: 'i-lucide-folder-open',
loading: 'i-lucide-loader-circle',
minus: 'i-lucide-minus',
plus: 'i-lucide-plus',
search: 'i-lucide-search',
upload: 'i-lucide-upload'
}
}
})
]
})