Vue

kubai-icons-vue fornisce ogni icona come componente Vue. Richiede Vue 3.3 o successivo.

Installazione

bash

npm install kubai-icons-vue

Utilizzo

Importa un'icona per nome e usala in 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

Le prop sono size, color, variant, badgeColor, trigger, hover, active, defaultActive e title. Funzionano come descritto nella tabella delle prop di React. Usa v-model:active per collegare lo stato acceso/spento di un'icona a interruttore.

Trigger da un elemento genitore

Per riprodurre l'animazione quando si passa il mouse su un intero pulsante o questo riceve il focus da tastiera, aggiungi data-kubai-trigger al pulsante e trigger="parent" all'icona:

vue

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

Icone per nome

Se il nome dell'icona è noto solo a runtime, per esempio un valore proveniente da un'API, usa DynamicIcon. Ogni icona resta un chunk separato, quindi il bundle non include l'intero set.

vue

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

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

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

Rendering sul server

In Nuxt i componenti vengono renderizzati sul server e l'animazione viene aggiunta sul client. Importali dove li usi o registrali in un plugin. DynamicIcon è l'eccezione: sul server renderizza un segnaposto vuoto e carica l'icona nel browser.

Import diretti

Per evitare di caricare l'indice del pacchetto in un server di sviluppo, importa un'icona dal proprio file:

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