Icon

Компонент Icon является базовым строительным блоком для отображения графических символов и векторных иконок в интерфейсе. Он построен на основе элемента SVG, что обеспечивает высокое качество рендеринга на любых разрешениях экрана и позволяет полностью контролировать внешний вид через пропсы.

Импорт и базовое использование

import { Icon } from "@chakra-ui/react";
import { MdCheckCircle } from "react-icons/md";

function Example() {
  return <Icon as={MdCheckCircle} w={8} h={8} color="green.500" />;
}
  • as – обязательный проп, который принимает компонент иконки, чаще всего из react-icons.
  • w и h – ширина и высота иконки, могут задаваться через размерные токены Chakra (4, 6, 8) или CSS-значения (px, %, em).
  • color – цвет иконки, совместим с темой Chakra (red.500, blue.300 и т.д.).

Основные пропсы

as – компонент иконки. boxSize – единый проп для задания ширины и высоты одновременно. color – цвет иконки из темы. strokeWidth – толщина линии для иконок с контуром. viewBox – задаёт область просмотра SVG. Позволяет контролировать масштаб и позиционирование.

Пример с boxSize и strokeWidth:

<Icon 
  as={MdCheckCircle} 
  boxSize={10} 
  color="blue.400" 
  strokeWidth={2} 
/>

Стилизация и адаптация

Компонент поддерживает все системные пропсы Chakra, включая:

  • m, p, mt, mr – отступы и поля.
  • _hover, _active, _focus – псевдостили для интерактивных состояний.
  • transition – плавное изменение свойств при взаимодействии.

Пример интерактивной иконки:

<Icon 
  as={MdCheckCircle} 
  w={8} 
  h={8} 
  color="gray.500" 
  _hover={{ color: "green.500", transform: "scale(1.2)" }} 
  transition="all 0.2s"
/>

Использование с Button и другими компонентами

Иконки часто комбинируются с кнопками и элементами управления. Chakra позволяет легко интегрировать Icon через leftIcon и rightIcon.

import { Button } from "@chakra-ui/react";
import { MdSend } from "react-icons/md";

<Button colorScheme="teal" leftIcon={<Icon as={MdSend} />}>
  Отправить
</Button>

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

  • Автоматическая адаптация размера к тексту кнопки.
  • Поддержка системных пропсов для Icon внутри кнопки.
  • Возможность менять цвет, отступ и трансформации без нарушения визуального баланса.

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

Для кастомных SVG можно использовать компонент Icon напрямую, передавая элемент path через children:

<Icon viewBox="0 0 200 200" boxSize={12} color="purple.500">
  <path
    fill="currentColor"
    d="M100 0 L200 200 H0 Z"
  />
</Icon>
  • currentColor позволяет цвету иконки наследоваться от пропса color.
  • viewBox задаёт координатную систему для всех вложенных path.
  • Поддерживаются анимации SVG и любые CSS-трансформации.

Доступность

Chakra UI учитывает ARIA-атрибуты для иконок:

  • role="img" – по умолчанию.
  • aria-label – текстовое описание для скринридеров.
  • focusable={false} – предотвращает фокусировку для декоративных иконок.

Пример:

<Icon as={MdCheckCircle} color="green.500" aria-label="Успешно выполнено" />

Советы по использованию

  • Для иконок из react-icons всегда используйте as, чтобы сохранять совместимость с Chakra-темой.
  • Для небольших декоративных иконок можно использовать boxSize вместо отдельных w и h.
  • Использовать currentColor внутри кастомного SVG позволяет легко менять цвет через проп color.
  • Комбинировать иконки с системными пропсами для анимации и интерактивности.

Компонент Icon в Chakra UI — гибкий инструмент, позволяющий создавать чёткие, масштабируемые и доступные графические элементы, интегрированные с темой и системой стилей библиотеки. Его возможности охватывают как стандартные иконки из библиотек, так и полностью кастомные SVG-элементы с анимацией и интерактивными эффектами.

Оглавление