Импорт и использование Carbon Icons

Carbon Icons представляют собой набор векторных иконок, разработанных IBM и используемых в интерфейсных компонентах Carbon Design System. В сочетании с Svelte они позволяют создавать визуально согласованные интерфейсы с минимальными усилиями, обеспечивая как статические, так и интерактивные иконки.

Установка Carbon Icons

Для использования Carbon Icons в проекте на Svelte требуется установить пакет с иконками через npm:

npm install @carbon/icons-svelte

Пакет включает множество готовых компонентов, каждый из которых экспортируется по имени. Это позволяет импортировать только те иконки, которые реально используются в проекте, что сокращает размер итогового бандла.

Импорт отдельных иконок

В Svelte компоненты импортируются напрямую из пакета. Например, для использования иконки Add:

<script>
  import Add from '@carbon/icons-svelte/lib/Add.svelte';
</script>

<Add />

Особенности импорта:

  • Каждая иконка экспортируется как отдельный Svelte-компонент.
  • Компоненты поддерживают передачу стандартных HTML-атрибутов, таких как width, height, fill или class.
  • Можно использовать несколько иконок в одном компоненте, импортируя их по отдельности:
<script>
  import Add from '@carbon/icons-svelte/lib/Add.svelte';
  import Delete from '@carbon/icons-svelte/lib/Delete.svelte';
</script>

<Add class="icon-add" />
<Delete class="icon-delete" />

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

Иконки Carbon используют SVG, что позволяет управлять их размерами и цветом через атрибуты и стили CSS:

<Add width="32" height="32" fill="#0f62fe" />

Также можно применять классы и использовать CSS-переменные для гибкой кастомизации:

<style>
  .icon-custom {
    width: 48px;
    height: 48px;
    fill: var(--carbon-blue-60);
  }
</style>

<Add class="icon-custom" />

Динамическое использование иконок

Svelte поддерживает динамический импорт компонентов, что позволяет загружать иконки только при необходимости:

<script>
  let iconName = 'Add';
  let IconComponent;

  import(`@carbon/icons-svelte/lib/${iconName}.svelte`).then(module => {
    IconComponent = module.default;
  });
</script>

{#if IconComponent}
  <svelte:component this={IconComponent} />
{/if}

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

Интерактивные иконки

Иконки Carbon могут быть интерактивными с обработкой событий, таких как click, mouseenter и mouseleave:

<script>
  import Add from '@carbon/icons-svelte/lib/Add.svelte';

  function handleClick() {
    console.log('Иконка добавления нажата');
  }
</script>

<Add on:click={handleClick} class="clickable-icon" />

CSS-класс .clickable-icon может содержать стили для указания интерактивности, например, изменение цвета при наведении:

<style>
  .clickable-icon:hover {
    fill: #0f62fe;
    cursor: pointer;
  }
</style>

Композиция с другими компонентами Carbon

Иконки часто используются внутри других компонентов Carbon, например, кнопок (Button), карточек (Tile) или элементов навигации:

<script>
  import Add from '@carbon/icons-svelte/lib/Add.svelte';
  import { Button } from 'carbon-components-svelte';
</script>

<Button>
  <Add slot="icon" />
  Добавить элемент
</Button>

Особенности использования в слотах:

  • Слоты позволяют интегрировать иконки внутрь компонентов, сохраняя правильное выравнивание и отступы.
  • Иконки автоматически наследуют часть стилей родительского компонента, например цвет текста или размер кнопки.

Оптимизация сборки

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

  1. Импортировать только нужные иконки, избегая глобального импорта всего пакета.
  2. Использовать динамический импорт для редко используемых иконок.
  3. Применять tree-shaking, который поддерживается современными сборщиками вроде Vite или Rollup.

Практические советы

  • Для визуальной консистентности проекта лучше придерживаться единого набора иконок из Carbon, избегая сторонних SVG.
  • При изменении размеров или цветов лучше использовать CSS-переменные, чтобы централизованно управлять стилями.
  • Если необходимо создать библиотеку компонентов на основе Carbon, иконки лучше инкапсулировать внутри компонентов для упрощения переиспользования.

Carbon Icons в сочетании с Svelte обеспечивают мощный инструмент для создания адаптивных, интерактивных и визуально согласованных интерфейсов. Использование отдельных компонентов, слотов и динамических импортов позволяет гибко управлять иконками и оптимизировать производительность приложений.

Оглавление