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-тестов

docs/en/guides/README.md

@@ -5,6 +5,26 @@
 - `standalone@webpack`: [standalone with Webpack](standalone-webpack.md)
 - `react@vite`: [React with Vite](react-vite.md)
 - `react@webpack`: [React with Webpack](react-webpack.md)
+- `vue@vite`: [Vue with Vite](vue-vite.md)
+- `vue@webpack`: [Vue with Webpack](vue-webpack.md)
+- `nuxt@vite`: [Nuxt with Vite](nuxt-vite.md)
+- `nuxt@webpack`: [Nuxt with Webpack](nuxt-webpack.md)
+- `svelte@vite`: [Svelte with Vite](svelte-vite.md)
+- `svelte@webpack`: [Svelte with Webpack](svelte-webpack.md)
+- `sveltekit@vite`: [SvelteKit with Vite](sveltekit-vite.md)
+- `angular@application`: [Angular application builder](angular-application.md)
+- `angular@webpack`: [Angular with Webpack](angular-webpack.md)
+- `astro@vite`: [Astro with Vite](astro-vite.md)
+- `solid@vite`: [Solid with Vite](solid-vite.md)
+- `solid@webpack`: [Solid with Webpack](solid-webpack.md)
+- `solid-start@vite`: [SolidStart with Vite](solid-start-vite.md)
+- `preact@vite`: [Preact with Vite](preact-vite.md)
+- `preact@webpack`: [Preact with Webpack](preact-webpack.md)
+- `qwik@vite`: [Qwik with Vite](qwik-vite.md)
+- `lit@vite`: [Lit with Vite](lit-vite.md)
+- `lit@webpack`: [Lit with Webpack](lit-webpack.md)
+- `alpine@vite`: [Alpine.js with Vite](alpine-vite.md)
+- `alpine@webpack`: [Alpine.js with Webpack](alpine-webpack.md)
 - `next@app/turbopack`: [App Router with Turbopack](next-app-turbopack.md)
 - `next@app/webpack`: [App Router with Webpack](next-app-webpack.md)
 - `next@pages/turbopack`: [Pages Router with Turbopack](next-pages-turbopack.md)

docs/en/guides/alpine-vite.md

@@ -0,0 +1,91 @@
+# SVG Sprite for Alpine.js with Vite
+
+A quick guide to creating an SVG sprite in an Alpine.js application built with Vite.
+
+## Generate the sprite
+
+Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
+
+```json
+{
+  "mode": "alpine@vite",
+  "name": "app",
+  "input": "../svg-icons/**/*.svg"
+}
+```
+
+The generator does not need to be added to the application dependencies: run it through `npx`.
+
+Add generation before development and production builds:
+
+```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"
+  }
+}
+```
+
+## Use the sprite
+
+The value `name: "app"` creates the Alpine plugin `appAlpinePlugin`, the `x-app-icon` directive, and the `$appIconHref` magic.
+
+Create `assets/app-icons/index.js`:
+
+```js
+export * from './.svg-sprite/index.js'
+```
+
+Register the generated plugin before starting Alpine:
+
+```js
+import Alpine from 'alpinejs'
+import { appAlpinePlugin } from '../assets/app-icons/index.js'
+
+Alpine.plugin(appAlpinePlugin)
+Alpine.start()
+```
+
+Use the reactive directive on an SVG element:
+
+```html
+<svg
+  x-data="{ iconName: 'icon-name' }"
+  x-app-icon="iconName"
+  role="img"
+  aria-label="Done"
+  style="width:24px;height:24px;color:#334155;--icon-color-2:#f59e0b"
+></svg>
+```
+
+The directive expression resolves to a source SVG file name without the extension. A monochrome icon inherits `color`; override multicolor icon layers with `--icon-color-N`. Vite loads the generated CSS and emits `sprite.svg` as a separate production asset.
+
+## Debug and preview
+
+Viewer displays all icons on one page and is only needed during development. Install it separately:
+
+```bash
+npm install --save-dev @gromlab/svg-sprites
+```
+
+Add Viewer to a development page:
+
+```html
+<gromlab-sprite-viewer viewer-title="Project icons"></gromlab-sprite-viewer>
+<script type="module" src="/src/svg-sprite-debug.js"></script>
+```
+
+Create `src/svg-sprite-debug.js`:
+
+```js
+import '@gromlab/svg-sprites/viewer/element'
+import spriteManifest from '../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'
+
+document.querySelector('gromlab-sprite-viewer').sources = [spriteManifest]
+```
+
+Run `npm run dev` and open the development page. Viewer is independent from the Alpine plugin.

docs/en/guides/alpine-webpack.md

@@ -0,0 +1,103 @@
+# SVG Sprite for Alpine.js with Webpack 5
+
+A quick guide to creating an SVG sprite in an Alpine.js application built with Webpack 5.
+
+## Generate the sprite
+
+Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
+
+```json
+{
+  "mode": "alpine@webpack",
+  "name": "app",
+  "input": "../svg-icons/**/*.svg"
+}
+```
+
+The generator does not need to be added to the application dependencies: run it through `npx`.
+
+Add generation before development and production builds:
+
+```json
+{
+  "scripts": {
+    "sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
+    "predev": "npm run sprites",
+    "dev": "webpack serve --mode development",
+    "prebuild": "npm run sprites",
+    "build": "webpack --mode production"
+  }
+}
+```
+
+## Use the sprite
+
+The value `name: "app"` creates the Alpine plugin `appAlpinePlugin`, the `x-app-icon` directive, and the `$appIconHref` magic.
+
+Generated Alpine CSS is imported with the `?inline` query. Add an Asset Module rule to `webpack.config.js`:
+
+```js
+export default {
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        resourceQuery: /inline/,
+        type: 'asset/source',
+      },
+    ],
+  },
+}
+```
+
+Create `assets/app-icons/index.js`:
+
+```js
+export * from './.svg-sprite/index.js'
+```
+
+Register the generated plugin before starting Alpine:
+
+```js
+import Alpine from 'alpinejs'
+import { appAlpinePlugin } from '../assets/app-icons/index.js'
+
+Alpine.plugin(appAlpinePlugin)
+Alpine.start()
+```
+
+Use the reactive directive on an SVG element:
+
+```html
+<svg
+  x-data="{ iconName: 'icon-name' }"
+  x-app-icon="iconName"
+  role="img"
+  aria-label="Done"
+  style="width:24px;height:24px;color:#334155;--icon-color-2:#f59e0b"
+></svg>
+```
+
+The directive expression resolves to a source SVG file name without the extension. A monochrome icon inherits `color`; override multicolor icon layers with `--icon-color-N`. Webpack 5 emits `sprite.svg` as a separate production asset.
+
+## Debug and preview
+
+Viewer displays all icons on one page and is only needed during development. Install it separately:
+
+```bash
+npm install --save-dev @gromlab/svg-sprites
+```
+
+Add Viewer to a development entry:
+
+```js
+import '@gromlab/svg-sprites/viewer/element'
+import spriteManifest from '../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'
+
+const viewer = document.createElement('gromlab-sprite-viewer')
+viewer.viewerTitle = 'Project icons'
+viewer.sources = [spriteManifest]
+document.body.append(viewer)
+```
+
+Include this entry only in development. Viewer is independent from the Alpine plugin.

docs/en/guides/angular-application.md

