Статичный SVG

kubai-icons-static предоставляет каждую иконку как самодостаточный SVG-файл. Цвета записаны в файл, поэтому скрипты и таблицы стилей не нужны.

Установка

bash

npm install kubai-icons-static

Файлы

svg/ содержит все иконки в синем цвете по умолчанию (#5393FF). svg-soft/ содержит все иконки в мягком варианте, в сине-сером цвете.

В каждом файле есть дополнительное поле под тень. Чтобы иконка выглядела как анимированная иконка размером 24 px, показывайте файл размером 28 px. Каждый id в файле содержит название иконки, поэтому на одной странице можно встроить несколько иконок.

CDN

Используйте файлы прямо с CDN:

html

<img src="https://cdn.jsdelivr.net/npm/kubai-icons-static@0/svg/folder.svg" width="28" height="28" alt="" />

Любой цвет

Приведённые выше файлы есть в двух цветах. Для другого основного цвета запросите иконку по URL. Это подходит и для Agent и инструментов, которые не могут устанавливать пакеты.

html

<img src="https://icons.kubai.design/api/icon/folder.svg?color=EC4899" width="28" height="28" alt="" />

color: шестизначное hex-значение с # или без него. По умолчанию: 5393FF.
variant: color или soft.
badge: semantic или hex-значение, для иконок со значком.
size: ширина и высота в пикселях, от 16 до 2048. По умолчанию: 96.

В jsDelivr URL с точной версией кэшируется надолго. URL с мажорной версией, например @0, периодически обновляется и получает новые релизы.

Свои цвета

В каталоге иконок можно скачать иконку в SVG или PNG выбранного цвета и варианта. В этих файлах используются обычные hex-цвета, которые корректно читают дизайнерские инструменты, например Figma.

Метаданные

icons.json содержит список всех иконок с категориями и тегами, а для иконок со значком — базовую иконку и значок. categories.json содержит список категорий.