Vue

kubai-icons-vue fornece cada ícone como um componente Vue. Requer Vue 3.3 ou superior.

Instalar

bash

npm install kubai-icons-vue

Uso

Importe um ícone pelo nome e use-o em um template:

vue

<script setup>
import { Folder, BellOff } from "kubai-icons-vue";
</script>

<template>
  <Folder :size="28" color="#6366F1" />
  <BellOff variant="soft" title="Muted" />
</template>

Props

As props são size, color, variant, badgeColor, trigger, hover, active, defaultActive e title. Elas funcionam como descrito na tabela de props do React. Use v-model:active para vincular o estado ligado/desligado de um ícone de alternância.

Acionar a partir do elemento pai

Para reproduzir o movimento quando um botão inteiro recebe o cursor ou o foco do teclado, adicione data-kubai-trigger ao botão e trigger="parent" ao ícone:

vue

<button data-kubai-trigger>
  <Trash :size="18" trigger="parent" />
  Delete
</button>

Ícones por nome

Se o nome do ícone só é conhecido em tempo de execução, como um valor vindo de uma API, use DynamicIcon. Cada ícone continua sendo um chunk separado, então o bundle não inclui o conjunto inteiro.

vue

<script setup>
import { DynamicIcon } from "kubai-icons-vue/dynamic";

defineProps({ name: String });
</script>

<template>
  <DynamicIcon :name="name" />
</template>

Renderização no servidor

No Nuxt, os componentes são renderizados no servidor e o movimento é adicionado no cliente. Importe-os onde forem usados ou registre-os em um plugin. DynamicIcon é a exceção: ele renderiza um espaço reservado vazio no servidor e carrega o ícone no navegador.

Importações diretas

Para evitar carregar o índice do pacote em um servidor de desenvolvimento, importe o ícone do próprio arquivo:

import Folder from "kubai-icons-vue/icons/folder";