Иконки из внешних библиотек

MUI предоставляет встроенную библиотеку иконок (@mui/icons-material), но часто возникает необходимость использовать сторонние иконки, например, из Font Awesome, Material Design Icons, Feather или других библиотек SVG- и React-компонентов. MUI позволяет интегрировать такие иконки в компоненты без потери стилистической целостности интерфейса.

Подключение сторонних иконок через npm

Наиболее удобный способ использования внешних иконок — установка соответствующего пакета через npm или yarn. Например, для Font Awesome:

npm install @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons

Или для Feather Icons:

npm install react-feather

После установки иконки импортируются как React-компоненты и могут использоваться в JSX:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

function Example() {
  return <FontAwesomeIcon icon={faCoffee} size="2x" />;
}
import { Coffee } from 'react-feather';

function Example() {
  return <Coffee size={24} color="blue" />;
}

Интеграция внешних SVG с компонентом SvgIcon

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

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

function CustomIcon(props) {
  return (
    <SvgIcon {...props}>
      <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
    </SvgIcon>
  );
}

После этого CustomIcon можно использовать как любую иконку MUI:

<CustomIcon color="primary" fontSize="large" />

Ключевые возможности через SvgIcon:

  • Поддержка цвета через проп color (primary, secondary, action, disabled, error, inherit).
  • Масштабирование через fontSize (small, medium, large, inherit).
  • Стилизация через sx и обычные CSS-классы.

Преобразование SVG из внешних источников

Для использования иконок из сторонних коллекций SVG необходимо привести их к структуре, совместимой с React. Основные шаги:

  1. Получение SVG-файла.
  2. Удаление ненужных атрибутов (width, height, fill, stroke, xmlns) для совместимости с SvgIcon.
  3. Замена <svg> на <path> или <g> внутри компонента SvgIcon.
  4. Подключение и использование через JSX.

Пример преобразования иконки Material Design в компонент MUI:

Исходный SVG:

<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
  <path d="M12 2L2 22h20L12 2z"/>
</svg>

Компонент MUI:

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

function TriangleIcon(props) {
  return (
    <SvgIcon {...props}>
      <path d="M12 2L2 22h20L12 2z" />
    </SvgIcon>
  );
}

Стилизация сторонних иконок в MUI

Сторонние иконки можно стилизовать в стиле MUI через систему sx:

<TriangleIcon sx={{ color: 'secondary.main', fontSize: 40 }} />

Также возможно использование темы для динамического изменения цвета и размера:

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

function ThemedIcon() {
  const theme = useTheme();
  return <TriangleIcon sx={{ color: theme.palette.error.main }} />;
}

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

Иконки из внешних библиотек интегрируются в компоненты MUI точно так же, как встроенные:

import Button from '@mui/material/Button';
import { Coffee } from 'react-feather';

<Button variant="contained" startIcon={<Coffee />}>
  Кофе
</Button>

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

  • startIcon и endIcon поддерживают любые React-компоненты.
  • Размер и цвет иконки можно контролировать через пропсы компонента или sx.

Практические рекомендации

  • Для большого проекта рекомендуется стандартизировать иконки, чтобы не смешивать стили разных библиотек.
  • Все SVG следует оптимизировать (например, через svgo) перед интеграцией для уменьшения размера пакета.
  • Использование SvgIcon обеспечивает единый API и поддержку темы MUI, даже если иконки берутся из сторонних источников.
  • В кнопках, меню и таблицах лучше использовать компоненты-обертки (IconButton, Button) для сохранения доступности и правильного взаимодействия с клавиатурой.

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

Оглавление