LETUNOFF DOCS

Library. SVGR

🧱 Суть

@tailwindcss/vite и vite-plugin-svgr – это плагины для Vite, которые подключаются при необходимости.

  • @tailwindcss/vite – интеграция Tailwind CSS с Vite.
  • vite-plugin-svgr – импорт SVG как React-компонентов.

📦 Проблема

1. Плагин используется, но не установлен

Если в vite.config.ts подключён плагин, которого нет в зависимостях, проект не запустится.

2. Неясно, нужен ли vite-plugin-svgr

Он требуется только при использовании SVG как React-компонентов.

✅ Решение

Устанавливать только те плагины, которые действительно используются в проекте..

💻 Код

Установка:

npm install -D @tailwindcss/vite vite-plugin-svgr

Когда нужен @tailwindcss/vite

Если в vite.config.ts используется:

plugins: [
	react(),
	tailwindcss(),
]

то пакет должен быть установлен.

Когда нужен vite-plugin-svgr

Если SVG импортируется как React-компонент:

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

Частая ошибка

В конфигурации есть:

plugins: [
	react(),
	svgr(),
	tailwindcss(),
]

но соответствующий пакет не установлен.

Результат:

Cannot find module 'vite-plugin-svgr'

Когда vite-plugin-svgr не нужен

Если SVG используется как обычное изображение:

<img src="/logo.svg" />

В этом случае достаточно стандартной обработки файлов Vite.

🎯 Вывод

  • @tailwindcss/vite обязателен при использовании Tailwind через Vite
  • vite-plugin-svgr нужен только для импорта SVG как React-компонентов
  • если плагин подключён в vite.config.ts, он должен быть установлен

🔗 Связано