Документация v3.4

React-библиотека
IconKit

Интеллектуальная система управления цифровыми активами. Быстрая установка, нативная поддержка TypeScript и минимальный вес бандла.

Установка через npm API Референс

React компонент IconKit в редакторе кода

Установка

Добавьте пакет в ваш проект с помощью пакетного менеджера. Библиотека совместима с React 16.8+.

NPM / Yarn

          npm install @iconkit/react

          # или

          yarn add @iconkit/react

Последняя версия: 3.4.1 (релиз 12.10.2023)

Требования

• React >= 16.8 (Hooks)
• TypeScript (опционально)
• Node.js >= 14
• Совместимость с Vite, Webpack, Next.js

Базовое использование

Компонент IconKit рендерит SVG-иконки прямо в DOM, что позволяет легко стилизовать их через CSS.

        import { IconKit } from '@iconkit/react';

        function App() {

          return (

            <IconKit name="search-01" />

          );

        }

Доступные пакеты

Essential UI

Базовый набор из 120 иконок для навигации и интерфейса. Вес: 12kb (gzip).

Business Pro

Иконки для дашбордов, аналитики и CRM. Включает графики и метрики.

DevOps Kit

Специализированные иконки для технических интерфейсов, серверов и сетей.

Настройка пропсов

Полный контроль над внешним видом и поведением иконок через пропсы.

Размер (Size)

Передавайте строковые значения (sm, md, lg) или числовые (px).

          <IconKit size="24" />

          <IconKit size="lg" />

Цвет (Color)

Используйте проп color или наследуйте от родителя через currentColor.

          <IconKit color="#38BDF8" />

          <IconKit color="danger" />

Анимация (Spin)

Встроенные CSS-анимации для индикаторов загрузки. Просто добавьте булеву переменную.

          <IconKit name="loader" spin={true} />
        

Кастомизация

Переопределение stroke-width и fill напрямую в компоненте.

          <IconKit strokeWidth={1.5} fill="none" />
        

Оптимизация бандла: Tree-shaking

IconKit разработан с учетом модульности. Мы используем ES6 модули, чтобы сборщики (Webpack, Rollup, Vite) могли отрезать неиспользуемый код.

Результат

Если вы используете только 5 иконок из библиотеки в 1000+, ваш финальный бандл увеличится менее чем на 4kb. Импортируйте иконки напрямую, а не весь пакет.

❌ Неправильно (тянет всё):

import * as Icons from '@iconkit/react';

✅ Правильно (tree-shakable):

import { IconHome, IconUser } from '@iconkit/react';

4kb

Минимальный вес

Зависимостей

100%

Lighthouse Score

Нужна помощь с интеграцией?

Наши специалисты помогут настроить CI/CD пайплайн для автоматической генерации иконок.

Связаться с поддержкой

React-библиотека IconKit