Vue

kubai-icons-vue her simgeyi bir Vue bileşeni olarak sunar. Vue 3.3 veya üstünü gerektirir.

Kurulum

bash

npm install kubai-icons-vue

Kullanım

Bir simgeyi ada göre içe aktarın ve şablonda kullanın:

vue

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

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

Prop'lar

Prop'lar şunlardır: size, color, variant, badgeColor, trigger, hover, active, defaultActive ve title. React prop tablosunda anlatıldığı gibi çalışırlar. Düğme tipi bir simgenin açık/kapalı durumunu bağlamak için v-model:active kullanın.

Üst öğeden tetikleme

Düğmenin tamamı üzerine gelindiğinde veya klavye odağı aldığında hareketi oynatmak için düğmeye data-kubai-trigger, simgeye trigger="parent" ekleyin:

vue

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

Ada göre simgeler

Simge adı yalnızca çalışma zamanında biliniyorsa (örneğin bir API'den gelen bir değer), DynamicIcon kullanın. Her simge yine ayrı bir parçadır (chunk); bu yüzden paket tüm seti içermez.

vue

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

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

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

Sunucuda oluşturma

Nuxt'ta bileşenler sunucuda oluşturulur, hareket istemcide eklenir. Bunları kullanıldıkları yerde içe aktarın ya da bir eklentide kaydedin. DynamicIcon bunun istisnasıdır: sunucuda boş bir yer tutucu oluşturur ve simgeyi tarayıcıda yükler.

Derin içe aktarmalar

Bir geliştirme sunucusunda paket dizininin yüklenmesini önlemek için simgeyi kendi dosyasından içe aktarın:

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