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>

Props

可用的 props 有 size、color、variant、badgeColor、trigger、hover、active、defaultActive 和 title，用法与 React props 表格中的说明相同。使用 v-model:active 绑定切换型图标的状态。

由父元素触发

要在悬停于整个按钮或按钮获得键盘焦点时播放动效，请在按钮上添加 data-kubai-trigger，并在图标上设置 trigger="parent"：

vue

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

按名称使用图标

如果图标名称要到运行时才能确定，例如来自 API 的值，请使用 DynamicIcon。每个图标仍然是独立的 chunk，打包结果不会包含整套图标。

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";