SvgIcon компонент

Компонент SvgIcon в библиотеке MUI предназначен для работы с векторными иконками на основе SVG. Он предоставляет удобный способ создавать настраиваемые иконки, интегрируя их в дизайн системы MUI с полной поддержкой стилизации, размеров и цветовых тем.

Основы использования

Компонент импортируется из пакета @mui/material:

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

Для создания собственной иконки используется следующий синтаксис:

function HomeIcon(props) {
  return (
    
      
    
  );
}

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

  • Внутри SvgIcon всегда располагается элемент (или несколько , , ), который определяет форму иконки.
  • Все переданные props (например, color, fontSize, sx) автоматически применяются к иконке.
  • По умолчанию размер иконки соответствует шрифтовому размеру (1em), что облегчает масштабирование относительно текста.

Настройка цвета

Компонент поддерживает стандартные цвета MUI:

Особенности работы с цветом:

  • color="inherit" позволяет наследовать цвет от родительского элемента.
  • Цвета определяются через тему MUI, что обеспечивает согласованность интерфейса.
  • Можно использовать собственные цвета через sx:

Размеры и масштабирование

Компонент поддерживает атрибут fontSize:

Также доступно более точное управление через sx:

Примечание: SvgIcon масштабируется относительно текста по умолчанию, поэтому размер в em или пикселях легко интегрируется с типографикой.

Использование с Material Icons

MUI предоставляет готовые иконки в виде отдельного пакета @mui/icons-material. Они построены на базе SvgIcon:

import HomeIcon from '@mui/icons-material/Home';

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

  • Возможность быстро подключать тысячи готовых иконок.
  • Полная поддержка темизации и стилей MUI.
  • Совместимость с компонентами типа Button, IconButton, ListItemIcon.

Пользовательские иконки

Для создания уникальных иконок можно комбинировать несколько :

function CustomIcon(props) {
  return (
    
      
      
      
    
  );
}

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

  • Можно использовать любые SVG-элементы (circle, rect, polygon, line, g).
  • Поддерживается наследование цвета через currentColor.
  • Сложные иконки могут содержать группировку и трансформации (transform).

Стилизация через sx и styled

Пример с sx:

Пример с styled:

import { styled } from '@mui/material/styles';

const StyledIcon = styled(SvgIcon)(({ theme }) => ({
  color: theme.palette.secondary.main,
  fontSize: 50,
  '&:hover': {
    color: theme.palette.primary.main,
  },
}));

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

  • Полная интеграция с системой тем.
  • Возможность добавления анимаций и псевдоклассов.
  • Разделение логики и визуальной стилизации для повторного использования.

Анимация и взаимодействие

SvgIcon может быть обернут в интерактивные компоненты, например IconButton:

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

Анимацию можно добавлять через CSS или библиотеку framer-motion:

import { motion } from 'framer-motion';

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

  • Использовать готовые иконки @mui/icons-material, чтобы не создавать SVG вручную для каждого случая.
  • Группировать одинаковые иконки в отдельный компонент для повторного использования.
  • Избегать сложных с тысячами точек для уменьшения нагрузки на рендеринг.

Интеграция с темой

SvgIcon полностью поддерживает ThemeProvider MUI. Цвета и размеры иконок автоматически соответствуют теме:

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

const theme = createTheme({
  palette: {
    primary: { main: '#1976d2' },
    secondary: { main: '#dc004e' },
  },
});

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

  • Использовать color="primary" и color="secondary" для согласованности интерфейса.
  • При создании пользовательских иконок стараться использовать currentColor для элементов SVG, чтобы они наследовали цвет от темы или родителя.
Оглавление