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

В MUI работа с иконками осуществляется через отдельный пакет @mui/icons-material. Каждая иконка представлена как React-компонент, что позволяет гибко управлять её свойствами, такими как размер, цвет, стилизация через sx или className. Для подключения необходимо установить пакет:

npm install @mui/icons-material

Импорт конкретной иконки выполняется напрямую:

import DeleteIcon from '@mui/icons-material/Delete';

Использование в JSX выглядит следующим образом:

<Button startIcon={<DeleteIcon />}>Удалить</Button>

Кастомизация стандартных иконок

MUI предоставляет возможность управлять внешним видом иконок через свойства fontSize и color:

<DeleteIcon fontSize="small" color="primary" />
<DeleteIcon fontSize="large" sx={{ color: 'red', ml: 2 }} />
  • fontSize: "inherit" | "small" | "medium" | "large"
  • color: "inherit" | "primary" | "secondary" | "action" | "error" | "disabled"

Дополнительно можно использовать объект sx для любых CSS-свойств.

Создание собственных SVG-иконок

Для создания кастомных иконок MUI предоставляет компонент SvgIcon. Он позволяет обернуть SVG-контент в React-компонент, который полностью совместим с системой MUI, включая темы и стили.

Пример создания простой иконки:

import SvgIcon from '@mui/material/SvgIcon';

function CustomStarIcon(props) {
  return (
    <SvgIcon {...props}>
      <path 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" />
    </SvgIcon>
  );
}

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

<CustomStarIcon color="secondary" fontSize="large" />

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

Иконки на базе SvgIcon могут использоваться в любых компонентах MUI, где предусмотрено свойство icon или startIcon/endIcon для кнопок:

<Button startIcon={<CustomStarIcon />}>Добавить в избранное</Button>

Такое использование сохраняет все преимущества стандартных иконок: автоматическое наследование цвета темы, управление размерами и адаптация под типографику.

Оптимизация размера иконок

Для больших проектов рекомендуется импортировать только необходимые иконки, чтобы избежать роста бандла. При работе с кастомными SVG это особенно важно:

  • Использовать отдельные компоненты для каждой иконки.
  • При необходимости импортировать SVG как модуль и оборачивать через SvgIcon.
  • Применять React.memo для иконок, которые часто рендерятся, чтобы уменьшить количество повторных рендеров.
const MemoizedCustomIcon = React.memo(CustomStarIcon);

Динамическое управление иконками

Иконки можно выбирать динамически, используя объекты с маппингом названий на компоненты:

const iconsMap = {
  star: CustomStarIcon,
  delete: DeleteIcon
};

function IconRenderer({ name }) {
  const IconComponent = iconsMap[name];
  return IconComponent ? <IconComponent /> : null;
}

Это позволяет менять иконки на основе состояния или пропсов без дублирования кода.

Стилизация через тему

SvgIcon интегрирован с темами MUI. Можно создавать кастомные цвета и размеры через объект theme:

import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    customIcon: {
      main: '#ff8800',
    },
  },
});

<ThemeProvider theme={theme}>
  <CustomStarIcon sx={{ color: 'customIcon.main', fontSize: 40 }} />
</ThemeProvider>

Это позволяет централизованно управлять стилями всех иконок проекта.

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

SVG-иконки легко анимировать с помощью CSS или библиотек, таких как Framer Motion:

import { motion } from 'framer-motion';

const AnimatedIcon = motion(CustomStarIcon);

<AnimatedIcon
  whileHover={{ scale: 1.2, rotate: 15 }}
  transition={{ type: 'spring', stiffness: 300 }}
/>

Такой подход позволяет создавать интерактивные иконки без потери производительности.

Итоговые рекомендации

  • Использовать @mui/icons-material для стандартных иконок.
  • Создавать собственные иконки через SvgIcon для полной кастомизации.
  • Динамически управлять иконками через объекты и маппинги.
  • Применять тему и sx для единого визуального стиля.
  • Оптимизировать импорт для уменьшения размера бандла.
  • Добавлять анимации через CSS или React-библиотеки, чтобы иконки оставались интерактивными и отзывчивыми.

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

Оглавление