Vue

kubai-icons-vue fournit chaque icône sous forme de composant Vue. Il nécessite Vue 3.3 ou version ultérieure.

Installation

bash

npm install kubai-icons-vue

Utilisation

Importez une icône par son nom et utilisez-la dans un 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

Les props sont size, color, variant, badgeColor, trigger, hover, active, defaultActive et title. Elles fonctionnent comme décrit dans le tableau des props React. Utilisez v-model:active pour lier l’état activé ou désactivé d’une icône à bascule.

Déclencher depuis un parent

Pour lancer l’animation quand tout un bouton est survolé ou reçoit le focus clavier, ajoutez data-kubai-trigger au bouton et trigger="parent" à l’icône :

vue

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

Icônes par nom

Si le nom de l’icône n’est connu qu’à l’exécution, par exemple une valeur venant d’une API, utilisez DynamicIcon. Chaque icône reste un chunk distinct : le bundle n’inclut donc pas tout l’ensemble.

vue

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

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

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

Rendu serveur

Avec Nuxt, les composants sont rendus côté serveur et l’animation est ajoutée côté client. Importez-les là où vous les utilisez, ou enregistrez-les dans un plugin. DynamicIcon fait exception : il rend un espace réservé vide côté serveur et charge l’icône dans le navigateur.

Imports profonds

Pour éviter de charger l’index du paquet dans un serveur de développement, importez l’icône depuis son propre fichier :

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