Иконки и кастомизация заголовков

В библиотеке Carbon Components Svelte иконки реализованы как отдельные компоненты, которые можно импортировать и использовать в любом месте интерфейса. Каждый компонент иконки поставляется с поддержкой основных атрибутов: size, fill, class, title и aria-label.

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

<script>
  import { Add16 } from 'carbon-icons-svelte';
</script>

<Add16 size={24} fill="#0f62fe" title="Добавить элемент" />

Ключевые моменты при работе с иконками:

  • size задает размер иконки в пикселях, при этом библиотека автоматически масштабирует SVG.
  • fill позволяет изменить цвет заливки иконки без создания отдельных стилей CSS.
  • title и aria-label обеспечивают доступность, особенно для экранных читалок.
  • Можно комбинировать иконки с кнопками, тегами или другими элементами Carbon для создания интерактивных интерфейсов.

Иконки внутри компонентов Carbon

Многие компоненты Carbon поддерживают интеграцию иконок “из коробки”. Например, Button, Search, Tag позволяют вставлять иконки с помощью слотов или специальных свойств:

<script>
  import { Button } from 'carbon-components-svelte';
  import { Add16 } from 'carbon-icons-svelte';
</script>

<Button kind="primary" slot="icon" icon={Add16}>
  Добавить
</Button>

В этом случае иконка автоматически подстраивается под стиль кнопки и меняет размер в зависимости от типа кнопки (small, field, default).

Кастомизация заголовков

Заголовки в Carbon Components Svelte (Heading) являются компонентами с поддержкой нескольких уровней (h1–h6) и дополнительных настроек:

<script>
  import { Heading } from 'carbon-components-svelte';
</script>

<Heading level={2} class="custom-heading" style="color: #161616;">
  Основной заголовок страницы
</Heading>

Особенности кастомизации:

  • level определяет тег заголовка (h1–h6) и автоматически задает базовый размер шрифта.
  • Можно добавлять классы и инлайновые стили для цветовых акцентов, шрифтов или отступов.
  • Комбинация с иконками позволяет создавать более выразительные заголовки:
<script>
  import { Heading } from 'carbon-components-svelte';
  import { Warning16 } from 'carbon-icons-svelte';
</script>

<Heading level={3}>
  <Warning16 size={20} class="heading-icon" /> Важное уведомление
</Heading>
  • Для точной настройки отступов и позиционирования иконок рекомендуется использовать CSS-селекторы .heading-icon с margin или vertical-align.

Стилизация и адаптивность

Иконки и заголовки в Carbon легко адаптируются под тему и дизайн системы.

  • Темы: библиотека поддерживает light и dark темы через глобальные CSS-переменные. Иконки автоматически меняют оттенок при переключении темы, если использовать переменные CSS вместо жесткого цвета в fill.
  • Адаптивность: заголовки подстраиваются под размер шрифта, который задается через свойства уровня заголовка, а иконки могут масштабироваться через size в процентах или пикселях.
  • Комбинированные компоненты: при объединении иконок с заголовками рекомендуется использовать flex-контейнеры или встроенные слоты для контроля выравнивания.

Примеры расширенной кастомизации

  1. Иконка слева от заголовка с изменением цвета при hover:
<style>
  .heading-with-icon {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .heading-with-icon svg {
    transition: fill 0.2s;
  }
  .heading-with-icon:hover svg {
    fill: #ff5630;
  }
</style>

<Heading level={2} class="heading-with-icon">
  <Add16 size={24} fill="#0f62fe" />
  Добавить элемент
</Heading>
  1. Адаптивная комбинация иконки и заголовка для мобильных устройств:
<style>
  .responsive-heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  @media (max-width: 600px) {
    .responsive-heading svg {
      width: 16px;
      height: 16px;
    }
    .responsive-heading h2 {
      font-size: 1rem;
    }
  }
</style>

<Heading level={2} class="responsive-heading">
  <Add16 size={24} fill="#0f62fe" />
  Мобильный заголовок
</Heading>

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

Оглавление