Vue

kubai-icons-vue stellt jedes Icon als Vue-Komponente bereit. Es setzt Vue 3.3 oder neuer voraus.

Installation

bash

npm install kubai-icons-vue

Verwendung

Importieren Sie ein Icon nach Name und verwenden Sie es in einem 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

Die Props sind size, color, variant, badgeColor, trigger, hover, active, defaultActive und title. Sie funktionieren wie in der Props-Tabelle für React beschrieben. Mit v-model:active binden Sie den Ein-/Aus-Zustand eines Umschalt-Icons.

Von einem übergeordneten Element auslösen

Damit die Bewegung abgespielt wird, wenn eine ganze Schaltfläche überfahren wird oder den Tastaturfokus erhält, fügen Sie der Schaltfläche data-kubai-trigger und dem Icon trigger="parent" hinzu:

vue

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

Icons nach Name

Wenn der Icon-Name erst zur Laufzeit feststeht, etwa als Wert aus einer API, verwenden Sie DynamicIcon. Jedes Icon bleibt ein eigener Chunk, sodass das Bundle nicht das gesamte Set enthält.

vue

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

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

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

Server-Rendering

In Nuxt werden Komponenten auf dem Server gerendert, und die Bewegung wird auf dem Client ergänzt. Importieren Sie sie dort, wo sie verwendet werden, oder registrieren Sie sie in einem Plugin. DynamicIcon ist die Ausnahme: Es rendert auf dem Server einen leeren Platzhalter und lädt das Icon im Browser.

Direkte Importe

Um das Laden des Paketindex in einem Dev-Server zu vermeiden, importieren Sie ein Icon aus seiner eigenen Datei:

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