@@ -0,0 +1,94 @@
+# SVG Sprite for Angular with the Application Builder
+
+A quick guide to creating an SVG sprite in an Angular application built with `@angular/build:application`.
+
+## Generate the sprite
+
+Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
+
+```json
+{
+  "mode": "angular@application",
+  "name": "app",
+  "input": "../svg-icons/**/*.svg"
+}
+```
+
+The package does not need to be a project dependency. Run generation through `npx` before development and production builds:
+
+```json
+{
+  "scripts": {
+    "sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
+    "prestart": "npm run sprites",
+    "start": "ng serve",
+    "prebuild": "npm run sprites",
+    "build": "ng build"
+  }
+}
+```
+
+The application builder emits imported SVG files when its file loader is enabled. Add this option to the build target in `angular.json`:
+
+```json
+{
+  "builder": "@angular/build:application",
+  "options": {
+    "loader": { ".svg": "file" }
+  }
+}
+```
+
+## Use the sprite
+
+Create `assets/app-icons/index.ts`:
+
+```ts
+export * from './.svg-sprite/index'
+```
+
+Import the generated standalone component. The value `name: "app"` creates `AppIcon` and the selector `app-icon`:
+
+```ts
+import { Component } from '@angular/core'
+import { AppIcon } from '../assets/app-icons'
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [AppIcon],
+  template: `
+    <app-icon
+      icon="icon-name"
+      role="img"
+      aria-label="Done"
+      style="width: 24px; height: 24px; color: #334155; --icon-color-2: #f59e0b"
+    />
+  `,
+})
+export class AppComponent {}
+```
+
+The `icon` input is typed from source file names. Monochrome icons inherit `color`; use `--icon-color-N` for individual colors.
+
+## Debug and preview
+
+Viewer is optional and only needed during development:
+
+```bash
+npm install --save-dev @gromlab/svg-sprites
+```
+
+Import `@gromlab/svg-sprites/viewer/element`, add `CUSTOM_ELEMENTS_SCHEMA`, and place `<gromlab-sprite-viewer [sources]="viewerSources" />` in the template. Load the generated manifest while omitting framework-only usage metadata:
+
+```ts
+readonly viewerSources = [async () => {
+  const { default: manifest } = await import(
+    '../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'
+  )
+  const { usage: _usage, ...viewerManifest } = manifest
+  return viewerManifest
+}]
+```
+
+The Viewer uses the same production sprite URL as `AppIcon`.

docs/en/guides/angular-webpack.md

@@ -0,0 +1,93 @@
+# SVG Sprite for Angular with Webpack
+
+A quick guide to creating an SVG sprite in an Angular application built by the Webpack-based Angular CLI browser builder.
+
+## Generate the sprite
+
+Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
+
+```json
+{
+  "mode": "angular@webpack",
+  "name": "app",
+  "input": "../svg-icons/**/*.svg"
+}
+```
+
+This mode is for a workspace whose build target uses the official Webpack builder:
+
+```json
+{
+  "builder": "@angular-devkit/build-angular:browser"
+}
+```
+
+The package does not need to be a project dependency. Generate the sprite through `npx` before each start and build:
+
+```json
+{
+  "scripts": {
+    "sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
+    "prestart": "npm run sprites",
+    "start": "ng serve",
+    "prebuild": "npm run sprites",
+    "build": "ng build"
+  }
+}
+```
+
+Webpack resolves the generated `new URL(..., import.meta.url)` expression and emits `sprite.svg` as a production asset.
+
+## Use the sprite
+
+Create `assets/app-icons/index.ts`:
+
+```ts
+export * from './.svg-sprite/index'
+```
+
+Import the generated standalone component. The value `name: "app"` creates `AppIcon` and the selector `app-icon`:
+
+```ts
+import { Component } from '@angular/core'
+import { AppIcon } from '../assets/app-icons'
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [AppIcon],
+  template: `
+    <app-icon
+      icon="icon-name"
+      role="img"
+      aria-label="Done"
+      style="width: 24px; height: 24px; color: #334155; --icon-color-2: #f59e0b"
+    />
+  `,
+})
+export class AppComponent {}
+```
+
+The `icon` input is typed from source file names. Monochrome icons inherit `color`; use `--icon-color-N` for individual colors.
+
+## Debug and preview
+
+Viewer is optional and only needed during development:
+
+```bash
+npm install --save-dev @gromlab/svg-sprites
+```
+
+Import `@gromlab/svg-sprites/viewer/element`, add `CUSTOM_ELEMENTS_SCHEMA`, and place `<gromlab-sprite-viewer [sources]="viewerSources" />` in the template:
+
+```ts
+readonly viewerSources = [async () => {
+  const { default: manifest } = await import(
+    '../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'
+  )
+  const { usage: _usage, ...viewerManifest } = manifest
+  return viewerManifest
+}]
+```
+
+The Viewer and `AppIcon` share the Webpack-emitted sprite URL.

docs/en/guides/astro-vite.md

@@ -0,0 +1,92 @@
+# SVG Sprite for Astro with Vite
+
+A quick guide to creating an SVG sprite in an Astro application built with Vite.
+
+## Generate the sprite
+
+Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
+
+```json
+{
+  "mode": "astro@vite",
+  "name": "app",
+  "input": "../svg-icons/**/*.svg"
+}
+```
+
+The package does not need to be a project dependency. Generate the sprite through `npx` before development and production builds:
+
+```json
+{
+  "scripts": {
+    "sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
+    "predev": "npm run sprites",
+    "dev": "astro dev",
+    "prebuild": "npm run sprites",
+    "build": "astro check && astro build"
+  }
+}
+```
+
+## Use the sprite
+
+Create `assets/app-icons/index.js`:
+
+```js
+export * from './.svg-sprite/index.js'
+```
+
+Create `assets/app-icons/index.d.ts` for the same typed API:
+
+```ts
+export * from './.svg-sprite/index.js'
+```
+
+The value `name: "app"` creates the native Astro component `AppIcon`. Use it in a page:
+
+```astro
+---
+import { AppIcon } from '../../assets/app-icons/index.js'
+---
+
+<AppIcon
+  icon="icon-name"
+  width="24"
+  height="24"
+  role="img"
+  aria-label="Done"
+  style="color: #334155; --icon-color-2: #f59e0b"
+/>
+```
+
+The `icon` prop is typed from source file names. Vite emits `sprite.svg` from the component's static asset import.
+
+## Debug and preview
+
+Viewer is optional and only needed during development:
+
+```bash
+npm install --save-dev @gromlab/svg-sprites
+```
+
+Add the Viewer to the page and connect the generated manifest in a client script:
+
+```astro
+<gromlab-sprite-viewer id="sprite-viewer"></gromlab-sprite-viewer>
+
+<script>
+  import '@gromlab/svg-sprites/viewer/element'
+  import type { SpriteViewerElement } from '@gromlab/svg-sprites/viewer'
+
+  const viewer = document.querySelector<SpriteViewerElement>('#sprite-viewer')!
+  viewer.sources = [async () => {
+    const { default: manifest } = await import(
+      '../../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'
+    )
+    const { usage: _usage, ...viewerManifest } = manifest
+    return viewerManifest
+  }]
+</script>
+```
+
+The manifest retains Astro usage metadata while Viewer renders the same production sprite.

docs/en/guides/lit-vite.md

