O Nitro UI registra automaticamente o módulo @nuxt/icon para você, então nenhuma configuração adicional é necessária.
Você pode usar o componente Icon com uma prop name para exibir um ícone:
<template>
<NIcon name="i-lucide-lightbulb" class="size-5" />
</template>
search_icons.Alguns componentes também têm uma prop icon para exibir um ícone, como o Button, por exemplo:
<template>
<NButton icon="i-lucide-sun" variant="subtle">Button</NButton>
</template>
É altamente recomendado instalar os dados dos ícones localmente com:
pnpm i @iconify-json/{collection_name}
yarn add @iconify-json/{collection_name}
npm install @iconify-json/{collection_name}
Por exemplo, para usar o ícone i-uil-github, instale sua coleção com @iconify-json/uil. Assim os ícones podem ser servidos localmente ou a partir das suas funções serverless, o que é mais rápido e confiável tanto no SSR quanto no lado do cliente.
Instalar a coleção também permite que o Nitro UI embuta os ícones que usa no bundle do cliente em tempo de build, para que fiquem disponíveis na primeira renderização em vez de serem carregados sob demanda em tempo de execução. Isso acontece automaticamente para os ícones próprios do Nitro UI, da coleção lucide por padrão. Para empacotar outros ícones, como os que você sobrescreve ou usa em outros lugares do seu app, adicione-os à opção clientBundle.icons do @nuxt/icon no seu nuxt.config.ts:
export default defineNuxtConfig({
modules: ['@nitro/ui'],
css: ['~/assets/css/main.css'],
icon: {
clientBundle: {
icons: ['lucide:heart', 'simple-icons:github']
}
}
})
Ou habilite clientBundle.scan para empacotar todos os ícones usados no seu app escaneando seu código-fonte, para que você não precise listá-los um a um:
export default defineNuxtConfig({
modules: ['@nitro/ui'],
css: ['~/assets/css/main.css'],
icon: {
clientBundle: {
scan: true
}
}
})
Você pode usar arquivos SVG locais para criar uma coleção Iconify personalizada.
Por exemplo, coloque os arquivos SVG dos seus ícones em uma pasta de sua escolha, por exemplo, ./app/assets/icons:
assets/icons
├── add.svg
└── remove.svg
No seu nuxt.config.ts, adicione um item em icon.customCollections:
export default defineNuxtConfig({
modules: ['@nitro/ui'],
css: ['~/assets/css/main.css'],
icon: {
customCollections: [{
prefix: 'custom',
dir: './app/assets/icons'
}]
}
})
Depois, você pode usar os ícones assim:
<template>
<NIcon name="i-custom-add" />
</template>
Você pode alterar os ícones padrão usados pelos componentes no seu 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-svg-spinners-ring-resize',
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',
user: 'i-lucide-user',
warning: 'i-lucide-triangle-alert'
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nitro/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-svg-spinners-ring-resize',
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',
user: 'i-lucide-user',
warning: 'i-lucide-triangle-alert'
}
}
})
]
})
app.config.ts são carregados sob demanda em tempo de execução, em vez de serem embutidos no bundle do cliente. Para empacotá-los também, adicione-os no formato {collection}:{name} (por exemplo, lucide:rocket) à opção clientBundle.icons do @nuxt/icon no seu nuxt.config.ts.