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