SVG

SVG — масштабируемый векторный формат, особенно удобный в React благодаря двум способам импорта: как изображение и как React-компонент. Это даёт гибкость: можно либо просто вставить картинку, либо управлять её содержимым программно.

Импорт SVG как изображения

Если вам нужно просто отобразить SVG-файл без изменения его содержимого:

import logo from './logo.svg';

function App() {
  return <img src={logo} alt="Логотип" />;
}

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

Импорт SVG как React-компонента

Для простых иконок или логотипов, которые нужно стилизовать (менять цвет, размер, анимировать), используйте специальный синтаксис:

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

function App() {
  return <Logo fill="blue" width="100" height="40" />;
}

Здесь ReactComponent — это зарезервированное имя, распознаваемое сборщиком. В результате Logo становится полноценным React-компонентом, встроенным в JSX. Это позволяет:

Менять цвет через fill или stroke,
Управлять размерами через пропсы,
Применять CSS-классы или инлайновые стили,
Анимировать отдельные части через JavaScript.

Когда что использовать

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

Как выглядит настройка

В большинстве современных шаблонов (Create React App, Vite с @vitejs/plugin-react) поддержка импорта SVG как компонента включена по умолчанию. Однако если вы настраиваете сборку вручную, потребуется соответствующий лоадер или плагин:

Webpack: используется @svgr/webpack. В конфигурации нужно добавить правило:
```
{
  test: /\.svg$/,
  use: ['@svgr/webpack', 'url-loader']
}
```
Порядок важен: @svgr/webpack обрабатывает импорт с ReactComponent, а url-loader — обычные импорты.
Vite: достаточно установить vite-plugin-svgr:
```
npm install -D vite-plugin-svgr
```
И подключить в vite.config.js:
```
import svgr from 'vite-plugin-svgr';

export default {
  plugins: [svgr()]
};
```
После этого синтаксис import { ReactComponent as Icon } from './icon.svg' будет работать корректно.

Без такой настройки попытка импорта как компонента вызовет ошибку: сборщик не распознает ReactComponent и вернёт только строку с путём.