Интеграция Carbon в SvelteKit проект

Для интеграции Carbon Design System в проект на SvelteKit первым шагом является установка необходимых пакетов. Carbon предоставляет несколько модулей: основной CSS-фреймворк, набор компонентов React, а также иконки и вспомогательные утилиты. Для SvelteKit оптимальным вариантом будет использование CSS и SVG иконок, так как полноценная React-версия компонентов требует адаптации через обёртки.

npm install carbon-components carbon-components-svelte carbon-icons-svelte
  • carbon-components — базовый CSS и утилиты.
  • carbon-components-svelte — набор Svelte-компонентов на основе Carbon.
  • carbon-icons-svelte — библиотека SVG-иконок.

После установки необходимо подключить глобальные стили Carbon в src/app.css или src/app.postcss (если используется PostCSS):

@import 'carbon-components/css/carbon-components.min.css';

В SvelteKit глобальные стили подключаются через +layout.svelte:

Это гарантирует, что все компоненты Carbon будут корректно отображаться и использовать стили.

Использование компонентов Carbon в SvelteKit

Библиотека carbon-components-svelte предоставляет полностью адаптированные Svelte-компоненты, что позволяет интегрировать Carbon без использования React.

Импорт и базовая структура

Простейший пример использования кнопки Carbon:

Ключевые параметры:

  • kind — визуальный стиль кнопки (primary, secondary, danger).
  • size — размеры (sm, md, lg).
  • disabled — состояние блокировки.

Формы и элементы управления

Carbon предлагает широкий набор элементов: TextInput, Select, Checkbox, RadioButton и Toggle.

Пример текстового поля с валидацией:

Особенности:

  • bind:value — двусторонняя привязка данных Svelte.
  • invalid / invalidText — отображение ошибок валидации.
  • Carbon автоматически обрабатывает фокус, состояние ошибки и стили для разных устройств.

Иконки

Использование иконок осуществляется через carbon-icons-svelte:

Каждая иконка доступна в нескольких размерах (16, 20, 32, 64 px), что позволяет адаптировать интерфейс под различные контексты.

Настройка тем и кастомизация

Carbon поддерживает кастомизацию цветов и темы через CSS-переменные. В SvelteKit это удобно использовать в глобальных стилях:

:root {
  --cds-font-family: 'IBM Plex Sans', sans-serif;
  --cds-ui-background: #f4f4f4;
  --cds-ui-01: #ffffff;
  --cds-ui-02: #e0e0e0;
  --cds-ui-03: #8d8d8d;
  --cds-brand-01: #0f62fe;
  --cds-support-error: #da1e28;
}

Важные переменные:

  • --cds-ui-background — фон приложения.
  • --cds-ui-01, --cds-ui-02, --cds-ui-03 — слои пользовательского интерфейса.
  • --cds-brand-01 — основной брендовый цвет.
  • --cds-support-error — цвет ошибок и предупреждений.

Изменение переменных позволяет создавать уникальный визуальный стиль без модификации исходного CSS Carbon.

Организация компонентов в проекте

Для удобства интеграции рекомендуется создать отдельную директорию для Carbon-компонентов:

src/lib/carbon/
├── buttons.svelte
├── inputs.svelte
├── layouts.svelte

Пример переиспользуемого компонента кнопки:

Такой подход облегчает поддержку и унификацию стиля во всём проекте.

Оптимизация производительности

  1. Tree-shaking — импортировать только используемые компоненты, чтобы не тянуть весь пакет Carbon.
  2. Lazy-loading — загружать тяжёлые компоненты, такие как таблицы и модальные окна, только при необходимости.
  3. Кэширование CSS — использовать глобальный файл стилей вместо повторного импорта в каждом компоненте.

События и реактивность

Carbon-компоненты полностью интегрированы с системой реактивности Svelte. Пример передачи события из компонента:




  Принимаю условия



Состояние: {checked ? 'Включено' : 'Выключено'}

Использование bind: обеспечивает автоматическое обновление состояния и повторный рендер без дополнительных обработчиков.

Работа с таблицами и модальными окнами

Carbon предоставляет компоненты DataTable и Modal:




  Имя
  Возраст

  {#each rows as row}
    
      {row.name}
      {row.age}
    
  {/each}

Modal позволяет создавать всплывающие окна с кнопками действия и обратной связью без дополнительной логики.

Итоговая структура SvelteKit проекта с Carbon

  • src/lib/carbon/ — переиспользуемые компоненты.
  • src/routes/ — страницы с подключением компонентов Carbon.
  • src/app.css — глобальные стили Carbon и кастомизация темы.
  • +layout.svelte — подключение глобальных стилей и базовая структура приложения.

Такое разделение обеспечивает чистоту кода, легкую поддержку и масштабируемость интерфейса.

Оглавление