svg-sprites/docs/ru/guides/react-vite.md

# SVG-спрайт для React на Vite

Инструкция по быстрому созданию SVG-спрайта в React-приложении на Vite.

## Генерация спрайта

Выберите папку для спрайта. В примере используется `assets/app-icons`, а исходные SVG, включая используемый ниже `check.svg`, находятся в `assets/svg-icons`.

Создайте конфиг `assets/app-icons/svg-sprite.config.json`:

```json
{
  "mode": "react@vite",
  "name": "app",
  "input": "../svg-icons/**/*.svg"
}
```

Путь в `input` считается от папки с конфигом.

Добавьте команды генерации в `package.json`. Сгенерированные файлы по умолчанию исключены из Git, поэтому `predev` и `prebuild` пересобирают спрайт перед каждым запуском и сборкой:

```json
{
  "scripts": {
    "sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
    "predev": "npm run sprites",
    "dev": "vite",
    "prebuild": "npm run sprites",
    "build": "tsc --noEmit && vite build"
  }
}
```

## Использование спрайта

Значение `name: "app"` создаёт React-компонент `AppIcon`.

Создайте точку входа `assets/app-icons/index.ts`:

```ts
export * from './.svg-sprite/index.js'
```

Используйте компонент в приложении:

```tsx
import { AppIcon } from '../assets/app-icons'

export function SaveIcon() {
  return (
    <AppIcon
      icon="check"
      width={24}
      height={24}
      role="img"
      aria-label="Готово"
      style={{
        color: '#334155',
        '--icon-color-2': '#f59e0b',
      }}
    />
  )
}
```

Свойство `icon` принимает имена исходных SVG без расширения. Монохромная иконка наследует `color`, а цвета многоцветной переопределяются через `--icon-color-N`.

Vite сам подключает стили компонента и добавляет `sprite.svg` в итоговую сборку.

## Дебаг и превью

Viewer показывает все иконки на одной странице, позволяет проверить их отображение, изменить цвета и посмотреть связанные CSS-переменные. Он нужен только для разработки и устанавливается отдельно:

```bash
npm install --save-dev @gromlab/svg-sprites
```

Создайте `svg-sprite.html` в корне проекта:

```html
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>Иконки проекта</title>
  </head>
  <body>
    <!-- React-корень Viewer для дебага и превью SVG-спрайта -->
    <div id="svg-sprite-viewer"></div>

    <!-- Подключение создаваемого ниже скрипта дебаггера -->
    <script type="module" src="/src/svg-sprite-debug.tsx"></script>
  </body>
</html>
```

Создайте `src/svg-sprite-debug.tsx`:

```tsx
import { createRoot } from 'react-dom/client'
import { SpriteViewer } from '@gromlab/svg-sprites/react'

const sources = [
  () => import('../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'),
] as const

createRoot(document.getElementById('svg-sprite-viewer')!).render(
  <SpriteViewer sources={sources} title="Иконки проекта" />,
)
```

Запустите `npm run dev` и откройте `/svg-sprite.html`.

Стандартная production-сборка Vite использует только `index.html` и не включает страницу Viewer.
-												sync

											
										
										
											2026-07-15 12:27:46 +03:00
+								# SVG-спрайт для React на Vite
-												sync

											
										
										
											2026-07-14 16:11:39 +03:00
-												sync

											
										
										
											2026-07-15 12:27:46 +03:00
+								Инструкция по быстрому созданию SVG-спрайта в React-приложении на Vite.
-												sync

											
										
										
											2026-07-14 16:11:39 +03:00
-												sync

											
										
										
											2026-07-15 12:27:46 +03:00
+								## Генерация спрайта
-												sync

											
										
										
											2026-07-14 16:11:39 +03:00
-												style: Синхронизировать английскую документацию

											
										
										
											2026-07-15 13:41:24 +03:00
+								Выберите папку для спрайта. В примере используется `assets/app-icons`, а исходные SVG, включая используемый ниже `check.svg`, находятся в `assets/svg-icons`.
-												sync

											
										
										
											2026-07-14 16:11:39 +03:00
-												sync

											
										
										
											2026-07-15 12:27:46 +03:00
+								Создайте конфиг `assets/app-icons/svg-sprite.config.json`:
-												sync

											
										
										
											2026-07-14 16:11:39 +03:00
-												sync

											
										
										
											2026-07-15 12:27:46 +03:00
+								```json
 								{
 								  "mode": "react@vite",
 								  "name": "app",
 								  "input": "../svg-icons/**/*.svg"
-												sync

											
										
										
											2026-07-14 16:11:39 +03:00
+								}
 								```
-												sync

											
										
										
											2026-07-15 12:27:46 +03:00
+								Путь в `input` считается от папки с конфигом.
-												sync

											
										
										
											2026-07-14 16:11:39 +03:00
-												sync

											
										
										
											2026-07-15 12:27:46 +03:00
