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

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

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

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

Выберите каталог для будущего SVG-спрайта, например `assets/app-icons`, и создайте в нём `svg-sprite.config.json`. В `input` укажите путь к существующим SVG относительно файла конфигурации. Перемещать или копировать иконки не требуется.

Пример конфига:

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

Пакет не нужно добавлять в зависимости проекта: генерация запускается через `npx`.

Добавьте команды генерации в `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="icon-name"
      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
-												feat: добавить поддержку 20 framework exact modes

Добавлены exact modes:
- vue@vite и vue@webpack
- nuxt@vite и nuxt@webpack
- svelte@vite, svelte@webpack и sveltekit@vite
- angular@application и angular@webpack
- astro@vite
- solid@vite, solid@webpack и solid-start@vite
- preact@vite и preact@webpack
- qwik@vite
- lit@vite и lit@webpack
- alpine@vite и alpine@webpack

Для каждого mode реализованы изолированный adapter, нативный
framework-компонент, declarations, manifest, CSS и внешний asset URL.

Добавлены production integration-стенды с генерацией, typecheck,
сборкой и Playwright-проверкой рендера спрайта и Viewer.

Обновлены Viewer, RU/EN-гайды, README, technical reference и AI skills.
Итоговая матрица включает 29 exact modes.

Проверки:
- 48 unit-тестов
- 29 integration E2E-тестов

											
										
										
											2026-07-15 16:56:44 +03:00
+								Выберите каталог для будущего SVG-спрайта, например `assets/app-icons`, и создайте в нём `svg-sprite.config.json`. В `input` укажите путь к существующим SVG относительно файла конфигурации. Перемещать или копировать иконки не требуется.
-												sync

											
										
										
											2026-07-14 16:11:39 +03:00
-												feat: добавить поддержку 20 framework exact modes

Добавлены exact modes:
- vue@vite и vue@webpack
- nuxt@vite и nuxt@webpack
- svelte@vite, svelte@webpack и sveltekit@vite
- angular@application и angular@webpack
- astro@vite
- solid@vite, solid@webpack и solid-start@vite
- preact@vite и preact@webpack
- qwik@vite
- lit@vite и lit@webpack
- alpine@vite и alpine@webpack

Для каждого mode реализованы изолированный adapter, нативный
framework-компонент, declarations, manifest, CSS и внешний asset URL.

Добавлены production integration-стенды с генерацией, typecheck,
сборкой и Playwright-проверкой рендера спрайта и Viewer.

Обновлены Viewer, RU/EN-гайды, README, technical reference и AI skills.
Итоговая матрица включает 29 exact modes.

Проверки:
- 48 unit-тестов
- 29 integration E2E-тестов

											
										
										
											2026-07-15 16:56:44 +03:00
+								Пример конфига:
-												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
+								}
 								```
-												feat: добавить поддержку 20 framework exact modes

Добавлены exact modes:
- vue@vite и vue@webpack
- nuxt@vite и nuxt@webpack
- svelte@vite, svelte@webpack и sveltekit@vite
- angular@application и angular@webpack
- astro@vite
- solid@vite, solid@webpack и solid-start@vite
- preact@vite и preact@webpack
- qwik@vite
- lit@vite и lit@webpack
- alpine@vite и alpine@webpack

Для каждого mode реализованы изолированный adapter, нативный
framework-компонент, declarations, manifest, CSS и внешний asset URL.

Добавлены production integration-стенды с генерацией, typecheck,
сборкой и Playwright-проверкой рендера спрайта и Viewer.

Обновлены Viewer, RU/EN-гайды, README, technical reference и AI skills.
Итоговая матрица включает 29 exact modes.

Проверки:
- 48 unit-тестов
- 29 integration E2E-тестов

											
										
										
											2026-07-15 16:56:44 +03:00
+								Пакет не нужно добавлять в зависимости проекта: генерация запускается через `npx`.
-												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
-												feat: добавить поддержку 20 framework exact modes

Добавлены exact modes:
- vue@vite и vue@webpack
- nuxt@vite и nuxt@webpack
- svelte@vite, svelte@webpack и sveltekit@vite
- angular@application и angular@webpack
- astro@vite
- solid@vite, solid@webpack и solid-start@vite
- preact@vite и preact@webpack
- qwik@vite
- lit@vite и lit@webpack
- alpine@vite и alpine@webpack

Для каждого mode реализованы изолированный adapter, нативный
framework-компонент, declarations, manifest, CSS и внешний asset URL.

Добавлены production integration-стенды с генерацией, typecheck,
сборкой и Playwright-проверкой рендера спрайта и Viewer.

Обновлены Viewer, RU/EN-гайды, README, technical reference и AI skills.
Итоговая матрица включает 29 exact modes.

Проверки:
- 48 unit-тестов
- 29 integration E2E-тестов

											
										
										
											2026-07-15 16:56:44 +03:00
+								      icon="icon-name"
-												sync

											
										
										
											2026-07-15 12:27:46 +03:00
+								      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.