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: на сервере он отрисовывает пустой placeholder и загружает иконку в браузере.

Глубокий импорт

Чтобы не загружать индекс пакета на dev-сервере, импортируйте иконку из её собственного файла:

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