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.-), você precisa separar o nome do ícone do nome da coleção com dois-pontos (:), pois o @iconify/vue não trata esse caso como o @nuxt/icon. Por exemplo, em vez de i-simple-icons-github, você precisa escrever i-simple-icons:github ou simple-icons:github.Learn more about the Iconify naming convention.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-lucide-lightbulb, instale sua coleção com @iconify-json/lucide.
Instalar a coleção permite que o Nitro UI embuta os ícones que usa no seu build, para que sejam renderizados imediatamente durante o SSR e funcionem totalmente offline, em vez de serem buscados na API do Iconify 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 icon.clientBundle.icons no seu vite.config.ts:
import ui from '@nitro/ui/vite'
export default defineConfig({
plugins: [
ui({
icon: {
clientBundle: {
icons: ['lucide:heart', 'simple-icons:github']
}
}
})
]
})
i-{collection}-{name} quanto {collection}:{name}, por exemplo i-lucide-heart ou lucide:heart, e i-material-symbols-menu ou material-symbols:menu. Instale cada coleção que você referenciar com @iconify-json/{collection_name}.Para empacotar os ícones que você usa sem listá-los um a um, habilite scan. Ele escaneia seu código-fonte em busca de usos de ícones das suas coleções instaladas e os empacota, da mesma forma que o clientBundle.scan do @nuxt/icon funciona:
import ui from '@nitro/ui/vite'
export default defineConfig({
plugins: [
ui({
icon: {
clientBundle: {
scan: true
}
}
})
]
})
Os ícones cuja coleção não está instalada ainda são carregados da API do Iconify em tempo de execução, então instale cada coleção que você usa com @iconify-json/{collection_name}. Para desativar o empacotamento por completo, defina icon.clientBundle como false.
Você pode alterar os ícones padrão usados pelos componentes do Nitro UI no seu vite.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'
}
}
})
]
})