Размеры иконок

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

Основные принципы масштабирования

Каждая иконка в Carbon Components Svelte использует SVG-элементы. Это позволяет:

  • Масштабировать иконку без потери качества SVG гарантирует, что при изменении размеров не возникает размытия или пикселизации.

  • Управлять размером через свойства компонента Компоненты иконок имеют свойство size, которое определяет габариты. Допустимые значения стандартного набора размеров включают: "16", "20", "24", "32".

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

<Add size="24" />

В этом примере иконка «Add» отображается с шириной и высотой 24 пикселя. Значение свойства size автоматически применяется к атрибутам width и height SVG.

Пользовательские размеры

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

<Add width="40" height="40" />

Такой подход позволяет точно подогнать иконку под любую компоновку.

Влияние размеров на контейнеры и макет

Иконки часто размещаются внутри кнопок, полей ввода или карточек. Важно учитывать, что увеличение размеров иконки может повлиять на вертикальное выравнивание и отступы. Рекомендуется использовать утилиты Carbon для контроля размеров контейнера и внутренних отступов:

  • carbon-button с модификатором size="sm" | "md" | "lg"
  • Контейнеры с CSS-переменными для padding и margin

Масштабирование через CSS

Иконки Carbon Components Svelte допускают изменение размеров через CSS. Для этого применяется селектор компонента или родительского контейнера:

<style>
  .custom-icon {
    width: 48px;
    height: 48px;
  }
</style>

<Add class="custom-icon" />

Преимущество CSS-подхода — возможность динамического изменения размеров через медиа-запросы и реактивные стили.

Соотношение размеров и визуальной иерархии

  • Малые иконки (16px) — для вспомогательных элементов, списков, подсказок.
  • Средние иконки (20–24px) — для стандартных кнопок и действий.
  • Крупные иконки (32px и выше) — для акцентных элементов, уведомлений или декоративных целей.

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

Практические рекомендации

  1. Использовать стандартные размеры библиотеки, если это возможно, для совместимости с другими компонентами.
  2. Для нестандартных размеров применять явные атрибуты width и height или классы CSS.
  3. Следить за контекстом размещения иконки, чтобы масштабирование не ломало верстку.
  4. Проверять видимость на разных устройствах, особенно для мелких иконок, где детали могут теряться.

Заключение по управлению размерами

Размеры иконок в Carbon Components Svelte — это сочетание стандартных размеров, гибкой настройки через атрибуты компонентов и CSS, а также правильного учета визуальной иерархии. Такой подход обеспечивает единый стиль интерфейса и предсказуемое поведение иконок на любых экранах и в любых компонентах.

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

Оглавление