SVG в React: полное руководство по использованию в 2026 году

Почему SVG‑иконки и иллюстрации обязательны в современных React‑проектах

Веб‑приложения всё чаще требуют масштабируемой графики, которая сохраняет чёткость на экранах любой плотности. SVG (Scalable Vector Graphics) решает эту задачу благодаря векторному представлению: один и тот же файл выглядит одинаково на смартфоне, ноутбуке и 5K‑мониторе.

Помимо масштабируемости, SVG обладает минимальным размером – типичная иконка весит от 500 Б до 2 KB, что значительно меньше, чем набор PNG‑изображений разных разрешений. Поскольку SVG – это XML, его элементы можно стилизовать через CSS, а анимацию реализовать с помощью JavaScript. Это открывает возможность динамически менять цвета, толщину линий и прочие параметры через свойства компонента.

Для доступности важны встроенные теги <title> и <desc>, которые позволяют передать смысловое содержание экранным читалкам. Наконец, если каждый SVG превращён в отдельный React‑компонент, сборщик (Webpack, Vite и т.п.) автоматически вырежет неиспользуемые иконки из финального бандла, что делает проект более лёгким и быстрым.

Разница между SVG‑разметкой и JSX: где происходит «взрыв» терминала

На первый взгляд SVG‑код выглядит как обычный HTML, однако при вставке его в файл .jsx возникают ошибки. Основные причины:

JSX следует правилам JavaScript‑именования – camelCase вместо kebab-case, а также не допускает атрибутов, не относящихся к DOM‑спецификации. Неправильные имена приводят к синтаксическим ошибкам, а отсутствие className ломает стилизацию.

Ручная конверсия SVG в React‑компонент

Если нужно быстро включить одну‑единственную иконку, достаточно выполнить несколько шагов:

1. Экспортировать SVG из дизайн‑инструмента (Figma, Sketch, Illustrator) без лишних метаданных.
2. Удалить атрибуты xmlns, xmlns:xlink и любые id, которые могут конфликтовать при повторном использовании.
3. Преобразовать имена атрибутов в camelCase. Это можно сделать вручную или воспользоваться поиском‑заменой в редакторе.
4. Обернуть SVG в функцию, принимающую props, и передать их в корневой <svg> элемент:

import React from 'react';

const IconExample = ({ width = 24, height = 24, fill = 'currentColor', ...rest }) => (
  <svg
    width={width}
    height={height}
    fill={fill}
    viewBox="0 0 24 24"
    {...rest}
  >
    <path d="M12 2L2 22h20L12 2z" />
  </svg>
);

export default IconExample;

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

Автоматические инструменты: от скриптов до целых пайплайнов

Для больших наборов иконок ручная правка становится непрактичной. Существует несколько подходов к автоматизации:

1. Онлайн‑конвертеры

Сервисы вроде SVGR позволяют загрузить SVG и получить готовый JSX‑компонент. Они автоматически исправляют имена атрибутов, удаляют лишние пространства имён и могут добавить типизацию TypeScript.

2. CLI‑утилиты

@svgr/cli – это пакет, который можно интегрировать в npm‑скрипты:

npx @svgr/cli --icon --replace --out-dir src/components/icons src/assets/svg

Опция --icon задаёт фиксированные width/height в 1em, что упрощает масштабирование через CSS. Параметр --replace заменяет исходные файлы новыми компонентами.

3. Интеграция в сборщик

Для Vite или Webpack можно добавить loader @svgr/webpack. После настройки импортировать SVG как обычный модуль:

import { ReactComponent as Logo } from './logo.svg';

<Logo className="h-8 w-8 text-primary" />

Это позволяет использовать SVG‑файлы напрямую в JSX без предварительной конвертации, а сборщик автоматически применит оптимизацию (SVGO) и tree‑shaking.

4. Генерация типизированных компонентов

При работе с TypeScript полезно генерировать файлы .tsx, где каждый компонент имеет явно указанные свойства width?: string | number, height?: string | number, fill?: string. Это повышает автодополнение в IDE и уменьшает количество ошибок рантайма.

Лучшие практики и оптимизация

• Минификация SVG: перед конвертацией запустите SVGO, чтобы избавиться от ненужных комментариев, пустых групп и скрытых атрибутов.
• Использование currentColor: задавайте fill="currentColor" и stroke="currentColor" в SVG, тогда цвет будет наследоваться от CSS‑класса или свойства color.
• Lazy‑loading: для тяжёлых иллюстраций применяйте динамический импорт:

const HeavyIllustration = React.lazy(() => import('./HeavyIllustration'));

• Адаптивные размеры: задавайте width и height в единицах em или %, чтобы иконка реагировала на шрифтовый размер родителя.
• Тестирование доступности: проверяйте наличие <title> и <desc> в каждой иконке, а также корректность aria-hidden там, где иконка декоративна.

Соблюдение этих рекомендаций позволяет превращать SVG‑файлы в полностью интегрированные, лёгкие и переиспользуемые React‑компоненты, которые работают без ошибок и поддерживают современные требования к производительности и доступности.