@@ -0,0 +1,86 @@
+# SVG Sprite for Lit with Vite
+
+A quick guide to creating an SVG sprite in a Lit application built with Vite.
+
+## Generate the sprite
+
+Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
+
+```json
+{
+  "mode": "lit@vite",
+  "name": "app",
+  "input": "../svg-icons/**/*.svg"
+}
+```
+
+The generator does not need to be added to the application dependencies: run it through `npx`.
+
+Add generation before development and production builds:
+
+```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"
+  }
+}
+```
+
+## Use the sprite
+
+The value `name: "app"` creates the Lit class `AppIcon`, the `<app-icon>` tag, and the `defineAppIcon` registration function.
+
+Create `assets/app-icons/index.js`:
+
+```js
+export * from './.svg-sprite/index.js'
+```
+
+Register the component before rendering it:
+
+```js
+import { defineAppIcon } from '../assets/app-icons/index.js'
+
+defineAppIcon()
+
+document.querySelector('#app').innerHTML = `
+  <app-icon
+    icon="icon-name"
+    role="img"
+    aria-label="Done"
+    style="width:24px;height:24px;color:#334155;--icon-color-2:#f59e0b"
+  ></app-icon>
+`
+```
+
+The `icon` property accepts source SVG file names without the extension. A monochrome icon inherits `color`; override multicolor icon layers with `--icon-color-N`. Vite loads the component CSS and emits `sprite.svg` as a separate production asset.
+
+## Debug and preview
+
+Viewer displays all icons on one page and is only needed during development. Install it separately:
+
+```bash
+npm install --save-dev @gromlab/svg-sprites
+```
+
+Add Viewer to a development page:
+
+```html
+<gromlab-sprite-viewer viewer-title="Project icons"></gromlab-sprite-viewer>
+<script type="module" src="/src/svg-sprite-debug.js"></script>
+```
+
+Create `src/svg-sprite-debug.js`:
+
+```js
+import '@gromlab/svg-sprites/viewer/element'
+import spriteManifest from '../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'
+
+document.querySelector('gromlab-sprite-viewer').sources = [spriteManifest]
+```
+
+Run `npm run dev` and open the development page. Viewer is not required by `AppIcon`.

docs/en/guides/lit-webpack.md

@@ -0,0 +1,98 @@
+# SVG Sprite for Lit with Webpack 5
+
+A quick guide to creating an SVG sprite in a Lit application built with Webpack 5.
+
+## Generate the sprite
+
+Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
+
+```json
+{
+  "mode": "lit@webpack",
+  "name": "app",
+  "input": "../svg-icons/**/*.svg"
+}
+```
+
+The generator does not need to be added to the application dependencies: run it through `npx`.
+
+Add generation before development and production builds:
+
+```json
+{
+  "scripts": {
+    "sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
+    "predev": "npm run sprites",
+    "dev": "webpack serve --mode development",
+    "prebuild": "npm run sprites",
+    "build": "webpack --mode production"
+  }
+}
+```
+
+## Use the sprite
+
+The value `name: "app"` creates the Lit class `AppIcon`, the `<app-icon>` tag, and the `defineAppIcon` registration function.
+
+Generated Lit CSS is imported with the `?inline` query. Add an Asset Module rule to `webpack.config.js`:
+
+```js
+export default {
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        resourceQuery: /inline/,
+        type: 'asset/source',
+      },
+    ],
+  },
+}
+```
+
+Create `assets/app-icons/index.js`:
+
+```js
+export * from './.svg-sprite/index.js'
+```
+
+Register the component before rendering it:
+
+```js
+import { defineAppIcon } from '../assets/app-icons/index.js'
+
+defineAppIcon()
+
+document.querySelector('#app').innerHTML = `
+  <app-icon
+    icon="icon-name"
+    role="img"
+    aria-label="Done"
+    style="width:24px;height:24px;color:#334155;--icon-color-2:#f59e0b"
+  ></app-icon>
+`
+```
+
+The `icon` property accepts source SVG file names without the extension. A monochrome icon inherits `color`; override multicolor icon layers with `--icon-color-N`. Webpack 5 emits `sprite.svg` as a separate production asset.
+
+## Debug and preview
+
+Viewer displays all icons on one page and is only needed during development. Install it separately:
+
+```bash
+npm install --save-dev @gromlab/svg-sprites
+```
+
+Add Viewer to a development entry:
+
+```js
+import '@gromlab/svg-sprites/viewer/element'
+import spriteManifest from '../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'
+
+const viewer = document.createElement('gromlab-sprite-viewer')
+viewer.viewerTitle = 'Project icons'
+viewer.sources = [spriteManifest]
+document.body.append(viewer)
+```
+
+Include this entry only in development. Viewer is not required by `AppIcon`.

docs/en/guides/next-app-turbopack.md

@@ -4,9 +4,9 @@ A quick guide to creating an SVG sprite in a Next.js application using App Route
 
 ## Generate the sprite
 
-Choose a folder for the sprite. This example uses `assets/app-icons`, with source SVG files, including the `check.svg` used below, in `assets/svg-icons`.
+Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
 
-Create `assets/app-icons/svg-sprite.config.json`:
+Example configuration:
 
 ```json
 {
@@ -16,7 +16,7 @@ Create `assets/app-icons/svg-sprite.config.json`:
 }
 ```
 
-The `input` path is relative to the config folder.
+The package does not need to be a project dependency: generation runs through `npx`.
 
 Add generation commands to `package.json`. Generated files are excluded from Git by default, so `predev` and `prebuild` rebuild the sprite before every start and build:
 
