Интеграция с React Icons

Для использования иконок в проектах на Chakra UI часто применяют библиотеку React Icons, которая предоставляет более 30 коллекций иконок, включая FontAwesome, Material Design Icons, Feather и другие. Установка выполняется через npm или yarn:

npm install react-icons
# или
yarn add react-icons

После установки иконки можно импортировать по конкретным коллекциям:

import { FaBeer } from 'react-icons/fa'; // FontAwesome
import { MdAlarm } from 'react-icons/md'; // Material Design

Каждая иконка в React Icons является компонентом React, что позволяет гибко использовать её внутри элементов Chakra UI, применяя стили и размеры.

Использование иконок внутри компонентов Chakra UI

Chakra UI предоставляет компонент Icon, который можно использовать для рендеринга SVG, но с React Icons интеграция выглядит проще. Например, иконку можно вставить прямо в кнопку или ссылку:

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

<Button leftIcon={<FaBeer />} colorScheme="teal" variant="solid">
  Cheers
</Button>

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

  • leftIcon / rightIcon – свойства Button, IconButton и MenuItem для добавления иконок слева или справа.
  • Иконки React Icons можно оборачивать в компонент Icon, если необходимо применить дополнительные свойства Chakra UI, такие как boxSize или color:
import { Icon } from '@chakra-ui/react';
import { MdAlarm } from 'react-icons/md';

<Icon as={MdAlarm} w={6} h={6} color="red.500" />

Масштабирование и цвет иконок

React Icons позволяют управлять размерами через стандартные HTML/SVG свойства (size, width, height), но при интеграции с Chakra UI предпочтительнее использовать систему дизайна Chakra:

<Icon as={FaBeer} boxSize={8} color="yellow.400" />

Пояснения:

  • boxSize управляет одновременно шириной и высотой.
  • color принимает значения из палитры Chakra UI (red.500, blue.300 и т.д.), что обеспечивает единообразие интерфейса.
  • Можно комбинировать mr, ml, mx для отступов и выравнивания внутри контейнеров.

Иконки в меню и списках

React Icons удобно использовать в Menu, List и Accordion. Пример добавления иконки в меню Chakra UI:

import { Menu, MenuButton, MenuList, MenuItem, Button } from '@chakra-ui/react';
import { FaUser } from 'react-icons/fa';

<Menu>
  <MenuButton as={Button} rightIcon={<FaUser />}>
    Профиль
  </MenuButton>
  <MenuList>
    <MenuItem icon={<FaUser />}>Аккаунт</MenuItem>
    <MenuItem icon={<FaBeer />}>Напитки</MenuItem>
  </MenuList>
</Menu>

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

  • icon в MenuItem автоматически позиционируется слева от текста.
  • Совместное использование Chakra UI и React Icons обеспечивает консистентный стиль и динамическое управление цветами и размерами.

Создание кастомных иконок с Chakra UI и React Icons

Можно создавать свои собственные компоненты иконок, используя Chakra UI Icon и любой SVG:

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

const CustomStarIcon = (props) => (
  <Icon viewBox="0 0 24 24" {...props}>
    <path
      fill="currentColor"
      d="M12 2 L15 11 H24 L17 17 L19 26 L12 20 L5 26 L7 17 L0 11 H9 Z"
    />
  </Icon>
);

// Использование
<Button leftIcon={<CustomStarIcon color="yellow.400" boxSize={6} />}>
  Избранное
</Button>

Принципы:

  • Атрибут fill="currentColor" позволяет иконке наследовать цвет из Chakra UI color.
  • viewBox задаёт систему координат для корректного масштабирования.
  • Использование ...props обеспечивает поддержку всех стандартных свойств Chakra UI.

Анимация и интерактивность иконок

Иконки React Icons легко анимируются с помощью Chakra UI. Например, изменение цвета при наведении:

<Icon
  as={FaBeer}
  boxSize={8}
  color="gray.500"
  _hover={{ color: "orange.400", transform: "scale(1.2)" }}
  transition="all 0.2s"
/>

Рекомендации:

  • _hover и _active позволяют создавать интерактивные состояния без дополнительных CSS.
  • transition управляет плавностью анимации.
  • Можно использовать иконки внутри Motion компонентов из Framer Motion для более сложных анимаций.

Оптимизация и производительность

  • Импортировать только те иконки, которые реально используются, чтобы уменьшить размер бандла:
// Плохо:
import * as FaIcons from 'react-icons/fa';

// Лучше:
import { FaBeer, FaUser } from 'react-icons/fa';

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

  • Для часто используемых иконок можно создать отдельный файл с экспортом кастомных компонентов, например icons.js:

export { FaBeer as BeerIcon } from 'react-icons/fa';
export { MdAlarm as AlarmIcon } from 'react-icons/md';

Это облегчает поддержку и улучшает читаемость кода.

Интеграция с темизацией Chakra UI

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

<Icon
  as={FaBeer}
  boxSize={6}
  color="primary.500"
/>

Можно использовать значения из темы, включая темную и светлую палитры, через useColorModeValue:

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

<Icon
  as={FaBeer}
  boxSize={6}
  color={useColorModeValue("gray.700", "gray.200")}
/>

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

Итоговое применение

React Icons в сочетании с Chakra UI обеспечивают:

  • Гибкую интеграцию с компонентами (Button, Menu, IconButton, List).
  • Полное соответствие дизайн-системе через color, boxSize, spacing.
  • Лёгкую кастомизацию и анимацию.
  • Совместимость с темами Chakra UI и адаптивный дизайн.

Благодаря этому иконки становятся не просто декоративными элементами, а частью полноценной, динамичной и унифицированной интерфейсной системы.

Оглавление