Vue

kubai-icons-vue ofrece cada icono como un componente de Vue. Requiere Vue 3.3 o posterior.

Instalación

bash

npm install kubai-icons-vue

Uso

Importa un icono por su nombre y úsalo en una plantilla:

vue

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

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

Propiedades

Las propiedades son size, color, variant, badgeColor, trigger, hover, active, defaultActive y title. Funcionan como se describe en la tabla de propiedades de React. Usa v-model:active para vincular el estado activado o desactivado de un icono de tipo interruptor.

Activar desde un elemento padre

Para reproducir el movimiento cuando se pasa el cursor sobre un botón completo o este recibe el foco del teclado, añade data-kubai-trigger al botón y trigger="parent" al icono:

vue

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

Iconos por nombre

Si el nombre del icono solo se conoce en tiempo de ejecución, como un valor procedente de una API, usa DynamicIcon. Cada icono sigue siendo un chunk independiente, por lo que el bundle no incluye todo el conjunto.

vue

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

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

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

Renderizado en el servidor

En Nuxt, los componentes se renderizan en el servidor y el movimiento se añade en el cliente. Impórtalos donde se usen o regístralos en un plugin. DynamicIcon es la excepción: renderiza un marcador vacío en el servidor y carga el icono en el navegador.

Importaciones directas

Para evitar cargar el índice del paquete en un servidor de desarrollo, importa un icono desde su propio archivo:

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