Vue

kubai-icons-vue cung cấp mỗi biểu tượng dưới dạng một component Vue. Yêu cầu Vue 3.3 trở lên.

Cài đặt

bash

npm install kubai-icons-vue

Cách dùng

Nhập biểu tượng theo tên và dùng trong 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

Các prop gồm size, color, variant, badgeColor, trigger, hover, active, defaultActive và title. Chúng hoạt động như mô tả trong bảng prop của React. Dùng v-model:active để liên kết trạng thái bật/tắt của biểu tượng bật/tắt.

Kích hoạt từ phần tử cha

Để phát chuyển động khi rê chuột vào cả nút hoặc khi nút nhận tiêu điểm bàn phím, hãy thêm data-kubai-trigger vào nút và trigger="parent" vào biểu tượng:

vue

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

Biểu tượng theo tên

Nếu chỉ biết tên biểu tượng khi chạy, chẳng hạn một giá trị từ API, hãy dùng DynamicIcon. Mỗi biểu tượng vẫn là một chunk riêng, nên bundle không chứa cả bộ.

vue

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

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

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

Kết xuất phía máy chủ

Trong Nuxt, component được kết xuất trên máy chủ, còn chuyển động được thêm ở phía client. Hãy nhập chúng ở nơi dùng, hoặc đăng ký trong một plugin. DynamicIcon là ngoại lệ: nó kết xuất một phần giữ chỗ trống trên máy chủ và tải biểu tượng trong trình duyệt.

Nhập trực tiếp

Để tránh tải chỉ mục của gói trong máy chủ phát triển, hãy nhập biểu tượng từ tệp riêng của nó:

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