SVG в ассетах

Веб-разработчики часто используют SVG (Scalable Vector Graphics) для создания иконок и других элементов интерфейса — это удобный и гибкий формат. Но если вставлять SVG как обычную картинку через <img>, многие плюсы этого формата теряются.

Через <img> нельзя удобно менять цвета, размеры или добавлять интерактивность. SVG становится просто "картинкой" и перестаёт быть гибким инструментом для кастомизации в React-приложениях.

import iceIcon from '../icons/ice.svg';

<img src={iceIcon} width={24} height={24} alt='Ice icon' />;

Фундаментальные проблемы статического подхода:

• Утрата масштабируемости: SVG-изображения, интегрированные как статические ресурсы, не способны динамически адаптироваться к вариативным размерам экрана и различной плотности пикселей устройств.

• Критические ограничения стилизации: Полная невозможность применения CSS-стилей к внутренним элементам SVG через внешние таблицы стилей, что исключает динамическое изменение внешнего вида.

• Отсутствие интерактивности: Статические SVG-элементы не поддерживают обработку пользовательских событий и динамическое изменение состояния компонентов.

Трансформация SVG-элементов в полноценные React-компоненты открывает обширные возможности для создания гибких, переиспользуемых и высокопроизводительных графических элементов:

import type { ComponentProps } from 'react';

type IconProps = ComponentProps<'svg'>;

const IceIcon = (props: IconProps) => (
  <svg viewBox='0 0 32 32' {...props}>
    <path d='M16 2L20 10L28 8L22 16L28 24L20 22L16 30L12 22L4 24L10 16L4 8L12 10Z' />
  </svg>
);

<IceIcon size={32} color='#3b82f6' className='cursor-pointer hover:scale-110' />;

Автоматизация для импортов

Для автоматического преобразования SVG в React‑компоненты можно использовать SVGR. Библиотека имеет CLI для перевода ваших SVG в React‑компоненты, а также интеграции с любимыми билдерами, чтобы получать компонент сразу при импорте:

import IceIcon from '../icons/logo.svg';

<IceIcon width={24} height={24} fill='currentColor' />;

SVG можно оптимизировать, удалив лишние атрибуты и оптимизировав path с помощью онлайн‑инструментов. Важно задавать иконкам семантически верные названия и корректный viewBox. Правильная работа с SVG в веб‑приложениях требует понимания их природы как векторной графики. Используя SVG как компоненты, мы получаем все преимущества векторной графики и возможности для кастомизации.

Спрайты

Если у вас много SVG‑иконок на одной странице, использование спрайтов может значительно улучшить производительность. SVG‑спрайт — это один файл, содержащий все иконки, которые можно переиспользовать.

<svg style="display: none;">
  <symbol id="iceIcon" viewBox="0 0 24 24">// ice icon</symbol>
</svg>

Его можно добавить напрямую в ваш HTML или подключить отдельным файлом.

import type { ComponentProps } from 'react';

const IceIcon = (props: ComponentProps<'svg'>) => (
  <svg height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' {...props}>
    <use href='#iceIcon' />
  </svg>
);