@@ -51,7 +51,7 @@ import { AppIcon } from '../assets/app-icons'
 export default function Page() {
   return (
     <AppIcon
-      icon="check"
+      icon="icon-name"
       width={24}
       height={24}
       role="img"

docs/en/guides/next-app-webpack.md

@@ -4,9 +4,9 @@ A quick guide to creating an SVG sprite in a Next.js application using App Route
 
 ## Generate the sprite
 
-Choose a folder for the sprite. This example uses `assets/app-icons`, with source SVG files, including the `check.svg` used below, in `assets/svg-icons`.
+Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
 
-Create `assets/app-icons/svg-sprite.config.json`:
+Example configuration:
 
 ```json
 {
@@ -16,7 +16,7 @@ Create `assets/app-icons/svg-sprite.config.json`:
 }
 ```
 
-The `input` path is relative to the config folder.
+The package does not need to be a project dependency: generation runs through `npx`.
 
 Add generation commands to `package.json`. Generated files are excluded from Git by default, so `predev` and `prebuild` rebuild the sprite before every start and build:
 
@@ -51,7 +51,7 @@ import { AppIcon } from '../assets/app-icons'
 export default function Page() {
   return (
     <AppIcon
-      icon="check"
+      icon="icon-name"
       width={24}
       height={24}
       role="img"

docs/en/guides/next-pages-turbopack.md

@@ -4,9 +4,9 @@ A quick guide to creating an SVG sprite in a Next.js application using Pages Rou
 
 ## Generate the sprite
 
-Choose a folder for the sprite. This example uses `assets/app-icons`, with source SVG files, including the `check.svg` used below, in `assets/svg-icons`.
+Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
 
-Create `assets/app-icons/svg-sprite.config.json`:
+Example configuration:
 
 ```json
 {
@@ -16,7 +16,7 @@ Create `assets/app-icons/svg-sprite.config.json`:
 }
 ```
 
-The `input` path is relative to the config folder.
+The package does not need to be a project dependency: generation runs through `npx`.
 
 Add generation commands to `package.json`. Generated files are excluded from Git by default, so `predev` and `prebuild` rebuild the sprite before every start and build:
 
@@ -51,7 +51,7 @@ import { AppIcon } from '../assets/app-icons'
 export default function Page() {
   return (
     <AppIcon
-      icon="check"
+      icon="icon-name"
       width={24}
       height={24}
       role="img"

docs/en/guides/next-pages-webpack.md

@@ -4,9 +4,9 @@ A quick guide to creating an SVG sprite in a Next.js application using Pages Rou
 
 ## Generate the sprite
 
-Choose a folder for the sprite. This example uses `assets/app-icons`, with source SVG files, including the `check.svg` used below, in `assets/svg-icons`.
+Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
 
-Create `assets/app-icons/svg-sprite.config.json`:
+Example configuration:
 
 ```json
 {
@@ -16,7 +16,7 @@ Create `assets/app-icons/svg-sprite.config.json`:
 }
 ```
 
-The `input` path is relative to the config folder.
+The package does not need to be a project dependency: generation runs through `npx`.
 
 Add generation commands to `package.json`. Generated files are excluded from Git by default, so `predev` and `prebuild` rebuild the sprite before every start and build:
 
@@ -51,7 +51,7 @@ import { AppIcon } from '../assets/app-icons'
 export default function Page() {
   return (
     <AppIcon
-      icon="check"
+      icon="icon-name"
       width={24}
       height={24}
       role="img"

docs/en/guides/nuxt-vite.md

@@ -0,0 +1,100 @@
+# SVG Sprite for Nuxt with Vite
+
+A quick guide to creating an SVG sprite in a Nuxt application built with Vite.
+
+## Generate the sprite
+
+Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
+
+Example configuration:
+
+```json
+{
+  "mode": "nuxt@vite",
+  "name": "app",
+  "input": "../svg-icons/**/*.svg"
+}
+```
+
+The package does not need to be a project dependency: generation runs through `npx`.
+
+Add generation commands to `package.json`:
+
+```json
+{
+  "scripts": {
+    "sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
+    "predev": "npm run sprites",
+    "dev": "nuxt dev",
+    "prebuild": "npm run sprites",
+    "build": "nuxt build"
+  }
+}
+```
+
+## Use the sprite
+
+The value `name: "app"` creates the Vue component `AppIcon`. Create `assets/app-icons/index.js`:
+
+```js
+export * from './.svg-sprite/index.js'
+```
+
+Use the component in a Nuxt page or layout:
+
+```vue
+<script setup>
+import { AppIcon } from '../assets/app-icons/index.js'
+</script>
+
+<template>
+  <AppIcon
+    icon="icon-name"
+    width="24"
+    height="24"
+    role="img"
+    aria-label="Done"
+    style="color: #334155; --icon-color-2: #f59e0b"
+  />
+</template>
+```
+
+`AppIcon` is SSR-safe and does not need a client-only wrapper. Vite emits `sprite.svg` as a separate production asset.
+
+## Debug and preview
+
+Viewer displays all icons on one page so you can check their rendering, change colors, and inspect the related CSS variables. It is only needed for development and is installed separately:
+
+```bash
+npm install --save-dev @gromlab/svg-sprites
+```
+
+Create `app/components/SvgSpriteViewer.client.vue` so the browser-only Viewer is not evaluated during SSR:
+
+```vue
+<script setup>
+import '@gromlab/svg-sprites/viewer/element'
+
+const sources = [
+  () => import('../../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'),
+]
+</script>
+
+<template>
+  <gromlab-sprite-viewer :sources="sources" viewer-title="Project icons" />
+</template>
+```
+
+Mark `gromlab-sprite-viewer` as a custom element in `nuxt.config.ts`:
+
+```ts
+export default defineNuxtConfig({
+  vue: {
+    compilerOptions: {
+      isCustomElement: (tag) => tag === 'gromlab-sprite-viewer',
+    },
+  },
+})
+```
+
+Render `<SvgSpriteViewer />` on your development page. Viewer is isolated from the generated `AppIcon` runtime.

docs/en/guides/nuxt-webpack.md

@@ -0,0 +1,113 @@
+# SVG Sprite for Nuxt with Webpack
+
+A quick guide to creating an SVG sprite in a Nuxt application built with Webpack.
+
+## Generate the sprite
+
+Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
+
+Example configuration:
+
+```json
+{
+  "mode": "nuxt@webpack",
+  "name": "app",
+  "input": "../svg-icons/**/*.svg"
+}
+```
+
+The package does not need to be a project dependency: generation runs through `npx`.
+
+Use the Nuxt Webpack builder in `nuxt.config.ts`:
+
+```bash
+npm install --save-dev @nuxt/webpack-builder
+```
+
+```ts
+export default defineNuxtConfig({
+  builder: '@nuxt/webpack-builder',
+})
+```
+
+Add generation commands to `package.json`:
+
+```json
+{
+  "scripts": {
+    "sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
+    "predev": "npm run sprites",
+    "dev": "nuxt dev",
+    "prebuild": "npm run sprites",
+    "build": "nuxt build"
+  }
+}
+```
+
+## Use the sprite
+
+The value `name: "app"` creates the Vue component `AppIcon`. Create `assets/app-icons/index.js`:
+
+```js
+export * from './.svg-sprite/index.js'
+```
+
+Use the component in a Nuxt page or layout:
+
+```vue
+<script setup>
+import { AppIcon } from '../assets/app-icons/index.js'
+</script>
+
+<template>
+  <AppIcon
+    icon="icon-name"
+    width="24"
+    height="24"
+    role="img"
+    aria-label="Done"
+    style="color: #334155; --icon-color-2: #f59e0b"
+  />
+</template>
+```
+
+`AppIcon` is SSR-safe and does not need a client-only wrapper. Webpack emits `sprite.svg` as a separate production asset.
+
+## Debug and preview
+
+Viewer displays all icons on one page so you can check their rendering, change colors, and inspect the related CSS variables. It is only needed for development and is installed separately:
+
+```bash
+npm install --save-dev @gromlab/svg-sprites
+```
+
+Create `app/components/SvgSpriteViewer.client.vue` so the browser-only Viewer is not evaluated during SSR:
+
+```vue
+<script setup>
+import '@gromlab/svg-sprites/viewer/element'
+
+const sources = [
+  () => import('../../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'),
+]
+</script>
+
+<template>
+  <gromlab-sprite-viewer :sources="sources" viewer-title="Project icons" />
+</template>
+```
+
+Extend the existing `nuxt.config.ts` settings so Vue treats the Viewer as a custom element:
+
+```ts
+export default defineNuxtConfig({
+  builder: '@nuxt/webpack-builder',
+  vue: {
+    compilerOptions: {
+      isCustomElement: (tag) => tag === 'gromlab-sprite-viewer',
+    },
+  },
+})
+```
+
+Render `<SvgSpriteViewer />` on your development page. Viewer is isolated from the generated `AppIcon` runtime.

docs/en/guides/preact-vite.md

@@ -0,0 +1,75 @@
+# SVG Sprite for Preact with Vite
+
+A quick guide to creating an SVG sprite in a Preact application built with Vite.
+
+## Generate the sprite
+
+Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
+
+```json
+{
+  "mode": "preact@vite",
+  "name": "app",
+  "input": "../svg-icons/**/*.svg"
+}
+```
+
+The package does not need to be a project dependency. Run it through `npx` before development and production builds:
+
+```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"
+  }
+}
+```
+
+## Use the sprite
+
+Create `assets/app-icons/index.js` and `assets/app-icons/index.d.ts` with the same export:
+
+```js
+export * from './.svg-sprite/index.js'
+```
+
+Use the generated plain-JavaScript Preact component:
+
+```jsx
+import { AppIcon } from '../assets/app-icons/index.js'
+
+export function SaveIcon() {
+  return (
+    <AppIcon
+      icon="icon-name"
+      width={24}
+      height={24}
+      aria-label="Done"
+      style={{ color: '#334155', '--icon-color-2': '#f59e0b' }}
+    />
+  )
+}
+```
+
+Vite automatically emits the imported `sprite.svg` as a production asset.
+
+## Debug and preview
+
+Install Viewer only for development:
+
+```bash
+npm install --save-dev @gromlab/svg-sprites
+```
+
+Mount it from a debug entry:
+
+```js
+import '@gromlab/svg-sprites/viewer/element'
+
+const viewer = document.createElement('gromlab-sprite-viewer')
+viewer.sources = [() => import('../assets/app-icons/.svg-sprite/svg-sprite.manifest.js')]
+document.body.append(viewer)
+```

docs/en/guides/preact-webpack.md

@@ -0,0 +1,75 @@
+# SVG Sprite for Preact with Webpack
+
+A quick guide to creating an SVG sprite in a Preact application built with Webpack 5.
+
+## Generate the sprite
+
+Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
+
+```json
+{
+  "mode": "preact@webpack",
+  "name": "app",
+  "input": "../svg-icons/**/*.svg"
+}
+```
+
+The package does not need to be a project dependency. Run it through `npx` before Webpack starts or builds:
+
+```json
+{
+  "scripts": {
+    "sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
+    "predev": "npm run sprites",
+    "dev": "webpack serve --mode development",
+    "prebuild": "npm run sprites",
+    "build": "tsc --noEmit && webpack --mode production"
+  }
+}
+```
+
+## Use the sprite
+
+Create `assets/app-icons/index.js` and `assets/app-icons/index.d.ts` with the same export:
+
+```js
+export * from './.svg-sprite/index.js'
+```
+
+Use the generated Preact component:
+
+```jsx
+import { AppIcon } from '../assets/app-icons/index.js'
+
+export function SaveIcon() {
+  return (
+    <AppIcon
+      icon="icon-name"
+      width={24}
+      height={24}
+      aria-label="Done"
+      style={{ color: '#334155', '--icon-color-2': '#f59e0b' }}
+    />
+  )
+}
+```
+
+Webpack Asset Modules emit `sprite.svg` from the generated `new URL(...)` expression.
+
+## Debug and preview
+
+Install Viewer only for development:
+
+```bash
+npm install --save-dev @gromlab/svg-sprites
+```
+
+Mount it from a development-only entry:
+
+```js
+import '@gromlab/svg-sprites/viewer/element'
+
+const viewer = document.createElement('gromlab-sprite-viewer')
+viewer.sources = [() => import('../assets/app-icons/.svg-sprite/svg-sprite.manifest.js')]
+document.body.append(viewer)
+```

docs/en/guides/qwik-vite.md

@@ -0,0 +1,82 @@
+# SVG Sprite for Qwik with Vite
+
+A quick guide to creating an SVG sprite in an SSR Qwik application built with Vite.
+
+## Generate the sprite
+
+Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
+
+```json
+{
+  "mode": "qwik@vite",
+  "name": "app",
+  "input": "../svg-icons/**/*.svg"
+}
+```
+
+The package does not need to be a project dependency. Regenerate through `npx` before Vite starts or builds:
+
+```json
+{
+  "scripts": {
+    "sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
+    "predev": "npm run sprites",
+    "dev": "vite --mode ssr",
+    "prebuild": "npm run sprites",
+    "build": "tsc --noEmit && vite build"
+  }
+}
+```
+
+## Use the sprite
+
+Create `assets/app-icons/index.ts`:
+
+```ts
+export * from './.svg-sprite/index.js'
+```
+
+The generated component is a Qwik `component$` and is safe during SSR:
+
+```tsx
+import { component$ } from '@builder.io/qwik'
+import { AppIcon } from '../assets/app-icons'
+
+export default component$(() => (
+  <AppIcon
+    icon="icon-name"
+    width={24}
+    height={24}
+    aria-label="Done"
+    style={{ color: '#334155', '--icon-color-2': '#f59e0b' }}
+  />
+))
+```
+
+The component uses a static Vite asset import and does not access browser globals during SSR.
+
+## Debug and preview
+
+Viewer is browser-only, optional development tooling:
+
+```bash
+npm install --save-dev @gromlab/svg-sprites
+```
+
+Load it from a visible task:
+
+```tsx
+import { component$, useSignal, useVisibleTask$ } from '@builder.io/qwik'
+import type { SpriteViewerElement } from '@gromlab/svg-sprites/viewer'
+
+export const IconViewer = component$(() => {
+  const host = useSignal<HTMLElement>()
+  useVisibleTask$(async () => {
+    await import('@gromlab/svg-sprites/viewer/element')
+    const viewer = document.createElement('gromlab-sprite-viewer') as SpriteViewerElement
+    viewer.sources = [() => import('../assets/app-icons/.svg-sprite/svg-sprite.manifest.js')]
+    host.value?.append(viewer)
+  })
+  return <div ref={host} />
+})
+```

docs/en/guides/react-vite.md

@@ -4,9 +4,9 @@ A quick guide to creating an SVG sprite in a React application built with Vite.
 
 ## Generate the sprite
 
-Choose a folder for the sprite. This example uses `assets/app-icons`, with source SVG files, including the `check.svg` used below, in `assets/svg-icons`.
+Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
 
-Create `assets/app-icons/svg-sprite.config.json`:
+Example configuration:
 
 ```json
 {
@@ -16,7 +16,7 @@ Create `assets/app-icons/svg-sprite.config.json`:
 }
 ```
 
-The `input` path is relative to the config folder.
+The package does not need to be a project dependency: generation runs through `npx`.
 
 Add generation commands to `package.json`. Generated files are excluded from Git by default, so `predev` and `prebuild` rebuild the sprite before every start and build:
 
@@ -50,7 +50,7 @@ import { AppIcon } from '../assets/app-icons'
 export function SaveIcon() {
   return (
     <AppIcon
-      icon="check"
+      icon="icon-name"
       width={24}
       height={24}
       role="img"

docs/en/guides/react-webpack.md

@@ -4,9 +4,9 @@ A quick guide to creating an SVG sprite in a React application built with Webpac
 
 ## Generate the sprite
 
-Choose a folder for the sprite. This example uses `assets/app-icons`, with source SVG files, including the `check.svg` used below, in `assets/svg-icons`.
+Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
 
-Create `assets/app-icons/svg-sprite.config.json`:
+Example configuration:
 
 ```json
 {
@@ -16,7 +16,7 @@ Create `assets/app-icons/svg-sprite.config.json`:
 }
 ```
 
-The `input` path is relative to the config folder.
+The package does not need to be a project dependency: generation runs through `npx`.
 
 Add generation commands to `package.json`. Generated files are excluded from Git by default, so `predev` and `prebuild` rebuild the sprite before every start and build:
 
@@ -50,7 +50,7 @@ import { AppIcon } from '../assets/app-icons'
 export function SaveIcon() {
   return (
     <AppIcon
-      icon="check"
+      icon="icon-name"
       width={24}
       height={24}
       role="img"

docs/en/guides/solid-start-vite.md

@@ -0,0 +1,83 @@
+# SVG Sprite for SolidStart with Vite
+
+A quick guide to creating an SVG sprite in an SSR SolidStart application built with Vite.
+
+## Generate the sprite
+
+Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
+
+```json
+{
+  "mode": "solid-start@vite",
+  "name": "app",
+  "input": "../svg-icons/**/*.svg"
+}
+```
+
+The package does not need to be a project dependency. Regenerate through `npx` before Vinxi starts or builds:
+
+```json
+{
+  "scripts": {
+    "sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
+    "predev": "npm run sprites",
+    "dev": "vinxi dev",
+    "prebuild": "npm run sprites",
+    "build": "vinxi build"
+  }
+}
+```
+
+## Use the sprite
+
+Create `assets/app-icons/index.ts`:
+
+```ts
+export * from './.svg-sprite/index.js'
+```
+
+The generated component is safe to render on the server:
+
+```tsx
+import { AppIcon } from '../assets/app-icons'
+
+export default function Home() {
+  return (
+    <AppIcon
+      icon="icon-name"
+      width={24}
+      height={24}
+      aria-label="Done"
+      style={{ color: '#334155', '--icon-color-2': '#f59e0b' }}
+    />
+  )
+}
+```
+
+The component uses a static Vite asset import and does not access browser globals during SSR.
+
+## Debug and preview
+
+Viewer is browser-only, optional development tooling:
+
+```bash
+npm install --save-dev @gromlab/svg-sprites
+```
+
+Load it from `onMount` so it is excluded from server rendering:
+
+```tsx
+import { onMount } from 'solid-js'
+import type { SpriteViewerElement } from '@gromlab/svg-sprites/viewer'
+
+export function IconViewer() {
+  let host!: HTMLDivElement
+  onMount(async () => {
+    await import('@gromlab/svg-sprites/viewer/element')
+    const viewer = document.createElement('gromlab-sprite-viewer') as SpriteViewerElement
+    viewer.sources = [() => import('../assets/app-icons/.svg-sprite/svg-sprite.manifest.js')]
+    host.append(viewer)
+  })
+  return <div ref={host} />
+}
+```

docs/en/guides/solid-vite.md

@@ -0,0 +1,83 @@
+# SVG Sprite for Solid with Vite
+
+A quick guide to creating an SVG sprite in a Solid application built with Vite.
+
+## Generate the sprite
+
+Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
+
+```json
+{
+  "mode": "solid@vite",
+  "name": "app",
+  "input": "../svg-icons/**/*.svg"
+}
+```
+
+The package does not need to be a project dependency. Run it through `npx` and regenerate before development and production builds:
+
+```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"
+  }
+}
+```
+
+## Use the sprite
+
+Create `assets/app-icons/index.ts`:
+
+```ts
+export * from './.svg-sprite/index.js'
+```
+
+The name `app` creates the Solid component `AppIcon`:
+
+```tsx
+import { AppIcon } from '../assets/app-icons'
+
+export function SaveIcon() {
+  return (
+    <AppIcon
+      icon="icon-name"
+      width={24}
+      height={24}
+      aria-label="Done"
+      style={{ color: '#334155', '--icon-color-2': '#f59e0b' }}
+    />
+  )
+}
+```
+
+Vite emits `sprite.svg` as a production asset. Monochrome icons inherit `color`; multicolor icons use `--icon-color-N`.
+
+## Debug and preview
+
+Viewer is optional and only needed during development:
+
+```bash
+npm install --save-dev @gromlab/svg-sprites
+```
+
+Mount it from a debug component after the browser is ready:
+
+```tsx
+import { onMount } from 'solid-js'
+import type { SpriteViewerElement } from '@gromlab/svg-sprites/viewer'
+
+export function IconViewer() {
+  let host!: HTMLDivElement
+  onMount(async () => {
+    await import('@gromlab/svg-sprites/viewer/element')
+    const viewer = document.createElement('gromlab-sprite-viewer') as SpriteViewerElement
+    viewer.sources = [() => import('../assets/app-icons/.svg-sprite/svg-sprite.manifest.js')]
+    host.append(viewer)
+  })
+  return <div ref={host} />
+}
+```

docs/en/guides/solid-webpack.md

@@ -0,0 +1,75 @@
+# SVG Sprite for Solid with Webpack
+
+A quick guide to creating an SVG sprite in a Solid application built with Webpack 5.
+
+## Generate the sprite
+
+Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
+
+```json
+{
+  "mode": "solid@webpack",
+  "name": "app",
+  "input": "../svg-icons/**/*.svg"
+}
+```
+
+The package does not need to be a project dependency. Run it through `npx` before Webpack starts or builds:
+
+```json
+{
+  "scripts": {
+    "sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
+    "predev": "npm run sprites",
+    "dev": "webpack serve --mode development",
+    "prebuild": "npm run sprites",
+    "build": "tsc --noEmit && webpack --mode production"
+  }
+}
+```
+
+## Use the sprite
+
+Create `assets/app-icons/index.js` and `assets/app-icons/index.d.ts` with the same export:
+
+```js
+export * from './.svg-sprite/index.js'
+```
+
+Use the generated Solid component:
+
+```jsx
+import { AppIcon } from '../assets/app-icons/index.js'
+
+export function SaveIcon() {
+  return (
+    <AppIcon
+      icon="icon-name"
+      width={24}
+      height={24}
+      aria-label="Done"
+      style={{ color: '#334155', '--icon-color-2': '#f59e0b' }}
+    />
+  )
+}
+```
+
+Webpack Asset Modules emit `sprite.svg` from the generated `new URL(...)`. Keep `.jsx` processing enabled for the generated Solid component.
+
+## Debug and preview
+
+Install Viewer only for development:
+
+```bash
+npm install --save-dev @gromlab/svg-sprites
+```
+
+Add it to a development-only entry:
+
+```js
+import '@gromlab/svg-sprites/viewer/element'
+
+const viewer = document.createElement('gromlab-sprite-viewer')
+viewer.sources = [() => import('../assets/app-icons/.svg-sprite/svg-sprite.manifest.js')]
+document.body.append(viewer)
+```

docs/en/guides/standalone-vite.md

@@ -4,9 +4,9 @@ A quick guide to creating an SVG sprite in a Vite application without a framewor
 
 ## Generate the sprite
 
-Choose a folder for the sprite. This example uses `assets/app-icons`, with source SVG files, including the `check.svg` used below, in `assets/svg-icons`.
+Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
 
-Create `assets/app-icons/svg-sprite.config.json`:
+Example configuration:
 
 ```json
 {
@@ -16,7 +16,7 @@ Create `assets/app-icons/svg-sprite.config.json`:
 }
 ```
 
-The `input` path is relative to the config folder.
+The package does not need to be a project dependency: generation runs through `npx`.
 
 Add generation commands to `package.json`. Generated files are excluded from Git by default, so `predev` and `prebuild` rebuild the sprite before every start and build:
 
@@ -54,10 +54,10 @@ defineAppIconElement()
 Use the icon in HTML:
 
 ```html
-<app-icon icon="check" role="img" aria-label="Done"></app-icon>
+<app-icon icon="icon-name" role="img" aria-label="Done"></app-icon>
 ```
 
-The file `check.svg` is available as `icon="check"`. Set its size and colors with CSS:
+The `icon` value is the source SVG filename without the extension. Set its size and colors with CSS:
 
 ```css
 app-icon {

docs/en/guides/standalone-webpack.md

@@ -4,9 +4,9 @@ A quick guide to creating an SVG sprite in a Webpack 5 application without a fra
 
 ## Generate the sprite
 
-Choose a folder for the sprite. This example uses `assets/app-icons`, with source SVG files, including the `check.svg` used below, in `assets/svg-icons`.
+Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
 
-Create `assets/app-icons/svg-sprite.config.json`:
+Example configuration:
 
 ```json
 {
@@ -16,7 +16,7 @@ Create `assets/app-icons/svg-sprite.config.json`:
 }
 ```
 
-The `input` path is relative to the config folder.
+The package does not need to be a project dependency: generation runs through `npx`.
 
 Add generation commands to `package.json`. Generated files are excluded from Git by default, so `predev` and `prebuild` rebuild the sprite before every start and build:
 
@@ -54,10 +54,10 @@ defineAppIconElement()
 Use the icon in HTML:
 
 ```html
-<app-icon icon="check" role="img" aria-label="Done"></app-icon>
+<app-icon icon="icon-name" role="img" aria-label="Done"></app-icon>
 ```
 
-The file `check.svg` is available as `icon="check"`. Set its size and colors with CSS:
+The `icon` value is the source SVG filename without the extension. Set its size and colors with CSS:
 
 ```css
 app-icon {

docs/en/guides/standalone.md

@@ -6,32 +6,9 @@ Combine SVG icons into one file and use them on an HTML page.
 
 You do not need to install the package in your project.
 
-This guide uses the following project structure:
-
-```text
-/
-├── index.html
-└── assets/
-    ├── app-icons/
-    └── svg-icons/
-        ├── check.svg
-        └── warning.svg
-```
-
 ### 1. Create the sprite config
 
-Choose a folder for the sprite. This example uses `assets/app-icons`. Create `svg-sprite.config.json` inside it:
-
-```json
-{
-  "mode": "standalone",
-  "name": "icons"
-}
-```
-
-### 2. Set the icon source
-
-`input` can point to a folder, an individual SVG file, or a glob pattern. To use multiple sources, provide an array with any combination of these values:
+Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
 
 ```json
 {
@@ -41,7 +18,7 @@ Choose a folder for the sprite. This example uses `assets/app-icons`. Create `sv
 }
 ```
 
-### 3. Generate the sprite
+### 2. Generate the sprite
 
 Pass the config path to the command:
 
@@ -62,7 +39,7 @@ assets/app-icons/.svg-sprite/
 
 The `.svg-sprite` directory is created automatically and fully replaced on every generation. Do not edit its contents manually.
 
-### 4. Use an icon
+### 3. Use an icon
 
 In `index.html`, point to the generated `sprite.svg`. After `#`, add the icon file name without the `.svg` extension:
 
@@ -72,12 +49,10 @@ In `index.html`, point to the generated `sprite.svg`. After `#`, add the icon fi
   height="24"
   aria-label="Done"
 >
-  <use href="./assets/app-icons/.svg-sprite/sprite.svg#check"></use>
+  <use href="./assets/app-icons/.svg-sprite/sprite.svg#icon-name"></use>
 </svg>
 ```
 
-The icon from `check.svg` is available as `#check`.
-
 ## Debug and preview
 
 `sprite.svg` is a technical file, not an icon gallery. Opening it does not provide a convenient view of the whole set. Gradients, masks, filters, and references to internal `id` values may also render with artifacts.

docs/en/guides/svelte-vite.md

@@ -0,0 +1,95 @@
+# SVG Sprite for Svelte with Vite
+
+A quick guide to creating an SVG sprite in a Svelte application built with Vite.
+
+## Generate the sprite
+
+Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
+
+Example configuration:
+
+```json
+{
+  "mode": "svelte@vite",
+  "name": "app",
+  "input": "../svg-icons/**/*.svg"
+}
+```
+
+The package does not need to be a project dependency: generation runs through `npx`.
+
+Add generation commands to `package.json`. Generated files are excluded from Git by default, so `predev` and `prebuild` rebuild the sprite before every start and build:
+
+```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"
+  }
+}
+```
+
+## Use the sprite
+
+The value `name: "app"` creates the Svelte component `AppIcon`.
+
+Create `assets/app-icons/index.js`:
+
+```js
+export * from './.svg-sprite/index.js'
+```
+
+Use the component in your application:
+
+```svelte
+<script>
+  import { AppIcon } from '../assets/app-icons/index.js'
+</script>
+
+<AppIcon
+  icon="icon-name"
+  width="24"
+  height="24"
+  role="img"
+  aria-label="Done"
+  style="color: #334155; --icon-color-2: #f59e0b"
+/>
+```
+
+The `icon` prop accepts source SVG file names without the extension. A monochrome icon inherits `color`, while colors in a multicolor icon are overridden with `--icon-color-N`.
+
+Vite automatically includes the component styles and emits `sprite.svg` as a separate production asset.
+
+## Debug and preview
+
+Viewer displays all icons on one page so you can check their rendering, change colors, and inspect the related CSS variables. It is only needed for development and is installed separately:
+
+```bash
+npm install --save-dev @gromlab/svg-sprites
+```
+
+Add Viewer to a development-only Svelte page or component:
+
+```svelte
+<script>
+  import '@gromlab/svg-sprites/viewer/element'
+
+  const sources = [
+    () => import('../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'),
+  ]
+
+  function connectViewer(node) {
+    node.sources = sources
+  }
+</script>
+
+<gromlab-sprite-viewer
+  use:connectViewer
+  viewer-title="Project icons"
+></gromlab-sprite-viewer>
+```
+
+Run `npm run dev` and open the page containing Viewer. Do not import this development component from the production entry.

docs/en/guides/svelte-webpack.md

@@ -0,0 +1,105 @@
+# SVG Sprite for Svelte with Webpack 5
+
+A quick guide to creating an SVG sprite in a Svelte application built with Webpack 5.
+
+## Generate the sprite
+
+Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
+
+Example configuration:
+
+```json
+{
+  "mode": "svelte@webpack",
+  "name": "app",
+  "input": "../svg-icons/**/*.svg"
+}
+```
+
+The package does not need to be a project dependency: generation runs through `npx`.
+
+Add generation commands to `package.json`:
+
+```json
+{
+  "scripts": {
+    "sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
+    "predev": "npm run sprites",
+    "dev": "webpack serve --mode development",
+    "prebuild": "npm run sprites",
+    "build": "webpack --mode production"
+  }
+}
+```
+
+## Use the sprite
+
+The value `name: "app"` creates the Svelte component `AppIcon`.
+
+Create `assets/app-icons/index.js`:
+
+```js
+export * from './.svg-sprite/index.js'
+```
+
+Use the component in your application:
+
+```svelte
+<script>
+  import { AppIcon } from '../assets/app-icons/index.js'
+</script>
+
+<AppIcon
+  icon="icon-name"
+  width="24"
+  height="24"
+  role="img"
+  aria-label="Done"
+  style="color: #334155; --icon-color-2: #f59e0b"
+/>
+```
+
+The generated component is a native `.svelte` file. The normal `svelte-loader` rule must include `.svelte` files under `assets`:
+
+```js
+{
+  test: /\.svelte$/,
+  use: {
+    loader: 'svelte-loader',
+    options: { emitCss: false },
+  },
+}
+```
+
+Webpack 5 processes the component's asset URL and emits `sprite.svg` as a separate production asset.
+
+## Debug and preview
+
+Viewer displays all icons on one page so you can check their rendering, change colors, and inspect the related CSS variables. It is only needed for development and is installed separately:
+
+```bash
+npm install --save-dev @gromlab/svg-sprites
+```
+
+Add Viewer to a development-only Svelte component:
+
+```svelte
+<script>
+  import '@gromlab/svg-sprites/viewer/element'
+
+  const sources = [
+    () => import('../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'),
+  ]
+
+  function connectViewer(node) {
+    node.sources = sources
+  }
+</script>
+
+<gromlab-sprite-viewer
+  use:connectViewer
+  viewer-title="Project icons"
+></gromlab-sprite-viewer>
+```
+
+Run `npm run dev` and open the page containing Viewer. Do not import this development component from the production entry.

docs/en/guides/sveltekit-vite.md

@@ -0,0 +1,91 @@
+# SVG Sprite for SvelteKit with Vite
+
+A quick guide to creating an SVG sprite in a SvelteKit application built with Vite.
+
+## Generate the sprite
+
+Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
+
+Example configuration:
+
+```json
+{
+  "mode": "sveltekit@vite",
+  "name": "app",
+  "input": "../svg-icons/**/*.svg"
+}
+```
+
+The package does not need to be a project dependency: generation runs through `npx`.
+
+Add generation commands to `package.json`. Generated files are excluded from Git by default, so `predev` and `prebuild` rebuild the sprite before every start and build:
+
+```json
+{
+  "scripts": {
+    "sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
+    "predev": "npm run sprites",
+    "dev": "vite dev",
+    "prebuild": "npm run sprites",
+    "build": "vite build"
+  }
+}
+```
+
+## Use the sprite
+
+The value `name: "app"` creates the SSR-safe Svelte component `AppIcon`.
+
+Create `assets/app-icons/index.js`:
+
+```js
+export * from './.svg-sprite/index.js'
+```
+
+Use the component in `src/routes/+page.svelte`:
+
+```svelte
+<script>
+  import { AppIcon } from '../../assets/app-icons/index.js'
+</script>
+
+<AppIcon
+  icon="icon-name"
+  width="24"
+  height="24"
+  role="img"
+  aria-label="Done"
+  style="color: #334155; --icon-color-2: #f59e0b"
+/>
+```
+
+The `icon` prop accepts source SVG file names without the extension. The component has no browser-only initialization, so the page can be rendered on the server. Vite emits `sprite.svg` as a separate production asset.
+
+## Debug and preview
+
+Viewer displays all icons on one page so you can check their rendering, change colors, and inspect the related CSS variables. It is only needed for development and is installed separately:
+
+```bash
+npm install --save-dev @gromlab/svg-sprites
+```
+
+Create a development route such as `src/routes/svg-sprite/+page.svelte`. Load the custom element from an action so it is only registered in the browser:
+
+```svelte
+<script>
+  const sources = [
+    () => import('../../../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'),
+  ]
+
+  function connectViewer(node) {
+    void import('@gromlab/svg-sprites/viewer/element').then(() => {
+      node.sources = sources
+      node.viewerTitle = 'Project icons'
+    })
+  }
+</script>
+
+<gromlab-sprite-viewer use:connectViewer></gromlab-sprite-viewer>
+```
+
+Run `npm run dev` and open `/svg-sprite`. The action does not run during SSR.

docs/en/guides/vue-vite.md

@@ -0,0 +1,105 @@
+# SVG Sprite for Vue with Vite
+
+A quick guide to creating an SVG sprite in a Vue application built with Vite.
+
+## Generate the sprite
+
+Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
+
+Example configuration:
+
+```json
+{
+  "mode": "vue@vite",
+  "name": "app",
+  "input": "../svg-icons/**/*.svg"
+}
+```
+
+The package does not need to be a project dependency: generation runs through `npx`.
+
+Add generation commands to `package.json`. Generated files are excluded from Git by default, so `predev` and `prebuild` rebuild the sprite before every start and build:
+
+```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": "vue-tsc --noEmit && vite build"
+  }
+}
+```
+
+## Use the sprite
+
+The value `name: "app"` creates the Vue component `AppIcon`.
+
+Create the entry point `assets/app-icons/index.ts`:
+
+```ts
+export * from './.svg-sprite/index.js'
+```
+
+Use the component in your application:
+
+```vue
+<script setup lang="ts">
+import { AppIcon } from '../assets/app-icons'
+</script>
+
+<template>
+  <AppIcon
+    icon="icon-name"
+    width="24"
+    height="24"
+    role="img"
+    aria-label="Done"
+    style="color: #334155; --icon-color-2: #f59e0b"
+  />
+</template>
+```
+
+The `icon` prop accepts source SVG file names without the extension. A monochrome icon inherits `color`, while colors in a multicolor icon are overridden with `--icon-color-N`.
+
+Vite automatically includes the component styles and adds `sprite.svg` to the production build.
+
+## Debug and preview
+
+Viewer displays all icons on one page so you can check their rendering, change colors, and inspect the related CSS variables. It is only needed for development and is installed separately:
+
+```bash
+npm install --save-dev @gromlab/svg-sprites
+```
+
+Create `svg-sprite.html` in the project root:
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Project icons</title>
+  </head>
+  <body>
+    <gromlab-sprite-viewer viewer-title="Project icons"></gromlab-sprite-viewer>
+    <script type="module" src="/src/svg-sprite-debug.ts"></script>
+  </body>
+</html>
+```
+
+Create `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]
+```
+
+Run `npm run dev` and open `/svg-sprite.html`.
+
+Viewer is not required by `AppIcon` and is not loaded by the main application code.

docs/en/guides/vue-webpack.md

@@ -0,0 +1,126 @@
+# SVG Sprite for Vue with Webpack 5
+
+A quick guide to creating an SVG sprite in a Vue application built with Webpack 5.
+
+## Generate the sprite
+
+Choose a directory for the future SVG sprite, for example `assets/app-icons`, and create `svg-sprite.config.json` inside it. In `input`, specify the path to existing SVG files relative to the configuration file. There is no need to move or copy the icons.
+
+Example configuration:
+
+```json
+{
+  "mode": "vue@webpack",
+  "name": "app",
+  "input": "../svg-icons/**/*.svg"
+}
+```
+
+The package does not need to be a project dependency: generation runs through `npx`.
+
+Add generation commands to `package.json`. Generated files are excluded from Git by default, so `predev` and `prebuild` rebuild the sprite before every start and build:
+
+```json
+{
+  "scripts": {
+    "sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
+    "predev": "npm run sprites",
+    "dev": "webpack serve --mode development",
+    "prebuild": "npm run sprites",
+    "build": "webpack --mode production"
+  }
+}
+```
+
+## Use the sprite
+
+The value `name: "app"` creates the Vue component `AppIcon`. Create `assets/app-icons/index.js`:
+
+```js
+export * from './.svg-sprite/index.js'
+```
+
+Use the component in your application:
+
+```vue
+<script setup>
+import { AppIcon } from '../assets/app-icons/index.js'
+</script>
+
+<template>
+  <AppIcon
+    icon="icon-name"
+    width="24"
+    height="24"
+    role="img"
+    aria-label="Done"
+    style="color: #334155; --icon-color-2: #f59e0b"
+  />
+</template>
+```
+
+The `icon` prop accepts source SVG file names without the extension. A monochrome icon inherits `color`, while colors in a multicolor icon are overridden with `--icon-color-N`.
+
+The component uses CSS Modules. If the project does not process them yet, install `style-loader` and `css-loader`, then add a rule with a default export:
+
+```bash
+npm install --save-dev style-loader css-loader
+```
+
+```js
+{
+  test: /\.module\.css$/i,
+  use: [
+    'style-loader',
+    {
+      loader: 'css-loader',
+      options: { modules: { namedExport: false } },
+    },
+  ],
+}
+```
+
+Webpack 5 automatically adds `sprite.svg` to the production build.
+
+## Debug and preview
+
+Viewer displays all icons on one page so you can check their rendering, change colors, and inspect the related CSS variables. It is only needed for development and is installed separately:
+
+```bash
+npm install --save-dev @gromlab/svg-sprites
+```
+
+Add Viewer to a development-only Vue component:
+
+```vue
+<script setup>
+import '@gromlab/svg-sprites/viewer/element'
+
+const sources = [
+  () => import('../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'),
+]
+</script>
+
+<template>
+  <gromlab-sprite-viewer
+    :sources="sources"
+    viewer-title="Project icons"
+  />
+</template>
+```
+
+Configure Vue Loader to treat `gromlab-sprite-viewer` as a custom element:
+
+```js
+{
+  test: /\.vue$/,
+  loader: 'vue-loader',
+  options: {
+    compilerOptions: {
+      isCustomElement: (tag) => tag === 'gromlab-sprite-viewer',
+    },
+  },
+}
+```
+
+Render the Viewer component on your development page. Viewer is not required by `AppIcon`.