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

# SVG-спрайт для Vite без фреймворка

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

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

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

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

```json
{
  "mode": "standalone@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": "vite build"
  }
}
```

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

Значение `name: "app"` создаёт элемент `<app-icon>`.

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

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

Зарегистрируйте элемент в `src/main.ts`:

```ts
import { defineAppIconElement } from '../assets/app-icons'
import './style.css'

defineAppIconElement()
```

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

```html
<app-icon icon="check" role="img" aria-label="Готово"></app-icon>
```

Файл `check.svg` доступен как `icon="check"`. Размер и цвета настраиваются через CSS:

```css
app-icon {
  font-size: 24px;
  color: #334155;
  --icon-color-2: #f59e0b;
}
```

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

Vite сам добавит `sprite.svg` в итоговую сборку. Копировать его в `public` не нужно.

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

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>
    <!-- Компонент Viewer для дебага и превью SVG-спрайта -->
    <gromlab-sprite-viewer viewer-title="Иконки проекта"></gromlab-sprite-viewer>

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

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

```ts
import '@gromlab/svg-sprites/viewer/element'
import type { SpriteViewerElement } from '@gromlab/svg-sprites/viewer'
import spriteManifest from '../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'

const viewer = document.querySelector<SpriteViewerElement>('gromlab-sprite-viewer')!
viewer.sources = [spriteManifest]
```

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

Viewer не требуется для работы `<app-icon>` и не подключается к основному коду приложения.
-												sync

											
										
										
											2026-07-15 12:27:46 +03:00
+								# SVG-спрайт для Vite без фреймворка
-												sync

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

											
										
										
											2026-07-15 12:27:46 +03:00
+								Инструкция по быстрому созданию SVG-спрайта в приложении на 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": "standalone@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": "vite build"
-												sync

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

											
										
										
											2026-07-15 12:27:46 +03:00
+								## Использование спрайта
 								Значение `name: "app"` создаёт элемент `<app-icon>`.
-												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
+								Зарегистрируйте элемент в `src/main.ts`:
-												sync

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

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

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

											
										
										
											2026-07-15 12:27:46 +03:00
+								defineAppIconElement()
-												sync

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

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

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

											
										
										
											2026-07-15 12:27:46 +03:00
+								```html
 								<app-icon icon="check" role="img" aria-label="Готово"></app-icon>
-												sync

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

											
										
										
											2026-07-15 12:27:46 +03:00
+								Файл `check.svg` доступен как `icon="check"`. Размер и цвета настраиваются через CSS:
-												sync

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

											
										
										
											2026-07-15 12:27:46 +03:00
+								app-icon {
-												sync

											
										
										
											2026-07-14 16:11:39 +03:00
+								  font-size: 24px;
 								  color: #334155;
 								  --icon-color-2: #f59e0b;
 								}
 								```
-												sync

											
										
										
											2026-07-15 12:27:46 +03:00
+								Монохромная иконка наследует `color`, а цвета многоцветной иконки переопределяются через `--icon-color-N`. Нужные переменные показывает Viewer.
 								Vite сам добавит `sprite.svg` в итоговую сборку. Копировать его в `public` не нужно.
-												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>
 								    <!-- Компонент Viewer для дебага и превью SVG-спрайта -->
 								    <gromlab-sprite-viewer viewer-title="Иконки проекта"></gromlab-sprite-viewer>
 								    <!-- Подключение создаваемого ниже скрипта дебаггера -->
 								    <script type="module" src="/src/svg-sprite-debug.ts"></script>
 								  </body>
 								</html>
 								```
 								Создайте `src/svg-sprite-debug.ts`:
-												sync

											
										
										
											2026-07-14 16:11:39 +03:00
 								```ts
 								import '@gromlab/svg-sprites/viewer/element'
 								import type { SpriteViewerElement } from '@gromlab/svg-sprites/viewer'
-												sync

											
										
										
											2026-07-15 12:27:46 +03:00
+								import spriteManifest from '../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'
-												sync

											
										
										
											2026-07-14 16:11:39 +03:00
 								const viewer = document.querySelector<SpriteViewerElement>('gromlab-sprite-viewer')!
 								viewer.sources = [spriteManifest]
 								```
-												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
+								Viewer не требуется для работы `<app-icon>` и не подключается к основному коду приложения.