Создание кастомных иконок

Chakra UI предоставляет встроенную систему для работы с иконками через компонент Icon. Использование кастомных иконок позволяет создавать уникальные визуальные элементы интерфейса без зависимости от сторонних библиотек иконок. Основная структура кастомной иконки в Chakra UI строится на SVG и компоненте Icon, который обеспечивает интеграцию с системой стилей библиотеки.

import { Icon } from '@chakra-ui/react';

const CustomIcon = (props) => (
  <Icon viewBox="0 0 24 24" {...props}>
    <path d="M12 2L15 8H9L12 2Z" fill="currentColor"/>
  </Icon>
);

Ключевые моменты:

  • viewBox определяет область видимости SVG. Обычно используется 0 0 24 24 для стандартного размера иконок.
  • fill="currentColor" позволяет иконке наследовать цвет текста, заданный через свойства Chakra UI, например color="blue.500".
  • Компонент Icon автоматически поддерживает размеры boxSize, что позволяет управлять размером иконки через стандартные пропсы Chakra UI (boxSize="6").

Использование кастомной иконки в компонентах

Кастомные иконки можно использовать в кнопках, ссылках и других интерактивных элементах Chakra UI. Для этого достаточно передать компонент иконки в проп icon или встроить его напрямую в JSX.

import { Button } from '@chakra-ui/react';

<Button leftIcon={<CustomIcon />} colorScheme="teal">
  Нажми меня
</Button>

Преимущества подхода:

  • Иконка автоматически наследует цвет кнопки.
  • Пропсы size и color передаются через Chakra UI и масштабируют SVG без дополнительной работы.
  • Поддержка анимаций через CSS и встроенные стили Chakra UI.

Создание нескольких вариаций иконок

Для сложных интерфейсов часто требуется несколько вариаций одной иконки: обычная, активная, с эффектом наведения. Chakra UI позволяет комбинировать кастомные иконки с компонентами Box или Motion (если используется framer-motion) для анимации и изменения состояния.

import { Box, Icon } from '@chakra-ui/react';
import { motion } from 'framer-motion';

const MotionBox = motion(Box);

const HoverIcon = () => (
  <MotionBox whileHover={{ scale: 1.2 }}>
    <CustomIcon color="red.500" boxSize="8"/>
  </MotionBox>
);

Особенности подхода:

  • Использование motion позволяет плавно изменять размер, цвет и другие свойства SVG.
  • Комбинация с Chakra UI позволяет использовать стандартные темы (red.500, blue.300) для единообразия стиля.
  • Можно создавать иконки с несколькими слоями, комбинируя несколько <path> внутри одного Icon.

Интеграция кастомных иконок с темой Chakra UI

Для централизованного управления иконками рекомендуется интегрировать кастомные SVG в тему Chakra UI через расширение компонента Icon.

import { extendTheme } from '@chakra-ui/react';
import { AddIcon, CheckIcon } from '@chakra-ui/icons';
import CustomIcon from './CustomIcon';

const theme = extendTheme({
  components: {
    Icon: {
      variants: {
        customAdd: (props) => <AddIcon {...props} />,
        customCheck: (props) => <CheckIcon {...props} />,
        customStar: (props) => <CustomIcon {...props} />,
      },
    },
  },
});

Преимущества:

  • Единая точка управления всеми иконками приложения.
  • Возможность определять вариации и размеры через тему, без необходимости дублировать код.
  • Совместимость с системами масштабирования и адаптивного дизайна Chakra UI.

Лучшие практики при создании кастомных иконок

  1. Использовать currentColor — это обеспечивает легкую интеграцию с темой и возможность изменять цвет иконки через пропсы Chakra UI.
  2. Минимизировать сложность SVG — слишком сложные пути могут замедлить рендер и усложнить масштабирование.
  3. Использовать viewBox 24x24 — стандарт для иконок в Chakra UI, упрощает интеграцию с другими компонентами.
  4. Создавать переиспользуемые компоненты — каждый SVG оборачивается в отдельный React-компонент, что упрощает тестирование и поддержку.
  5. Поддерживать анимацию — использование framer-motion или CSS-транзишнов делает интерфейс более динамичным и современным.

Комбинирование нескольких кастомных иконок

Иногда требуется объединение нескольких SVG для создания сложных символов. Chakra UI позволяет это сделать с помощью вложенных Icon.

const ComplexIcon = (props) => (
  <Icon viewBox="0 0 24 24" {...props}>
    <path d="M2 12L12 2L22 12H2Z" fill="currentColor"/>
    <circle cx="12" cy="16" r="4" fill="yellow"/>
  </Icon>
);
  • Первый <path> задаёт форму крыши.
  • <circle> добавляет декоративный элемент.
  • currentColor позволяет основному цвету иконки управлять остальными слоями через пропсы Chakra UI.

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

Оглавление