Icon

Iconify
Um componente para exibir qualquer ícone do Iconify ou de outro componente.

Uso

Use a prop name para exibir um ícone:

<template>
  <NIcon name="i-lucide-lightbulb" class="size-5" />
</template>
Você pode usar qualquer nome da coleção https://iconify.design. Navegue por eles facilmente em https://icones.js.org ou busque diretamente pelo seu assistente de IA usando a ferramenta MCP search_icons.
É altamente recomendado instalar as coleções de ícones que você precisa; leia mais sobre isso.

Exemplos

SVG

Você também pode passar um componente Vue para a prop name:

Você pode definir seus próprios componentes de ícone ou usar o unplugin-icons para importá-los diretamente de arquivos SVG:

<script setup lang="ts">
import IconLightbulb from '~icons/lucide/lightbulb'
</script>

<template>
  <NIcon :name="IconLightbulb" class="size-5" />
</template>

API

Props

Prop Default Type
nameany
mode "svg" | "css"
size string | number
customizeboolean | IconifyIconCustomizeCallback | null

Changelog

No recent changes