+								Добавьте команды генерации в `package.json`. Сгенерированные файлы по умолчанию исключены из Git, поэтому `predev` и `prebuild` пересобирают спрайт перед каждым запуском и сборкой:
-												sync

											
										
										
											2026-07-14 16:11:39 +03:00
 								```json
 								{
 								  "scripts": {
-												sync

											
										
										
											2026-07-15 12:27:46 +03:00
+								    "sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
 								    "predev": "npm run sprites",
 								    "dev": "vite",
 								    "prebuild": "npm run sprites",
 								    "build": "tsc --noEmit && vite build"
-												sync

											
										
										
											2026-07-14 16:11:39 +03:00
+								  }
 								}
 								```
-												sync

											
										
										
											2026-07-15 12:27:46 +03:00
+								## Использование спрайта
 								Значение `name: "app"` создаёт React-компонент `AppIcon`.
-												sync

											
										
										
											2026-07-14 16:11:39 +03:00
-												sync

											
										
										
											2026-07-15 12:27:46 +03:00
+								Создайте точку входа `assets/app-icons/index.ts`:
-												sync

											
										
										
											2026-07-14 16:11:39 +03:00
 								```ts
 								export * from './.svg-sprite/index.js'
 								```
-												sync

											
										
										
											2026-07-15 12:27:46 +03:00
+								Используйте компонент в приложении:
-												sync

											
										
										
											2026-07-14 16:11:39 +03:00
 								```tsx
-												sync

											
										
										
											2026-07-15 12:27:46 +03:00
+								import { AppIcon } from '../assets/app-icons'
-												sync

											
										
										
											2026-07-14 16:11:39 +03:00
-												sync

											
										
										
											2026-07-15 12:27:46 +03:00
+								export function SaveIcon() {
-												sync

											
										
										
											2026-07-14 16:11:39 +03:00
+								  return (
-												sync

											
										
										
											2026-07-15 12:27:46 +03:00
+								    <AppIcon
 								      icon="check"
 								      width={24}
 								      height={24}
 								      role="img"
 								      aria-label="Готово"
 								      style={{
 								        color: '#334155',
 								        '--icon-color-2': '#f59e0b',
 								      }}
 								    />
-												sync

											
										
										
											2026-07-14 16:11:39 +03:00
+								  )
 								}
 								```
-												sync

											
										
										
											2026-07-15 12:27:46 +03:00
+								Свойство `icon` принимает имена исходных SVG без расширения. Монохромная иконка наследует `color`, а цвета многоцветной переопределяются через `--icon-color-N`.
 								Vite сам подключает стили компонента и добавляет `sprite.svg` в итоговую сборку.
-												sync

											
										
										
											2026-07-14 16:11:39 +03:00
-												sync

											
										
										
											2026-07-15 12:27:46 +03:00
+								## Дебаг и превью
-												sync

											
										
										
											2026-07-14 16:11:39 +03:00
-												sync

											
										
										
											2026-07-15 12:27:46 +03:00
+								Viewer показывает все иконки на одной странице, позволяет проверить их отображение, изменить цвета и посмотреть связанные CSS-переменные. Он нужен только для разработки и устанавливается отдельно:
-												sync

											
										
										
											2026-07-14 16:11:39 +03:00
 								```bash
 								npm install --save-dev @gromlab/svg-sprites
 								```
-												sync

											
										
										
											2026-07-15 12:27:46 +03:00
+								Создайте `svg-sprite.html` в корне проекта:
 								```html
 								<!doctype html>
 								<html lang="ru">
 								  <head>
 								    <meta charset="UTF-8">
 								    <title>Иконки проекта</title>
 								  </head>
 								  <body>
 								    <!-- React-корень Viewer для дебага и превью SVG-спрайта -->
 								    <div id="svg-sprite-viewer"></div>
 								    <!-- Подключение создаваемого ниже скрипта дебаггера -->
 								    <script type="module" src="/src/svg-sprite-debug.tsx"></script>
 								  </body>
 								</html>
 								```
 								Создайте `src/svg-sprite-debug.tsx`:
-												sync

											
										
										
											2026-07-14 16:11:39 +03:00
 								```tsx
-												sync

											
										
										
											2026-07-15 12:27:46 +03:00
+								import { createRoot } from 'react-dom/client'
-												sync

											
										
										
											2026-07-14 16:11:39 +03:00
+								import { SpriteViewer } from '@gromlab/svg-sprites/react'
 								const sources = [
-												sync

											
										
										
											2026-07-15 12:27:46 +03:00
+								  () => import('../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'),
-												sync

											
										
										
											2026-07-14 16:11:39 +03:00
+								] as const
-												sync

											
										
										
											2026-07-15 12:27:46 +03:00
+								createRoot(document.getElementById('svg-sprite-viewer')!).render(
 								  <SpriteViewer sources={sources} title="Иконки проекта" />,
 								)
-												sync

											
										
										
											2026-07-14 16:11:39 +03:00
+								```
-												sync

											
										
										
											2026-07-15 12:27:46 +03:00
+								Запустите `npm run dev` и откройте `/svg-sprite.html`.
-												sync

											
										
										
											2026-07-14 16:11:39 +03:00
-												sync

											
										
										
											2026-07-15 12:27:46 +03:00
+								Стандартная production-сборка Vite использует только `index.html` и не включает страницу Viewer.