SVG-иконки

В Chakra UI работа с SVG-иконками строится вокруг компонентов Icon и createIcon. Это позволяет создавать как стандартные иконки, встроенные в библиотеку, так и кастомные SVG с полной поддержкой стилизации и реактивного поведения.

Компонент Icon

Компонент Icon служит оболочкой для SVG и предоставляет стандартные свойства для управления размером, цветом и поведением при наведении или нажатии.

import { Icon } from "@chakra-ui/react";
import { FaBeer } from "react-icons/fa";

<Icon as={FaBeer} w={6} h={6} color="teal.500" />

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

  • as — передаёт React-компонент иконки (часто из библиотеки react-icons).
  • w и h — ширина и высота иконки, поддерживаются любые единицы CSS.
  • color — управляет заливкой SVG через currentColor.

Создание кастомной иконки с createIcon

Для использования собственных SVG удобно использовать функцию createIcon, которая превращает SVG в компонент Chakra UI с полной интеграцией.

import { createIcon } from "@chakra-ui/react";

const CustomStarIcon = createIcon({
  displayName: "CustomStarIcon",
  viewBox: "0 0 24 24",
  path: (
    <path
      fill="currentColor"
      d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
    />
  ),
});

<CustomStarIcon w={8} h={8} color="yellow.400" />

Особенности:

  • displayName — внутреннее имя компонента, полезно для отладки.
  • viewBox — определяет область отображения SVG.
  • path — JSX с элементами <path>, <circle>, <rect> и т.д., можно использовать несколько элементов для сложных фигур.
  • fill="currentColor" позволяет управлять цветом через свойство color компонента.

Стилизация иконок

Chakra UI полностью поддерживает систему токенов темы для иконок:

<Icon as={FaBeer} color="pink.500" boxSize={10} _hover={{ color: "pink.300" }} />
  • boxSize — сокращение для установки одинаковой ширины и высоты.
  • _hover — псевдоселектор для состояния наведения.
  • Можно использовать _active, _focus, _disabled для интерактивных элементов.

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

SVG-иконки легко комбинируются с компонентами Chakra UI, такими как Button, IconButton и Input.

import { IconButton } from "@chakra-ui/react";
import { MdDelete } from "react-icons/md";

<IconButton
  aria-label="Delete item"
  icon={<MdDelete />}
  colorScheme="red"
  size="lg"
/>
  • icon принимает любой компонент иконки.
  • colorScheme наследует цвета темы для кнопок с иконками.
  • Можно использовать isRound, variant для изменения формы и стиля.

Динамическая подмена иконок

Компоненты Icon и createIcon поддерживают динамическое управление через пропсы:

<Icon as={isFavorite ? MdFavorite : MdFavoriteBorder} color={isFavorite ? "red.500" : "gray.400"} />
  • Состояние приложения может менять вид и цвет иконки без необходимости перерисовывать SVG вручную.
  • Подходит для индикаторов лайков, избранного и состояния загрузки.

Анимация SVG-иконок

Chakra UI совместим с CSS-анимациями и библиотекой Framer Motion. Например, плавное вращение иконки:

import { motion } from "framer-motion";

const MotionIcon = motion(Icon);

<MotionIcon
  as={MdAutorenew}
  animate={{ rotate: 360 }}
  transition={{ repeat: Infinity, duration: 2 }}
  w={6}
  h={6}
/>
  • Используется компонент motion обертка для Chakra Icon.
  • Можно задавать бесконечные или однократные анимации через animate и transition.

Оптимизация и управление SVG

  • Все кастомные SVG рекомендуется конвертировать в путь (<path>) вместо сложных элементов <g> и <polygon> для уменьшения веса.
  • Использование fill="currentColor" упрощает стилизацию через тему.
  • Для библиотеки иконок можно объединять несколько SVG в один файл и генерировать компоненты через скрипты или утилиты вроде SVGR.

Совместимость с React Icons

Chakra UI полностью интегрируется с библиотекой react-icons, что обеспечивает доступ к тысячам готовых SVG-иконок без дополнительной работы. Любую иконку можно вставить через компонент Icon или напрямую в IconButton.

Эта структура позволяет управлять SVG-иконками в Chakra UI максимально гибко: создавать кастомные компоненты, применять темы и состояния, а также использовать анимацию и динамическое отображение, сохраняя при этом лёгкость и читаемость кода.

Оглавление