Vue

kubai-icons-vue menyediakan setiap ikon sebagai komponen Vue. Memerlukan Vue 3.3 atau lebih baru.

Pasang

bash

npm install kubai-icons-vue

Penggunaan

Impor ikon berdasarkan nama dan gunakan di template:

vue

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

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

Prop

Prop-nya adalah size, color, variant, badgeColor, trigger, hover, active, defaultActive, dan title. Cara kerjanya sama seperti dijelaskan di tabel prop React. Gunakan v-model:active untuk mengikat status aktif/nonaktif ikon toggle.

Pemicu dari induk

Untuk memutar gerakan saat seluruh tombol di-hover atau menerima fokus keyboard, tambahkan data-kubai-trigger ke tombol dan trigger="parent" ke ikon:

vue

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

Ikon berdasarkan nama

Jika nama ikon baru diketahui saat runtime, misalnya nilai dari API, gunakan DynamicIcon. Setiap ikon tetap berupa chunk terpisah, sehingga bundle tidak menyertakan seluruh set.

vue

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

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

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

Render di server

Di Nuxt, komponen dirender di server, dan gerakan ditambahkan di klien. Impor komponen di tempat dipakai, atau daftarkan di plugin. DynamicIcon adalah pengecualian: komponen ini merender placeholder kosong di server dan memuat ikon di browser.

Impor langsung

Untuk menghindari pemuatan indeks paket di dev server, impor ikon dari filenya sendiri:

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