Типографика и иконки

Типографика в современных веб-приложениях играет ключевую роль в восприятии информации и общей эстетике интерфейса. В SvelteKit UI библиотеках она организуется через компоненты и утилиты, которые позволяют гибко управлять размерами, весом шрифтов, межстрочным интервалом и цветовой палитрой.

Основные компоненты типографики

  • Text / Typography – базовый компонент для отображения текста. Поддерживает параметры size, weight, color, align и lineHeight.

    <Text size="lg" weight="bold" color="primary">
  Пример крупного жирного текста
</Text>

    Важно: многие библиотеки используют систему токенов, где size="lg" автоматически преобразуется в конкретное значение font-size в пикселях или rem.

  • Heading – компонент для заголовков (h1–h6). Позволяет задавать уровень заголовка через level и стилизовать его через параметры веса и цвета.

    <Heading level={2} weight="semibold" color="secondary">
  Заголовок второго уровня
</Heading>

  • Paragraph – компонент для абзацев, с возможностью контроля межстрочного интервала (lineHeight) и отступов (margin).

    <Paragraph lineHeight="tall" margin="md">
  Абзац текста с увеличенным интервалом между строками
</Paragraph>

Работа с типографикой через утилиты

Многие SvelteKit UI библиотеки предоставляют утилиты для динамического управления шрифтом:

  • fontSize, fontWeight, textColor – утилиты для inline стилизации текста.
  • responsive typography – возможность изменять размер и вес текста в зависимости от размеров экрана.

Пример с responsive-утилитами:

<Text class="text-base md:text-lg lg:text-xl">
  Адаптивный текст
</Text>

Системы токенов и дизайн-системы

Типографика часто интегрируется с дизайн-системой через токены:

  • sizes: sm, md, lg, xl
  • weights: light, regular, medium, bold
  • colors: primary, secondary, muted, accent

Использование токенов обеспечивает единообразие и позволяет легко менять стиль текста глобально без правки каждого компонента.

Работа с иконками

Иконки в SvelteKit UI библиотеках реализуются через отдельные компоненты, часто основанные на SVG. Основные задачи — поддержка размера, цвета, состояния (hover, active) и интеграция с интерактивными элементами.

Базовый компонент Icon

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

  • name — идентификатор иконки (например, home, settings).
  • size — размер иконки, обычно в пикселях или rem.
  • color — цвет иконки, интегрированный с палитрой UI библиотеки.
  • stroke / fill — для SVG-иконок, позволяет управлять внутренней заливкой и контуром.

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

<Icon name="search" size="24" color="primary" />

Интеграция с кнопками и ссылками

Иконки часто используют вместе с интерактивными элементами, чтобы улучшить визуальную иерархию интерфейса:

<Button>
  <Icon name="plus" size="20" /> Добавить элемент
</Button>

Здесь компонент кнопки автоматически выравнивает иконку и текст по вертикали и горизонтали.

Анимации и состояния

Современные UI библиотеки позволяют управлять состояниями иконок через CSS-псевдоклассы или пропсы:

  • hoverColor — изменение цвета при наведении.
  • rotate — анимация вращения (часто используется для кнопок refresh или загрузки).
  • spin — бесконечная анимация вращения для индикаторов загрузки.

Пример с анимацией:

<Icon name="refresh" size="24" color="primary" spin={true} />

Подключение сторонних иконок

SvelteKit UI библиотеки обычно поддерживают импорт внешних наборов иконок, например, Feather Icons или FontAwesome. Импорт может быть компонентным:

<script>
  import { Home } from 'svelte-icons/fa';
</script>

<Home size="28" color="#4f46e5" />

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

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

  • Использовать систему токенов для типографики, чтобы легко поддерживать единообразие дизайна.
  • Комбинировать текстовые компоненты и утилиты, чтобы адаптировать интерфейс под различные устройства.
  • Выравнивать иконки и текст, используя встроенные контейнеры кнопок или flex-контейнеры, чтобы избежать визуального смещения.
  • Применять анимации и состояния для интерактивных иконок, улучшая восприятие интерфейса пользователем.
  • Для производительности использовать компонентные иконки, а не встроенные SVG через HTML, чтобы минимизировать количество DOM-элементов.

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

Оглавление