Vue

kubai-icons-vue 將每個圖示提供為 Vue 元件，需要 Vue 3.3 或更新版本。

安裝

bash

npm install kubai-icons-vue

用法

依名稱匯入圖示，並在範本中使用：

vue

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

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

屬性

屬性有 size、color、variant、badgeColor、trigger、hover、active、defaultActive 和 title，用法與 React 屬性表中所述相同。使用 v-model:active 可綁定切換型圖示的開關狀態。

由上層元素觸發

若要在整個按鈕被滑過或取得鍵盤焦點時播放動態，請在按鈕上加入 data-kubai-trigger，並在圖示上加入 trigger="parent"：

vue

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

依名稱使用圖示

如果圖示名稱要到執行時才知道，例如來自 API 的值，請使用 DynamicIcon。每個圖示仍是獨立的區塊，因此打包結果不會包含整個圖示集。

vue

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

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

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

伺服器端渲染

在 Nuxt 中，元件在伺服器上渲染，動態則在用戶端加入。請在使用的地方匯入，或在外掛中註冊。DynamicIcon 是例外：它在伺服器上渲染空白的預留位置，並在瀏覽器中載入圖示。

深層匯入

為避免在開發伺服器中載入套件索引，請從圖示自己的檔案匯入：

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