Введение

Kubai Icons — библиотека многослойных SVG-иконок с открытым кодом и анимацией при наведении. На этой странице перечислены пакеты и объяснено, как иконки называются и как нумеруются версии.

Все оттенки иконки берутся от одного основного цвета. При наведении иконка показывает, что делает предмет: папка открывается, конверт распечатывается. Каждая иконка — отдельный ES-модуль, в котором хранится SVG-разметка её исходного состояния (исходная поза) и анимация при наведении.

Пакеты

Пакет	Для чего использовать	Документация
`kubai-icons-react`	React 18+ и Next.js, включая серверный рендеринг	Пакет React
`kubai-icons-vue`	Vue 3.3+ и Nuxt	Пакет Vue
`kubai-icons`	Обычный JavaScript и веб-компонент `<kubai-icon>`	Пакет JavaScript
`kubai-icons-static`	SVG-файлы для тегов `<img>`, дизайнерских инструментов и страниц без JavaScript	Пакет статичного SVG

Быстрый старт

В этом примере используется React. Для других сред см. пакеты, перечисленные выше. Установите пакет:

bash

npm install kubai-icons-react

Затем импортируйте нужные иконки:

tsx

import { Folder, MailPlus } from "kubai-icons-react";

export default function App() {
  return (
    <>
      <Folder />                                 {/* 24px, in the text color */}
      <MailPlus size={32} color="#EC4899" />     {/* any CSS color */}
    </>
  );
}

Названия иконок

Названия иконок английские, в kebab-case: folder, cloud-rain, arrow-up-right. Пакеты JavaScript, React и Vue экспортируют их в PascalCase, например CloudRain. React и Vue также экспортируют CloudRainIcon. Статичные файлы сохраняют название в kebab-case. Каталог иконок ищет по названиям и тегам.

Многие базовые иконки есть и в варианте со значком, например folder-plus, user-check и calendar-clock. Для того, что можно выключить, есть и перечёркнутые иконки, например bell-off.

Версионирование

Пакеты следуют семантическому версионированию и выпускаются вместе. Переименование или удаление иконки — несовместимое изменение, а перерисовка — нет. Примечания к релизам публикуются на GitHub.