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

src/modes/alpine-vite/adapter.ts

@@ -0,0 +1,25 @@
+import { compileSpriteContent } from '../../compiler.js'
+import { createCompiledSpriteArtifact } from '../../core/compiled-artifact.js'
+import type { ModeAdapter } from '../../core/mode-adapter.js'
+import { generateOutputFiles } from './output.js'
+
+export const alpineViteAdapter: ModeAdapter<'alpine@vite'> = {
+  mode: 'alpine@vite',
+  async generate(context) {
+    const bytes = await compileSpriteContent(context.prepared.folder, context.config.transform, {
+      rootViewBox: false,
+    })
+    const artifact = createCompiledSpriteArtifact(bytes, context.prepared.iconNames, 'stack')
+
+    return {
+      files: generateOutputFiles(context.config, artifact),
+      paths: {
+        generatedDir: '.svg-sprite',
+        sprite: '.svg-sprite/sprite.svg',
+        manifest: '.svg-sprite/svg-sprite.manifest.js',
+        entry: '.svg-sprite/index.js',
+      },
+      result: { target: 'vite' },
+    }
+  },
+}

src/modes/alpine-vite/output.ts

@@ -0,0 +1,272 @@
+import path from 'node:path'
+import type { CompiledSpriteArtifact } from '../../core/compiled-artifact.js'
+import { GENERATED_MARKER } from '../../core/generated-markers.js'
+import type { GeneratedFile } from '../../core/mode-adapter.js'
+import type { ResolvedSpriteConfig } from '../../types.js'
+
+const MODE = 'alpine@vite'
+const TARGET = 'vite'
+const OUTPUT_DIR = '.svg-sprite'
+const NOTICE = 'AUTOMATICALLY GENERATED FILE. Do not edit manually.'
+
+function pascal(value: string): string {
+  return value.split('-').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join('')
+}
+
+function camel(value: string): string {
+  return value.replace(/-([a-z0-9])/g, (_, char: string) => char.toUpperCase())
+}
+
+function header(enabled: boolean): string {
+  return enabled
+    ? `/*\n * ${NOTICE}\n * ${GENERATED_MARKER}.\n */`
+    : `/* ${GENERATED_MARKER}. Do not edit. */`
+}
+
+function markedSvg(bytes: Uint8Array, enabled: boolean): string {
+  const marker = enabled ? `${NOTICE} ${GENERATED_MARKER}.` : `${GENERATED_MARKER}. Do not edit.`
+  const content = new TextDecoder().decode(bytes)
+  return content.startsWith('<?xml')
+    ? content.replace(/^(<\?xml[^?]*\?>)\s*/, `$1\n<!-- ${marker} -->\n`)
+    : `<!-- ${marker} -->\n${content}`
+}
+
+function description(config: ResolvedSpriteConfig): string[] {
+  const text = config.description ?? `Icon names for the "${config.name}" SVG sprite.`
+  return ['/**', ...text.split(/\r?\n/).map((line) => ` * ${line.replace(/\*\//g, '* /')}`), ' */']
+}
+
+function iconData(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const prefix = camel(config.name)
+  const names = artifact.icons.map((icon) => icon.name)
+  const ids = Object.fromEntries(artifact.icons.map((icon) => [icon.name, icon.id]))
+  return [
+    header(config.generatedNotice),
+    '',
+    ...description(config),
+    `export const ${prefix}IconNames = ${JSON.stringify(names, null, 2)}`,
+    '',
+    `export const ${prefix}IconIds = ${JSON.stringify(ids, null, 2)}`,
+    '',
+  ].join('\n')
+}
+
+function iconTypes(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const typeName = `${pascal(config.name)}IconName`
+  const names = `${camel(config.name)}IconNames`
+  const ids = `${camel(config.name)}IconIds`
+  return [
+    header(config.generatedNotice),
+    '',
+    ...description(config),
+    `export declare const ${names}: readonly [`,
+    ...artifact.icons.map((icon) => `  ${JSON.stringify(icon.name)},`),
+    ']',
+    `export type ${typeName} = typeof ${names}[number]`,
+    `export declare const ${ids}: {`,
+    ...artifact.icons.map((icon) => `  readonly ${JSON.stringify(icon.name)}: ${JSON.stringify(icon.id)}`),
+    '}',
+    '',
+  ].join('\n')
+}
+
+function integration(config: ResolvedSpriteConfig): string {
+  const prefix = camel(config.name)
+  const directive = `${config.name}-icon`
+  const magic = `${prefix}IconHref`
+  const className = `${config.name}-icon`
+  const styleId = `svg-sprites-${config.name}-alpine`
+  return [
+    header(config.generatedNotice),
+    "import integrationStyles from './alpine-integration.css?inline'",
+    `import { ${prefix}IconIds } from '../icon-data.js'`,
+    "import spriteUrl from '../sprite.svg?no-inline'",
+    '',
+    `export const ${prefix}IconDirective = ${JSON.stringify(directive)}`,
+    `export const ${prefix}IconMagic = ${JSON.stringify(magic)}`,
+    '',
+    'function iconHref(icon) {',
+    `  const id = ${prefix}IconIds[icon]`,
+    "  return id ? spriteUrl + '#' + id : ''",
+    '}',
+    '',
+    'function installStyles() {',
+    `  if (document.getElementById(${JSON.stringify(styleId)})) return`,
+    "  const style = document.createElement('style')",
+    `  style.id = ${JSON.stringify(styleId)}`,
+    '  style.textContent = integrationStyles',
+    '  document.head.append(style)',
+    '}',
+    '',
+    `export const ${prefix}AlpinePlugin = (Alpine) => {`,
+    '  installStyles()',
+    `  Alpine.magic(${prefix}IconMagic, () => iconHref)`,
+    '',
+    `  Alpine.directive(${prefix}IconDirective, (element, { expression }, { effect, evaluateLater }) => {`,
+    "    if (element.namespaceURI !== 'http://www.w3.org/2000/svg' || element.localName !== 'svg') {",
+    `      throw new Error('x-${directive} must be used on an <svg> element.')`,
+    '    }',
+    '',
+    `    element.classList.add(${JSON.stringify(className)})`,
+    "    let use = Array.from(element.children).find((child) => child.localName === 'use' && child.hasAttribute('data-svg-sprites-icon'))",
+    '    if (!use) {',
+    "      use = document.createElementNS('http://www.w3.org/2000/svg', 'use')",
+    "      use.setAttribute('data-svg-sprites-icon', '')",
+    '      element.append(use)',
+    '    }',
+    '',
+    '    const evaluateIcon = evaluateLater(expression)',
+    '    effect(() => {',
+    '      evaluateIcon((icon) => {',
+    '        const href = iconHref(icon)',
+    "        if (href) use.setAttribute('href', href)",
+    "        else use.removeAttribute('href')",
+    '      })',
+    '    })',
+    '  })',
+    '}',
+    '',
+  ].join('\n')
+}
+
+function integrationTypes(config: ResolvedSpriteConfig): string {
+  const pascalName = pascal(config.name)
+  const prefix = camel(config.name)
+  const typeName = `${pascalName}IconName`
+  return [
+    header(config.generatedNotice),
+    '',
+    `export type ${pascalName}AlpineDirectiveUtilities = {`,
+    '  effect(callback: () => void): void',
+    '  evaluateLater(expression: string): (receiver: (value: unknown) => void) => void',
+    '}',
+    `export type ${pascalName}AlpineApi = {`,
+    '  magic(name: string, callback: () => unknown): unknown',
+    `  directive(name: string, callback: (element: Element, directive: { expression: string }, utilities: ${pascalName}AlpineDirectiveUtilities) => void): unknown`,
+    '}',
+    `export type ${pascalName}AlpinePluginType = (Alpine: ${pascalName}AlpineApi) => void`,
+    `export declare const ${prefix}IconDirective: ${JSON.stringify(`${config.name}-icon`)}`,
+    `export declare const ${prefix}IconMagic: ${JSON.stringify(`${prefix}IconHref`)}`,
+    `export declare const ${prefix}AlpinePlugin: ${pascalName}AlpinePluginType`,
+    `export type { ${typeName} } from '../icon-data.js'`,
+    '',
+  ].join('\n')
+}
+
+function styles(config: ResolvedSpriteConfig): string {
+  const transition = config.transform.addTransition
+    ? ['  transition-property: fill, stroke, color;', '  transition-duration: 0.3s;', '  transition-timing-function: ease;']
+    : []
+  return [
+    header(config.generatedNotice),
+    '',
+    `.${config.name}-icon {`,
+    '  display: inline-block;',
+    '  width: 1em;',
+    '  height: 1em;',
+    '  vertical-align: middle;',
+    ...transition,
+    '}',
+    '',
+  ].join('\n')
+}
+
+function index(config: ResolvedSpriteConfig): string {
+  const prefix = camel(config.name)
+  return [
+    header(config.generatedNotice),
+    `export { ${prefix}AlpinePlugin, ${prefix}IconDirective, ${prefix}IconMagic } from './alpine/alpine-integration.js'`,
+    `export { ${prefix}IconNames } from './icon-data.js'`,
+    '',
+  ].join('\n')
+}
+
+function indexTypes(config: ResolvedSpriteConfig): string {
+  const pascalName = pascal(config.name)
+  const prefix = camel(config.name)
+  return [
+    header(config.generatedNotice),
+    `export { ${prefix}AlpinePlugin, ${prefix}IconDirective, ${prefix}IconMagic } from './alpine/alpine-integration.js'`,
+    `export type { ${pascalName}AlpineApi, ${pascalName}AlpineDirectiveUtilities, ${pascalName}AlpinePluginType } from './alpine/alpine-integration.js'`,
+    `export { ${prefix}IconNames } from './icon-data.js'`,
+    `export type { ${pascalName}IconName } from './icon-data.js'`,
+    '',
+  ].join('\n')
+}
+
+function manifest(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const prefix = camel(config.name)
+  const data = {
+    schemaVersion: 1,
+    generator: '@gromlab/svg-sprites',
+    name: config.name,
+    ...(config.description === undefined ? {} : { description: config.description }),
+    usage: {
+      framework: 'alpine',
+      pluginName: `${prefix}AlpinePlugin`,
+      directive: `x-${config.name}-icon`,
+      magic: `$${prefix}IconHref`,
+    },
+    mode: MODE,
+    target: TARGET,
+    format: artifact.format,
+    iconCount: artifact.icons.length,
+    spriteUrl: '__SPRITE_URL__',
+    icons: artifact.icons,
+  }
+  const source = JSON.stringify(data, null, 2).replace('"__SPRITE_URL__"', 'spriteUrl')
+  return [
+    header(config.generatedNotice),
+    "import spriteUrl from './sprite.svg?no-inline'",
+    '',
+    `export const spriteManifest = ${source}`,
+    '',
+    'export default spriteManifest',
+    '',
+  ].join('\n')
+}
+
+function manifestTypes(config: ResolvedSpriteConfig): string {
+  return [
+    header(config.generatedNotice),
+    '',
+    'export type SpriteManifestColor = { variable: `--icon-color-${number}`; fallback: string }',
+    'export type SpriteManifestIcon = {',
+    '  name: string',
+    '  id: string',
+    '  viewBox: string | null',
+    '  colors: readonly SpriteManifestColor[]',
+    '}',
+    'export type SpriteManifest = {',
+    '  schemaVersion: 1',
+    "  generator: '@gromlab/svg-sprites'",
+    '  name: string',
+    '  description?: string',
+    "  usage: { framework: 'alpine'; pluginName: string; directive: string; magic: string }",
+    "  mode: 'alpine@vite'",
+    "  target: 'vite'",
+    "  format: 'stack' | 'symbol'",
+    '  iconCount: number',
+    '  spriteUrl: string',
+    '  icons: readonly SpriteManifestIcon[]',
+    '}',
+    'export declare const spriteManifest: SpriteManifest',
+    'export default spriteManifest',
+    '',
+  ].join('\n')
+}
+
+export function generateOutputFiles(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): GeneratedFile[] {
+  return [
+    { path: path.posix.join(OUTPUT_DIR, 'index.js'), content: index(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'index.d.ts'), content: indexTypes(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'sprite.svg'), content: markedSvg(artifact.bytes, config.generatedNotice) },
+    { path: path.posix.join(OUTPUT_DIR, 'icon-data.js'), content: iconData(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'icon-data.d.ts'), content: iconTypes(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'alpine', 'alpine-integration.js'), content: integration(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'alpine', 'alpine-integration.d.ts'), content: integrationTypes(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'alpine', 'alpine-integration.css'), content: styles(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.js'), content: manifest(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.d.ts'), content: manifestTypes(config) },
+  ]
+}

src/modes/alpine-webpack/adapter.ts

@@ -0,0 +1,25 @@
+import { compileSpriteContent } from '../../compiler.js'
+import { createCompiledSpriteArtifact } from '../../core/compiled-artifact.js'
+import type { ModeAdapter } from '../../core/mode-adapter.js'
+import { generateOutputFiles } from './output.js'
+
+export const alpineWebpackAdapter: ModeAdapter<'alpine@webpack'> = {
+  mode: 'alpine@webpack',
+  async generate(context) {
+    const bytes = await compileSpriteContent(context.prepared.folder, context.config.transform, {
+      rootViewBox: false,
+    })
+    const artifact = createCompiledSpriteArtifact(bytes, context.prepared.iconNames, 'stack')
+
+    return {
+      files: generateOutputFiles(context.config, artifact),
+      paths: {
+        generatedDir: '.svg-sprite',
+        sprite: '.svg-sprite/sprite.svg',
+        manifest: '.svg-sprite/svg-sprite.manifest.js',
+        entry: '.svg-sprite/index.js',
+      },
+      result: { target: 'webpack' },
+    }
+  },
+}

src/modes/alpine-webpack/output.ts

@@ -0,0 +1,273 @@
+import path from 'node:path'
+import type { CompiledSpriteArtifact } from '../../core/compiled-artifact.js'
+import { GENERATED_MARKER } from '../../core/generated-markers.js'
+import type { GeneratedFile } from '../../core/mode-adapter.js'
+import type { ResolvedSpriteConfig } from '../../types.js'
+
+const MODE = 'alpine@webpack'
+const TARGET = 'webpack'
+const OUTPUT_DIR = '.svg-sprite'
+const NOTICE = 'AUTOMATICALLY GENERATED FILE. Do not edit manually.'
+
+function pascal(value: string): string {
+  return value.split('-').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join('')
+}
+
+function camel(value: string): string {
+  return value.replace(/-([a-z0-9])/g, (_, char: string) => char.toUpperCase())
+}
+
+function header(enabled: boolean): string {
+  return enabled
+    ? `/*\n * ${NOTICE}\n * ${GENERATED_MARKER}.\n */`
+    : `/* ${GENERATED_MARKER}. Do not edit. */`
+}
+
+function markedSvg(bytes: Uint8Array, enabled: boolean): string {
+  const marker = enabled ? `${NOTICE} ${GENERATED_MARKER}.` : `${GENERATED_MARKER}. Do not edit.`
+  const content = new TextDecoder().decode(bytes)
+  return content.startsWith('<?xml')
+    ? content.replace(/^(<\?xml[^?]*\?>)\s*/, `$1\n<!-- ${marker} -->\n`)
+    : `<!-- ${marker} -->\n${content}`
+}
+
+function description(config: ResolvedSpriteConfig): string[] {
+  const text = config.description ?? `Icon names for the "${config.name}" SVG sprite.`
+  return ['/**', ...text.split(/\r?\n/).map((line) => ` * ${line.replace(/\*\//g, '* /')}`), ' */']
+}
+
+function iconData(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const prefix = camel(config.name)
+  const names = artifact.icons.map((icon) => icon.name)
+  const ids = Object.fromEntries(artifact.icons.map((icon) => [icon.name, icon.id]))
+  return [
+    header(config.generatedNotice),
+    '',
+    ...description(config),
+    `export const ${prefix}IconNames = ${JSON.stringify(names, null, 2)}`,
+    '',
+    `export const ${prefix}IconIds = ${JSON.stringify(ids, null, 2)}`,
+    '',
+  ].join('\n')
+}
+
+function iconTypes(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const typeName = `${pascal(config.name)}IconName`
+  const names = `${camel(config.name)}IconNames`
+  const ids = `${camel(config.name)}IconIds`
+  return [
+    header(config.generatedNotice),
+    '',
+    ...description(config),
+    `export declare const ${names}: readonly [`,
+    ...artifact.icons.map((icon) => `  ${JSON.stringify(icon.name)},`),
+    ']',
+    `export type ${typeName} = typeof ${names}[number]`,
+    `export declare const ${ids}: {`,
+    ...artifact.icons.map((icon) => `  readonly ${JSON.stringify(icon.name)}: ${JSON.stringify(icon.id)}`),
+    '}',
+    '',
+  ].join('\n')
+}
+
+function integration(config: ResolvedSpriteConfig): string {
+  const prefix = camel(config.name)
+  const directive = `${config.name}-icon`
+  const magic = `${prefix}IconHref`
+  const className = `${config.name}-icon`
+  const styleId = `svg-sprites-${config.name}-alpine`
+  return [
+    header(config.generatedNotice),
+    "import integrationStyles from './alpine-integration.css?inline'",
+    `import { ${prefix}IconIds } from '../icon-data.js'`,
+    '',
+    "const spriteUrl = new URL('../sprite.svg', import.meta.url).href",
+    '',
+    `export const ${prefix}IconDirective = ${JSON.stringify(directive)}`,
+    `export const ${prefix}IconMagic = ${JSON.stringify(magic)}`,
+    '',
+    'function iconHref(icon) {',
+    `  const id = ${prefix}IconIds[icon]`,
+    "  return id ? spriteUrl + '#' + id : ''",
+    '}',
+    '',
+    'function installStyles() {',
+    `  if (document.getElementById(${JSON.stringify(styleId)})) return`,
+    "  const style = document.createElement('style')",
+    `  style.id = ${JSON.stringify(styleId)}`,
+    '  style.textContent = integrationStyles',
+    '  document.head.append(style)',
+    '}',
+    '',
+    `export const ${prefix}AlpinePlugin = (Alpine) => {`,
+    '  installStyles()',
+    `  Alpine.magic(${prefix}IconMagic, () => iconHref)`,
+    '',
+    `  Alpine.directive(${prefix}IconDirective, (element, { expression }, { effect, evaluateLater }) => {`,
+    "    if (element.namespaceURI !== 'http://www.w3.org/2000/svg' || element.localName !== 'svg') {",
+    `      throw new Error('x-${directive} must be used on an <svg> element.')`,
+    '    }',
+    '',
+    `    element.classList.add(${JSON.stringify(className)})`,
+    "    let use = Array.from(element.children).find((child) => child.localName === 'use' && child.hasAttribute('data-svg-sprites-icon'))",
+    '    if (!use) {',
+    "      use = document.createElementNS('http://www.w3.org/2000/svg', 'use')",
+    "      use.setAttribute('data-svg-sprites-icon', '')",
+    '      element.append(use)',
+    '    }',
+    '',
+    '    const evaluateIcon = evaluateLater(expression)',
+    '    effect(() => {',
+    '      evaluateIcon((icon) => {',
+    '        const href = iconHref(icon)',
+    "        if (href) use.setAttribute('href', href)",
+    "        else use.removeAttribute('href')",
+    '      })',
+    '    })',
+    '  })',
+    '}',
+    '',
+  ].join('\n')
+}
+
+function integrationTypes(config: ResolvedSpriteConfig): string {
+  const pascalName = pascal(config.name)
+  const prefix = camel(config.name)
+  const typeName = `${pascalName}IconName`
+  return [
+    header(config.generatedNotice),
+    '',
+    `export type ${pascalName}AlpineDirectiveUtilities = {`,
+    '  effect(callback: () => void): void',
+    '  evaluateLater(expression: string): (receiver: (value: unknown) => void) => void',
+    '}',
+    `export type ${pascalName}AlpineApi = {`,
+    '  magic(name: string, callback: () => unknown): unknown',
+    `  directive(name: string, callback: (element: Element, directive: { expression: string }, utilities: ${pascalName}AlpineDirectiveUtilities) => void): unknown`,
+    '}',
+    `export type ${pascalName}AlpinePluginType = (Alpine: ${pascalName}AlpineApi) => void`,
+    `export declare const ${prefix}IconDirective: ${JSON.stringify(`${config.name}-icon`)}`,
+    `export declare const ${prefix}IconMagic: ${JSON.stringify(`${prefix}IconHref`)}`,
+    `export declare const ${prefix}AlpinePlugin: ${pascalName}AlpinePluginType`,
+    `export type { ${typeName} } from '../icon-data.js'`,
+    '',
+  ].join('\n')
+}
+
+function styles(config: ResolvedSpriteConfig): string {
+  const transition = config.transform.addTransition
+    ? ['  transition-property: fill, stroke, color;', '  transition-duration: 0.3s;', '  transition-timing-function: ease;']
+    : []
+  return [
+    header(config.generatedNotice),
+    '',
+    `.${config.name}-icon {`,
+    '  display: inline-block;',
+    '  width: 1em;',
+    '  height: 1em;',
+    '  vertical-align: middle;',
+    ...transition,
+    '}',
+    '',
+  ].join('\n')
+}
+
+function index(config: ResolvedSpriteConfig): string {
+  const prefix = camel(config.name)
+  return [
+    header(config.generatedNotice),
+    `export { ${prefix}AlpinePlugin, ${prefix}IconDirective, ${prefix}IconMagic } from './alpine/alpine-integration.js'`,
+    `export { ${prefix}IconNames } from './icon-data.js'`,
+    '',
+  ].join('\n')
+}
+
+function indexTypes(config: ResolvedSpriteConfig): string {
+  const pascalName = pascal(config.name)
+  const prefix = camel(config.name)
+  return [
+    header(config.generatedNotice),
+    `export { ${prefix}AlpinePlugin, ${prefix}IconDirective, ${prefix}IconMagic } from './alpine/alpine-integration.js'`,
+    `export type { ${pascalName}AlpineApi, ${pascalName}AlpineDirectiveUtilities, ${pascalName}AlpinePluginType } from './alpine/alpine-integration.js'`,
+    `export { ${prefix}IconNames } from './icon-data.js'`,
+    `export type { ${pascalName}IconName } from './icon-data.js'`,
+    '',
+  ].join('\n')
+}
+
+function manifest(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const prefix = camel(config.name)
+  const data = {
+    schemaVersion: 1,
+    generator: '@gromlab/svg-sprites',
+    name: config.name,
+    ...(config.description === undefined ? {} : { description: config.description }),
+    usage: {
+      framework: 'alpine',
+      pluginName: `${prefix}AlpinePlugin`,
+      directive: `x-${config.name}-icon`,
+      magic: `$${prefix}IconHref`,
+    },
+    mode: MODE,
+    target: TARGET,
+    format: artifact.format,
+    iconCount: artifact.icons.length,
+    spriteUrl: '__SPRITE_URL__',
+    icons: artifact.icons,
+  }
+  const source = JSON.stringify(data, null, 2).replace('"__SPRITE_URL__"', 'spriteUrl')
+  return [
+    header(config.generatedNotice),
+    "const spriteUrl = new URL('./sprite.svg', import.meta.url).href",
+    '',
+    `export const spriteManifest = ${source}`,
+    '',
+    'export default spriteManifest',
+    '',
+  ].join('\n')
+}
+
+function manifestTypes(config: ResolvedSpriteConfig): string {
+  return [
+    header(config.generatedNotice),
+    '',
+    'export type SpriteManifestColor = { variable: `--icon-color-${number}`; fallback: string }',
+    'export type SpriteManifestIcon = {',
+    '  name: string',
+    '  id: string',
+    '  viewBox: string | null',
+    '  colors: readonly SpriteManifestColor[]',
+    '}',
+    'export type SpriteManifest = {',
+    '  schemaVersion: 1',
+    "  generator: '@gromlab/svg-sprites'",
+    '  name: string',
+    '  description?: string',
+    "  usage: { framework: 'alpine'; pluginName: string; directive: string; magic: string }",
+    "  mode: 'alpine@webpack'",
+    "  target: 'webpack'",
+    "  format: 'stack' | 'symbol'",
+    '  iconCount: number',
+    '  spriteUrl: string',
+    '  icons: readonly SpriteManifestIcon[]',
+    '}',
+    'export declare const spriteManifest: SpriteManifest',
+    'export default spriteManifest',
+    '',
+  ].join('\n')
+}
+
+export function generateOutputFiles(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): GeneratedFile[] {
+  return [
+    { path: path.posix.join(OUTPUT_DIR, 'index.js'), content: index(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'index.d.ts'), content: indexTypes(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'sprite.svg'), content: markedSvg(artifact.bytes, config.generatedNotice) },
+    { path: path.posix.join(OUTPUT_DIR, 'icon-data.js'), content: iconData(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'icon-data.d.ts'), content: iconTypes(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'alpine', 'alpine-integration.js'), content: integration(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'alpine', 'alpine-integration.d.ts'), content: integrationTypes(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'alpine', 'alpine-integration.css'), content: styles(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.js'), content: manifest(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.d.ts'), content: manifestTypes(config) },
+  ]
+}

src/modes/angular-application/adapter.ts

@@ -0,0 +1,36 @@
+import { compileSpriteContent } from '../../compiler.js'
+import { createCompiledSpriteArtifact } from '../../core/compiled-artifact.js'
+import type { ModeAdapterContext, OutputPlan } from '../../core/mode-adapter.js'
+import { generateOutputFiles } from './output.js'
+
+type AngularApplicationOutputPlan = Omit<OutputPlan, 'result'> & {
+  readonly result: { readonly target: 'application' }
+}
+
+type AngularApplicationAdapter = {
+  readonly mode: 'angular@application'
+  generate(context: ModeAdapterContext): Promise<AngularApplicationOutputPlan>
+}
+
+export const angularApplicationAdapter: AngularApplicationAdapter = {
+  mode: 'angular@application',
+  async generate(context) {
+    const bytes = await compileSpriteContent(
+      context.prepared.folder,
+      context.config.transform,
+      { rootViewBox: false },
+    )
+    const artifact = createCompiledSpriteArtifact(bytes, context.prepared.iconNames, 'stack')
+
+    return {
+      files: generateOutputFiles(context.config, artifact),
+      paths: {
+        generatedDir: '.svg-sprite',
+        sprite: '.svg-sprite/sprite.svg',
+        manifest: '.svg-sprite/svg-sprite.manifest.js',
+        entry: '.svg-sprite/index.ts',
+      },
+      result: { target: 'application' },
+    }
+  },
+}

src/modes/angular-application/output.ts

@@ -0,0 +1,242 @@
+import path from 'node:path'
+import type { CompiledSpriteArtifact } from '../../core/compiled-artifact.js'
+import { GENERATED_MARKER } from '../../core/generated-markers.js'
+import type { GeneratedFile } from '../../core/mode-adapter.js'
+import type { ResolvedSpriteConfig } from '../../types.js'
+
+const MODE = 'angular@application'
+const TARGET = 'application'
+const OUTPUT_DIR = '.svg-sprite'
+const NOTICE = 'АВТОМАТИЧЕСКИ СГЕНЕРИРОВАННЫЙ ФАЙЛ. Не редактируйте вручную.'
+
+function pascal(value: string): string {
+  return value.split('-').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join('')
+}
+
+function camel(value: string): string {
+  return value.replace(/-([a-z0-9])/g, (_, char: string) => char.toUpperCase())
+}
+
+function header(enabled: boolean): string {
+  return enabled
+    ? `/*\n * ${NOTICE}\n * ${GENERATED_MARKER}.\n */`
+    : `/* ${GENERATED_MARKER}. Do not edit. */`
+}
+
+function svg(bytes: Uint8Array, enabled: boolean): string {
+  const marker = enabled ? `${NOTICE}\n  ${GENERATED_MARKER}.` : `${GENERATED_MARKER}. Do not edit.`
+  const content = new TextDecoder().decode(bytes)
+  return content.startsWith('<?xml')
+    ? content.replace(/^(<\?xml[^?]*\?>)\s*/, `$1\n<!-- ${marker} -->\n`)
+    : `<!-- ${marker} -->\n${content}`
+}
+
+function description(config: ResolvedSpriteConfig): string[] {
+  const text = config.description ?? `Имена иконок SVG-спрайта «${config.name}».`
+  return ['/**', ...text.split(/\r?\n/).map((line) => ` * ${line.replace(/\*\//g, '* /')}`), ' */']
+}
+
+function iconData(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const prefix = camel(config.name)
+  return [
+    header(config.generatedNotice),
+    '',
+    ...description(config),
+    `export const ${prefix}IconNames = ${JSON.stringify(artifact.icons.map((icon) => icon.name), null, 2)}`,
+    '',
+    `export const ${prefix}IconIds = ${JSON.stringify(Object.fromEntries(artifact.icons.map((icon) => [icon.name, icon.id])), null, 2)}`,
+    '',
+  ].join('\n')
+}
+
+function iconDeclarations(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const componentName = `${pascal(config.name)}Icon`
+  const names = `${camel(config.name)}IconNames`
+  const ids = `${camel(config.name)}IconIds`
+  return [
+    header(config.generatedNotice),
+    '',
+    ...description(config),
+    `export declare const ${names}: readonly [`,
+    ...artifact.icons.map((icon) => `  ${JSON.stringify(icon.name)},`),
+    ']',
+    `export type ${componentName}Name = typeof ${names}[number]`,
+    `export declare const ${ids}: {`,
+    ...artifact.icons.map((icon) => `  readonly ${JSON.stringify(icon.name)}: ${JSON.stringify(icon.id)}`),
+    '}',
+    '',
+  ].join('\n')
+}
+
+function component(config: ResolvedSpriteConfig): string {
+  const componentName = `${pascal(config.name)}Icon`
+  const typeName = `${componentName}Name`
+  const ids = `${camel(config.name)}IconIds`
+  return [
+    header(config.generatedNotice),
+    '/// <reference path="../assets.d.ts" />',
+    "import { ChangeDetectionStrategy, Component, input } from '@angular/core'",
+    `import type { ${typeName} } from '../icon-data.js'`,
+    `import { ${ids} } from '../icon-data.js'`,
+    "import spriteUrl from '../sprite.svg'",
+    '',
+    '@Component({',
+    `  selector: '${config.name}-icon',`,
+    '  standalone: true,',
+    "  template: '<svg class=\"root\" focusable=\"false\"><use [attr.href]=\"href\"></use></svg>',",
+    "  styleUrl: './angular-component.css',",
+    '  changeDetection: ChangeDetectionStrategy.OnPush,',
+    '})',
+    `export class ${componentName} {`,
+    `  readonly icon = input.required<${typeName}>()`,
+    '',
+    '  get href(): string {',
+    `    return spriteUrl + '#' + ${ids}[this.icon()]`,
+    '  }',
+    '}',
+    '',
+  ].join('\n')
+}
+
+function componentDeclarations(config: ResolvedSpriteConfig): string {
+  const componentName = `${pascal(config.name)}Icon`
+  const typeName = `${componentName}Name`
+  return [
+    header(config.generatedNotice),
+    "import type * as i0 from '@angular/core'",
+    "import type { InputSignal } from '@angular/core'",
+    `import type { ${typeName} } from '../icon-data.js'`,
+    '',
+    `export declare class ${componentName} {`,
+    `  readonly icon: InputSignal<${typeName}>`,
+    '  get href(): string',
+    `  static ɵfac: i0.ɵɵFactoryDeclaration<${componentName}, never>`,
+    `  static ɵcmp: i0.ɵɵComponentDeclaration<${componentName}, '${config.name}-icon', never, { icon: { alias: 'icon'; required: true; isSignal: true } }, {}, never, never, true, never>`,
+    '}',
+    '',
+  ].join('\n')
+}
+
+function index(config: ResolvedSpriteConfig): string {
+  return [
+    header(config.generatedNotice),
+    `export { ${pascal(config.name)}Icon } from './angular/angular-component'`,
+    `export { ${camel(config.name)}IconNames } from './icon-data.js'`,
+    `export type { ${pascal(config.name)}IconName } from './icon-data.js'`,
+    '',
+  ].join('\n')
+}
+
+function indexDeclarations(config: ResolvedSpriteConfig): string {
+  const componentName = `${pascal(config.name)}Icon`
+  return [
+    header(config.generatedNotice),
+    `export { ${componentName} } from './angular/angular-component'`,
+    `export { ${camel(config.name)}IconNames } from './icon-data.js'`,
+    `export type { ${componentName}Name } from './icon-data.js'`,
+    '',
+  ].join('\n')
+}
+
+function assetDeclarations(config: ResolvedSpriteConfig): string {
+  return [
+    header(config.generatedNotice),
+    "declare module '*.svg' {",
+    '  const url: string',
+    '  export default url',
+    '}',
+    '',
+  ].join('\n')
+}
+
+function styles(config: ResolvedSpriteConfig): string {
+  const transition = config.transform.addTransition
+    ? ['  transition-property: fill, stroke, color;', '  transition-duration: 0.3s;', '  transition-timing-function: ease;']
+    : []
+  return [
+    header(config.generatedNotice),
+    '',
+    ':host {',
+    '  display: inline-flex;',
+    '}',
+    '',
+    '.root {',
+    '  width: 100%;',
+    '  height: 100%;',
+    ...transition,
+    '}',
+    '',
+  ].join('\n')
+}
+
+function manifest(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const data = {
+    schemaVersion: 1,
+    generator: '@gromlab/svg-sprites',
+    name: config.name,
+    ...(config.description === undefined ? {} : { description: config.description }),
+    usage: {
+      framework: 'angular',
+      componentName: `${pascal(config.name)}Icon`,
+      selector: `${config.name}-icon`,
+    },
+    mode: MODE,
+    target: TARGET,
+    format: artifact.format,
+    iconCount: artifact.icons.length,
+    spriteUrl: '__SPRITE_URL__',
+    icons: artifact.icons,
+  }
+  const source = JSON.stringify(data, null, 2).replace('"__SPRITE_URL__"', 'spriteUrl')
+  return [
+    header(config.generatedNotice),
+    "import spriteUrl from './sprite.svg'",
+    '',
+    `export const spriteManifest = ${source}`,
+    '',
+    'export default spriteManifest',
+    '',
+  ].join('\n')
+}
+
+function manifestDeclarations(config: ResolvedSpriteConfig): string {
+  return [
+    header(config.generatedNotice),
+    '',
+    'export type SpriteManifestColor = { variable: `--icon-color-${number}`; fallback: string }',
+    'export type SpriteManifestIcon = { name: string; id: string; viewBox: string | null; colors: readonly SpriteManifestColor[] }',
+    'export type SpriteManifest = {',
+    '  schemaVersion: 1',
+    "  generator: '@gromlab/svg-sprites'",
+    '  name: string',
+    '  description?: string',
+    "  usage: { framework: 'angular'; componentName: string; selector: string }",
+    "  mode: 'angular@application'",
+    "  target: 'application'",
+    "  format: 'stack' | 'symbol'",
+    '  iconCount: number',
+    '  spriteUrl: string',
+    '  icons: readonly SpriteManifestIcon[]',
+    '}',
+    '',
+    'export declare const spriteManifest: SpriteManifest',
+    'export default spriteManifest',
+    '',
+  ].join('\n')
+}
+
+export function generateOutputFiles(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): GeneratedFile[] {
+  return [
+    { path: path.posix.join(OUTPUT_DIR, 'index.ts'), content: index(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'index.d.ts'), content: indexDeclarations(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'assets.d.ts'), content: assetDeclarations(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'sprite.svg'), content: svg(artifact.bytes, config.generatedNotice) },
+    { path: path.posix.join(OUTPUT_DIR, 'icon-data.js'), content: iconData(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'icon-data.d.ts'), content: iconDeclarations(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'angular', 'angular-component.ts'), content: component(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'angular', 'angular-component.d.ts'), content: componentDeclarations(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'angular', 'angular-component.css'), content: styles(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.js'), content: manifest(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.d.ts'), content: manifestDeclarations(config) },
+  ]
+}

src/modes/angular-webpack/adapter.ts

@@ -0,0 +1,36 @@
+import { compileSpriteContent } from '../../compiler.js'
+import { createCompiledSpriteArtifact } from '../../core/compiled-artifact.js'
+import type { ModeAdapterContext, OutputPlan } from '../../core/mode-adapter.js'
+import { generateOutputFiles } from './output.js'
+
+type AngularWebpackOutputPlan = Omit<OutputPlan, 'result'> & {
+  readonly result: { readonly target: 'webpack' }
+}
+
+type AngularWebpackAdapter = {
+  readonly mode: 'angular@webpack'
+  generate(context: ModeAdapterContext): Promise<AngularWebpackOutputPlan>
+}
+
+export const angularWebpackAdapter: AngularWebpackAdapter = {
+  mode: 'angular@webpack',
+  async generate(context) {
+    const bytes = await compileSpriteContent(
+      context.prepared.folder,
+      context.config.transform,
+      { rootViewBox: false },
+    )
+    const artifact = createCompiledSpriteArtifact(bytes, context.prepared.iconNames, 'stack')
+
+    return {
+      files: generateOutputFiles(context.config, artifact),
+      paths: {
+        generatedDir: '.svg-sprite',
+        sprite: '.svg-sprite/sprite.svg',
+        manifest: '.svg-sprite/svg-sprite.manifest.js',
+        entry: '.svg-sprite/index.ts',
+      },
+      result: { target: 'webpack' },
+    }
+  },
+}

src/modes/angular-webpack/output.ts

@@ -0,0 +1,230 @@
+import path from 'node:path'
+import type { CompiledSpriteArtifact } from '../../core/compiled-artifact.js'
+import { GENERATED_MARKER } from '../../core/generated-markers.js'
+import type { GeneratedFile } from '../../core/mode-adapter.js'
+import type { ResolvedSpriteConfig } from '../../types.js'
+
+const MODE = 'angular@webpack'
+const TARGET = 'webpack'
+const OUTPUT_DIR = '.svg-sprite'
+const NOTICE = 'АВТОМАТИЧЕСКИ СГЕНЕРИРОВАННЫЙ ФАЙЛ. Не редактируйте вручную.'
+
+function pascal(value: string): string {
+  return value.split('-').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join('')
+}
+
+function camel(value: string): string {
+  return value.replace(/-([a-z0-9])/g, (_, char: string) => char.toUpperCase())
+}
+
+function header(enabled: boolean): string {
+  return enabled
+    ? `/*\n * ${NOTICE}\n * ${GENERATED_MARKER}.\n */`
+    : `/* ${GENERATED_MARKER}. Do not edit. */`
+}
+
+function svg(bytes: Uint8Array, enabled: boolean): string {
+  const marker = enabled ? `${NOTICE}\n  ${GENERATED_MARKER}.` : `${GENERATED_MARKER}. Do not edit.`
+  const content = new TextDecoder().decode(bytes)
+  return content.startsWith('<?xml')
+    ? content.replace(/^(<\?xml[^?]*\?>)\s*/, `$1\n<!-- ${marker} -->\n`)
+    : `<!-- ${marker} -->\n${content}`
+}
+
+function description(config: ResolvedSpriteConfig): string[] {
+  const text = config.description ?? `Имена иконок SVG-спрайта «${config.name}».`
+  return ['/**', ...text.split(/\r?\n/).map((line) => ` * ${line.replace(/\*\//g, '* /')}`), ' */']
+}
+
+function iconData(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const prefix = camel(config.name)
+  return [
+    header(config.generatedNotice),
+    '',
+    ...description(config),
+    `export const ${prefix}IconNames = ${JSON.stringify(artifact.icons.map((icon) => icon.name), null, 2)}`,
+    '',
+    `export const ${prefix}IconIds = ${JSON.stringify(Object.fromEntries(artifact.icons.map((icon) => [icon.name, icon.id])), null, 2)}`,
+    '',
+  ].join('\n')
+}
+
+function iconDeclarations(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const componentName = `${pascal(config.name)}Icon`
+  const names = `${camel(config.name)}IconNames`
+  const ids = `${camel(config.name)}IconIds`
+  return [
+    header(config.generatedNotice),
+    '',
+    ...description(config),
+    `export declare const ${names}: readonly [`,
+    ...artifact.icons.map((icon) => `  ${JSON.stringify(icon.name)},`),
+    ']',
+    `export type ${componentName}Name = typeof ${names}[number]`,
+    `export declare const ${ids}: {`,
+    ...artifact.icons.map((icon) => `  readonly ${JSON.stringify(icon.name)}: ${JSON.stringify(icon.id)}`),
+    '}',
+    '',
+  ].join('\n')
+}
+
+function component(config: ResolvedSpriteConfig): string {
+  const componentName = `${pascal(config.name)}Icon`
+  const typeName = `${componentName}Name`
+  const ids = `${camel(config.name)}IconIds`
+  return [
+    header(config.generatedNotice),
+    "import { ChangeDetectionStrategy, Component, input } from '@angular/core'",
+    `import type { ${typeName} } from '../icon-data.js'`,
+    `import { ${ids} } from '../icon-data.js'`,
+    '',
+    "const spriteUrl = new URL('../sprite.svg', import.meta.url).href",
+    '',
+    '@Component({',
+    `  selector: '${config.name}-icon',`,
+    '  standalone: true,',
+    "  template: '<svg class=\"root\" focusable=\"false\"><use [attr.href]=\"href\"></use></svg>',",
+    "  styleUrl: './angular-component.css',",
+    '  changeDetection: ChangeDetectionStrategy.OnPush,',
+    '})',
+    `export class ${componentName} {`,
+    `  readonly icon = input.required<${typeName}>()`,
+    '',
+    '  get href(): string {',
+    `    return spriteUrl + '#' + ${ids}[this.icon()]`,
+    '  }',
+    '}',
+    '',
+  ].join('\n')
+}
+
+function componentDeclarations(config: ResolvedSpriteConfig): string {
+  const componentName = `${pascal(config.name)}Icon`
+  const typeName = `${componentName}Name`
+  return [
+    header(config.generatedNotice),
+    "import type * as i0 from '@angular/core'",
+    "import type { InputSignal } from '@angular/core'",
+    `import type { ${typeName} } from '../icon-data.js'`,
+    '',
+    `export declare class ${componentName} {`,
+    `  readonly icon: InputSignal<${typeName}>`,
+    '  get href(): string',
+    `  static ɵfac: i0.ɵɵFactoryDeclaration<${componentName}, never>`,
+    `  static ɵcmp: i0.ɵɵComponentDeclaration<${componentName}, '${config.name}-icon', never, { icon: { alias: 'icon'; required: true; isSignal: true } }, {}, never, never, true, never>`,
+    '}',
+    '',
+  ].join('\n')
+}
+
+function index(config: ResolvedSpriteConfig): string {
+  return [
+    header(config.generatedNotice),
+    `export { ${pascal(config.name)}Icon } from './angular/angular-component'`,
+    `export { ${camel(config.name)}IconNames } from './icon-data.js'`,
+    `export type { ${pascal(config.name)}IconName } from './icon-data.js'`,
+    '',
+  ].join('\n')
+}
+
+function indexDeclarations(config: ResolvedSpriteConfig): string {
+  const componentName = `${pascal(config.name)}Icon`
+  return [
+    header(config.generatedNotice),
+    `export { ${componentName} } from './angular/angular-component'`,
+    `export { ${camel(config.name)}IconNames } from './icon-data.js'`,
+    `export type { ${componentName}Name } from './icon-data.js'`,
+    '',
+  ].join('\n')
+}
+
+function styles(config: ResolvedSpriteConfig): string {
+  const transition = config.transform.addTransition
+    ? ['  transition-property: fill, stroke, color;', '  transition-duration: 0.3s;', '  transition-timing-function: ease;']
+    : []
+  return [
+    header(config.generatedNotice),
+    '',
+    ':host {',
+    '  display: inline-flex;',
+    '}',
+    '',
+    '.root {',
+    '  width: 100%;',
+    '  height: 100%;',
+    ...transition,
+    '}',
+    '',
+  ].join('\n')
+}
+
+function manifest(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const data = {
+    schemaVersion: 1,
+    generator: '@gromlab/svg-sprites',
+    name: config.name,
+    ...(config.description === undefined ? {} : { description: config.description }),
+    usage: {
+      framework: 'angular',
+      componentName: `${pascal(config.name)}Icon`,
+      selector: `${config.name}-icon`,
+    },
+    mode: MODE,
+    target: TARGET,
+    format: artifact.format,
+    iconCount: artifact.icons.length,
+    spriteUrl: '__SPRITE_URL__',
+    icons: artifact.icons,
+  }
+  const source = JSON.stringify(data, null, 2).replace('"__SPRITE_URL__"', 'spriteUrl')
+  return [
+    header(config.generatedNotice),
+    "const spriteUrl = new URL('./sprite.svg', import.meta.url).href",
+    '',
+    `export const spriteManifest = ${source}`,
+    '',
+    'export default spriteManifest',
+    '',
+  ].join('\n')
+}
+
+function manifestDeclarations(config: ResolvedSpriteConfig): string {
+  return [
+    header(config.generatedNotice),
+    '',
+    'export type SpriteManifestColor = { variable: `--icon-color-${number}`; fallback: string }',
+    'export type SpriteManifestIcon = { name: string; id: string; viewBox: string | null; colors: readonly SpriteManifestColor[] }',
+    'export type SpriteManifest = {',
+    '  schemaVersion: 1',
+    "  generator: '@gromlab/svg-sprites'",
+    '  name: string',
+    '  description?: string',
+    "  usage: { framework: 'angular'; componentName: string; selector: string }",
+    "  mode: 'angular@webpack'",
+    "  target: 'webpack'",
+    "  format: 'stack' | 'symbol'",
+    '  iconCount: number',
+    '  spriteUrl: string',
+    '  icons: readonly SpriteManifestIcon[]',
+    '}',
+    '',
+    'export declare const spriteManifest: SpriteManifest',
+    'export default spriteManifest',
+    '',
+  ].join('\n')
+}
+
+export function generateOutputFiles(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): GeneratedFile[] {
+  return [
+    { path: path.posix.join(OUTPUT_DIR, 'index.ts'), content: index(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'index.d.ts'), content: indexDeclarations(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'sprite.svg'), content: svg(artifact.bytes, config.generatedNotice) },
+    { path: path.posix.join(OUTPUT_DIR, 'icon-data.js'), content: iconData(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'icon-data.d.ts'), content: iconDeclarations(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'angular', 'angular-component.ts'), content: component(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'angular', 'angular-component.d.ts'), content: componentDeclarations(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'angular', 'angular-component.css'), content: styles(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.js'), content: manifest(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.d.ts'), content: manifestDeclarations(config) },
+  ]
+}

src/modes/astro-vite/adapter.ts

@@ -0,0 +1,36 @@
+import { compileSpriteContent } from '../../compiler.js'
+import { createCompiledSpriteArtifact } from '../../core/compiled-artifact.js'
+import type { ModeAdapterContext, OutputPlan } from '../../core/mode-adapter.js'
+import { generateOutputFiles } from './output.js'
+
+type AstroViteOutputPlan = Omit<OutputPlan, 'result'> & {
+  readonly result: { readonly target: 'vite' }
+}
+
+type AstroViteAdapter = {
+  readonly mode: 'astro@vite'
+  generate(context: ModeAdapterContext): Promise<AstroViteOutputPlan>
+}
+
+export const astroViteAdapter: AstroViteAdapter = {
+  mode: 'astro@vite',
+  async generate(context) {
+    const bytes = await compileSpriteContent(
+      context.prepared.folder,
+      context.config.transform,
+      { rootViewBox: false },
+    )
+    const artifact = createCompiledSpriteArtifact(bytes, context.prepared.iconNames, 'stack')
+
+    return {
+      files: generateOutputFiles(context.config, artifact),
+      paths: {
+        generatedDir: '.svg-sprite',
+        sprite: '.svg-sprite/sprite.svg',
+        manifest: '.svg-sprite/svg-sprite.manifest.js',
+        entry: '.svg-sprite/index.js',
+      },
+      result: { target: 'vite' },
+    }
+  },
+}

src/modes/astro-vite/output.ts

@@ -0,0 +1,238 @@
+import path from 'node:path'
+import type { CompiledSpriteArtifact } from '../../core/compiled-artifact.js'
+import { GENERATED_MARKER } from '../../core/generated-markers.js'
+import type { GeneratedFile } from '../../core/mode-adapter.js'
+import type { ResolvedSpriteConfig } from '../../types.js'
+
+const MODE = 'astro@vite'
+const TARGET = 'vite'
+const OUTPUT_DIR = '.svg-sprite'
+const NOTICE = 'АВТОМАТИЧЕСКИ СГЕНЕРИРОВАННЫЙ ФАЙЛ. Не редактируйте вручную.'
+
+function pascal(value: string): string {
+  return value.split('-').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join('')
+}
+
+function camel(value: string): string {
+  return value.replace(/-([a-z0-9])/g, (_, char: string) => char.toUpperCase())
+}
+
+function header(enabled: boolean): string {
+  return enabled
+    ? `/*\n * ${NOTICE}\n * ${GENERATED_MARKER}.\n */`
+    : `/* ${GENERATED_MARKER}. Do not edit. */`
+}
+
+function astroHeader(enabled: boolean): string {
+  return enabled
+    ? `<!--\n  ${NOTICE}\n  ${GENERATED_MARKER}.\n-->`
+    : `<!-- ${GENERATED_MARKER}. Do not edit. -->`
+}
+
+function svg(bytes: Uint8Array, enabled: boolean): string {
+  const marker = enabled ? `${NOTICE}\n  ${GENERATED_MARKER}.` : `${GENERATED_MARKER}. Do not edit.`
+  const content = new TextDecoder().decode(bytes)
+  return content.startsWith('<?xml')
+    ? content.replace(/^(<\?xml[^?]*\?>)\s*/, `$1\n<!-- ${marker} -->\n`)
+    : `<!-- ${marker} -->\n${content}`
+}
+
+function description(config: ResolvedSpriteConfig): string[] {
+  const text = config.description ?? `Имена иконок SVG-спрайта «${config.name}».`
+  return ['/**', ...text.split(/\r?\n/).map((line) => ` * ${line.replace(/\*\//g, '* /')}`), ' */']
+}
+
+function iconData(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const prefix = camel(config.name)
+  return [
+    header(config.generatedNotice),
+    '',
+    ...description(config),
+    `export const ${prefix}IconNames = ${JSON.stringify(artifact.icons.map((icon) => icon.name), null, 2)}`,
+    '',
+    `export const ${prefix}IconIds = ${JSON.stringify(Object.fromEntries(artifact.icons.map((icon) => [icon.name, icon.id])), null, 2)}`,
+    '',
+  ].join('\n')
+}
+
+function iconDeclarations(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const componentName = `${pascal(config.name)}Icon`
+  const names = `${camel(config.name)}IconNames`
+  const ids = `${camel(config.name)}IconIds`
+  return [
+    header(config.generatedNotice),
+    '',
+    ...description(config),
+    `export declare const ${names}: readonly [`,
+    ...artifact.icons.map((icon) => `  ${JSON.stringify(icon.name)},`),
+    ']',
+    `export type ${componentName}Name = typeof ${names}[number]`,
+    `export declare const ${ids}: {`,
+    ...artifact.icons.map((icon) => `  readonly ${JSON.stringify(icon.name)}: ${JSON.stringify(icon.id)}`),
+    '}',
+    '',
+  ].join('\n')
+}
+
+function component(config: ResolvedSpriteConfig): string {
+  const ids = `${camel(config.name)}IconIds`
+  const rootClass = `${config.name}-icon-root`
+  const wrapClass = `${config.name}-icon-wrap`
+  return [
+    '---',
+    `import './astro-component.css'`,
+    `import { ${ids} } from '../icon-data.js'`,
+    "import spriteUrl from '../sprite.svg?no-inline'",
+    '',
+    'const { icon, wrapped = false, class: className, ...attributes } = Astro.props',
+    `const href = spriteUrl + '#' + ${ids}[icon]`,
+    '---',
+    astroHeader(config.generatedNotice),
+    '{',
+    '  wrapped ? (',
+    `    <span {...attributes} class:list={['${wrapClass}', className]}>`,
+    '      <svg focusable="false"><use href={href}></use></svg>',
+    '    </span>',
+    '  ) : (',
+    `    <svg {...attributes} class:list={['${rootClass}', className]} focusable="false">`,
+    '      <use href={href}></use>',
+    '    </svg>',
+    '  )',
+    '}',
+    '',
+  ].join('\n')
+}
+
+function componentDeclarations(config: ResolvedSpriteConfig): string {
+  const componentName = `${pascal(config.name)}Icon`
+  const typeName = `${componentName}Name`
+  return [
+    header(config.generatedNotice),
+    "import type { HTMLAttributes } from 'astro/types'",
+    `import type { ${typeName} } from '../icon-data.js'`,
+    '',
+    `export type ${componentName}Style = HTMLAttributes<'svg'>['style']`,
+    `type ${componentName}BaseProps = { icon: ${typeName} }`,
+    `type ${componentName}SvgProps = ${componentName}BaseProps & { wrapped?: false } & HTMLAttributes<'svg'>`,
+    `type ${componentName}WrappedProps = ${componentName}BaseProps & { wrapped: true } & HTMLAttributes<'span'>`,
+    `export type ${componentName}Props = ${componentName}SvgProps | ${componentName}WrappedProps`,
+    `declare const ${componentName}: (props: ${componentName}Props) => any`,
+    `export default ${componentName}`,
+    '',
+  ].join('\n')
+}
+
+function index(config: ResolvedSpriteConfig): string {
+  return [
+    header(config.generatedNotice),
+    `export { default as ${pascal(config.name)}Icon } from './astro/astro-component.astro'`,
+    `export { ${camel(config.name)}IconNames } from './icon-data.js'`,
+    '',
+  ].join('\n')
+}
+
+function indexDeclarations(config: ResolvedSpriteConfig): string {
+  const componentName = `${pascal(config.name)}Icon`
+  return [
+    header(config.generatedNotice),
+    `export { default as ${componentName} } from './astro/astro-component.astro'`,
+    `export type { ${componentName}Props, ${componentName}Style } from './astro/astro-component.astro'`,
+    `export { ${camel(config.name)}IconNames } from './icon-data.js'`,
+    `export type { ${componentName}Name } from './icon-data.js'`,
+    '',
+  ].join('\n')
+}
+
+function styles(config: ResolvedSpriteConfig): string {
+  const transition = config.transform.addTransition
+    ? ['  transition-property: fill, stroke, color;', '  transition-duration: 0.3s;', '  transition-timing-function: ease;']
+    : []
+  return [
+    header(config.generatedNotice),
+    '',
+    `.${config.name}-icon-root {`,
+    ...transition,
+    '}',
+    '',
+    `.${config.name}-icon-wrap {`,
+    '  display: inline-flex;',
+    '}',
+    '',
+    `.${config.name}-icon-wrap svg {`,
+    '  width: 100%;',
+    '  height: 100%;',
+    ...transition,
+    '}',
+    '',
+  ].join('\n')
+}
+
+function manifest(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const data = {
+    schemaVersion: 1,
+    generator: '@gromlab/svg-sprites',
+    name: config.name,
+    ...(config.description === undefined ? {} : { description: config.description }),
+    usage: {
+      framework: 'astro',
+      componentName: `${pascal(config.name)}Icon`,
+    },
+    mode: MODE,
+    target: TARGET,
+    format: artifact.format,
+    iconCount: artifact.icons.length,
+    spriteUrl: '__SPRITE_URL__',
+    icons: artifact.icons,
+  }
+  const source = JSON.stringify(data, null, 2).replace('"__SPRITE_URL__"', 'spriteUrl')
+  return [
+    header(config.generatedNotice),
+    "import spriteUrl from './sprite.svg?no-inline'",
+    '',
+    `export const spriteManifest = ${source}`,
+    '',
+    'export default spriteManifest',
+    '',
+  ].join('\n')
+}
+
+function manifestDeclarations(config: ResolvedSpriteConfig): string {
+  return [
+    header(config.generatedNotice),
+    '',
+    'export type SpriteManifestColor = { variable: `--icon-color-${number}`; fallback: string }',
+    'export type SpriteManifestIcon = { name: string; id: string; viewBox: string | null; colors: readonly SpriteManifestColor[] }',
+    'export type SpriteManifest = {',
+    '  schemaVersion: 1',
+    "  generator: '@gromlab/svg-sprites'",
+    '  name: string',
+    '  description?: string',
+    "  usage: { framework: 'astro'; componentName: string }",
+    "  mode: 'astro@vite'",
+    "  target: 'vite'",
+    "  format: 'stack' | 'symbol'",
+    '  iconCount: number',
+    '  spriteUrl: string',
+    '  icons: readonly SpriteManifestIcon[]',
+    '}',
+    '',
+    'export declare const spriteManifest: SpriteManifest',
+    'export default spriteManifest',
+    '',
+  ].join('\n')
+}
+
+export function generateOutputFiles(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): GeneratedFile[] {
+  return [
+    { path: path.posix.join(OUTPUT_DIR, 'index.js'), content: index(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'index.d.ts'), content: indexDeclarations(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'sprite.svg'), content: svg(artifact.bytes, config.generatedNotice) },
+    { path: path.posix.join(OUTPUT_DIR, 'icon-data.js'), content: iconData(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'icon-data.d.ts'), content: iconDeclarations(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'astro', 'astro-component.astro'), content: component(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'astro', 'astro-component.astro.d.ts'), content: componentDeclarations(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'astro', 'astro-component.css'), content: styles(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.js'), content: manifest(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.d.ts'), content: manifestDeclarations(config) },
+  ]
+}

src/modes/lit-vite/adapter.ts

@@ -0,0 +1,25 @@
+import { compileSpriteContent } from '../../compiler.js'
+import { createCompiledSpriteArtifact } from '../../core/compiled-artifact.js'
+import type { ModeAdapter } from '../../core/mode-adapter.js'
+import { generateOutputFiles } from './output.js'
+
+export const litViteAdapter: ModeAdapter<'lit@vite'> = {
+  mode: 'lit@vite',
+  async generate(context) {
+    const bytes = await compileSpriteContent(context.prepared.folder, context.config.transform, {
+      rootViewBox: false,
+    })
+    const artifact = createCompiledSpriteArtifact(bytes, context.prepared.iconNames, 'stack')
+
+    return {
+      files: generateOutputFiles(context.config, artifact),
+      paths: {
+        generatedDir: '.svg-sprite',
+        sprite: '.svg-sprite/sprite.svg',
+        manifest: '.svg-sprite/svg-sprite.manifest.js',
+        entry: '.svg-sprite/index.js',
+      },
+      result: { target: 'vite' },
+    }
+  },
+}

src/modes/lit-vite/output.ts

@@ -0,0 +1,258 @@
+import path from 'node:path'
+import type { CompiledSpriteArtifact } from '../../core/compiled-artifact.js'
+import { GENERATED_MARKER } from '../../core/generated-markers.js'
+import type { GeneratedFile } from '../../core/mode-adapter.js'
+import type { ResolvedSpriteConfig } from '../../types.js'
+
+const MODE = 'lit@vite'
+const TARGET = 'vite'
+const OUTPUT_DIR = '.svg-sprite'
+const NOTICE = 'AUTOMATICALLY GENERATED FILE. Do not edit manually.'
+
+function pascal(value: string): string {
+  return value.split('-').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join('')
+}
+
+function camel(value: string): string {
+  return value.replace(/-([a-z0-9])/g, (_, char: string) => char.toUpperCase())
+}
+
+function header(enabled: boolean): string {
+  return enabled
+    ? `/*\n * ${NOTICE}\n * ${GENERATED_MARKER}.\n */`
+    : `/* ${GENERATED_MARKER}. Do not edit. */`
+}
+
+function markedSvg(bytes: Uint8Array, enabled: boolean): string {
+  const marker = enabled ? `${NOTICE} ${GENERATED_MARKER}.` : `${GENERATED_MARKER}. Do not edit.`
+  const content = new TextDecoder().decode(bytes)
+  return content.startsWith('<?xml')
+    ? content.replace(/^(<\?xml[^?]*\?>)\s*/, `$1\n<!-- ${marker} -->\n`)
+    : `<!-- ${marker} -->\n${content}`
+}
+
+function description(config: ResolvedSpriteConfig): string[] {
+  const text = config.description ?? `Icon names for the "${config.name}" SVG sprite.`
+  return ['/**', ...text.split(/\r?\n/).map((line) => ` * ${line.replace(/\*\//g, '* /')}`), ' */']
+}
+
+function iconData(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const prefix = camel(config.name)
+  const names = artifact.icons.map((icon) => icon.name)
+  const ids = Object.fromEntries(artifact.icons.map((icon) => [icon.name, icon.id]))
+  return [
+    header(config.generatedNotice),
+    '',
+    ...description(config),
+    `export const ${prefix}IconNames = ${JSON.stringify(names, null, 2)}`,
+    '',
+    `export const ${prefix}IconIds = ${JSON.stringify(ids, null, 2)}`,
+    '',
+  ].join('\n')
+}
+
+function iconTypes(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const component = `${pascal(config.name)}Icon`
+  const names = `${camel(config.name)}IconNames`
+  const ids = `${camel(config.name)}IconIds`
+  return [
+    header(config.generatedNotice),
+    '',
+    ...description(config),
+    `export declare const ${names}: readonly [`,
+    ...artifact.icons.map((icon) => `  ${JSON.stringify(icon.name)},`),
+    ']',
+    `export type ${component}Name = typeof ${names}[number]`,
+    `export declare const ${ids}: {`,
+    ...artifact.icons.map((icon) => `  readonly ${JSON.stringify(icon.name)}: ${JSON.stringify(icon.id)}`),
+    '}',
+    '',
+  ].join('\n')
+}
+
+function component(config: ResolvedSpriteConfig): string {
+  const className = `${pascal(config.name)}Icon`
+  const prefix = camel(config.name)
+  const tagName = `${config.name}-icon`
+  return [
+    header(config.generatedNotice),
+    "import { LitElement, html, nothing, unsafeCSS } from 'lit'",
+    "import componentStyles from './lit-component.css?inline'",
+    `import { ${prefix}IconIds } from '../icon-data.js'`,
+    "import spriteUrl from '../sprite.svg?no-inline'",
+    '',
+    `export const ${prefix}IconTagName = ${JSON.stringify(tagName)}`,
+    '',
+    `export class ${className} extends LitElement {`,
+    '  static properties = {',
+    "    icon: { type: String },",
+    '  }',
+    '',
+    '  static styles = unsafeCSS(componentStyles)',
+    '',
+    "  icon = ''",
+    '',
+    '  render() {',
+    `    const id = ${prefix}IconIds[this.icon]`,
+    '    if (!id) return nothing',
+    '',
+    "    const href = spriteUrl + '#' + id",
+    '    return html`<svg class="root" part="svg" aria-hidden="true"><use href=${href}></use></svg>`',
+    '  }',
+    '}',
+    '',
+    `export function define${className}() {`,
+    `  if (!customElements.get(${prefix}IconTagName)) {`,
+    `    customElements.define(${prefix}IconTagName, ${className})`,
+    '  }',
+    '}',
+    '',
+  ].join('\n')
+}
+
+function componentTypes(config: ResolvedSpriteConfig): string {
+  const className = `${pascal(config.name)}Icon`
+  const prefix = camel(config.name)
+  const tagName = `${config.name}-icon`
+  return [
+    header(config.generatedNotice),
+    "import { LitElement } from 'lit'",
+    `import type { ${className}Name } from '../icon-data.js'`,
+    '',
+    `export declare const ${prefix}IconTagName: ${JSON.stringify(tagName)}`,
+    `export declare class ${className} extends LitElement {`,
+    `  icon: ${className}Name | ''`,
+    '}',
+    `export declare function define${className}(): void`,
+    '',
+    'declare global {',
+    '  interface HTMLElementTagNameMap {',
+    `    ${JSON.stringify(tagName)}: ${className}`,
+    '  }',
+    '}',
+    '',
+  ].join('\n')
+}
+
+function styles(config: ResolvedSpriteConfig): string {
+  const transition = config.transform.addTransition
+    ? ['  transition-property: fill, stroke, color;', '  transition-duration: 0.3s;', '  transition-timing-function: ease;']
+    : []
+  return [
+    header(config.generatedNotice),
+    '',
+    ':host {',
+    '  display: inline-flex;',
+    '  width: 1em;',
+    '  height: 1em;',
+    '  vertical-align: middle;',
+    '}',
+    '',
+    '.root {',
+    '  width: 100%;',
+    '  height: 100%;',
+    ...transition,
+    '}',
+    '',
+  ].join('\n')
+}
+
+function index(config: ResolvedSpriteConfig): string {
+  const className = `${pascal(config.name)}Icon`
+  const prefix = camel(config.name)
+  return [
+    header(config.generatedNotice),
+    `export { ${className}, define${className}, ${prefix}IconTagName } from './lit/lit-component.js'`,
+    `export { ${prefix}IconNames } from './icon-data.js'`,
+    '',
+  ].join('\n')
+}
+
+function indexTypes(config: ResolvedSpriteConfig): string {
+  const className = `${pascal(config.name)}Icon`
+  const prefix = camel(config.name)
+  return [
+    header(config.generatedNotice),
+    `export { ${className}, define${className}, ${prefix}IconTagName } from './lit/lit-component.js'`,
+    `export { ${prefix}IconNames } from './icon-data.js'`,
+    `export type { ${className}Name } from './icon-data.js'`,
+    '',
+  ].join('\n')
+}
+
+function manifest(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const className = `${pascal(config.name)}Icon`
+  const data = {
+    schemaVersion: 1,
+    generator: '@gromlab/svg-sprites',
+    name: config.name,
+    ...(config.description === undefined ? {} : { description: config.description }),
+    usage: {
+      framework: 'lit',
+      componentName: className,
+      tagName: `${config.name}-icon`,
+      defineFunction: `define${className}`,
+    },
+    mode: MODE,
+    target: TARGET,
+    format: artifact.format,
+    iconCount: artifact.icons.length,
+    spriteUrl: '__SPRITE_URL__',
+    icons: artifact.icons,
+  }
+  const source = JSON.stringify(data, null, 2).replace('"__SPRITE_URL__"', 'spriteUrl')
+  return [
+    header(config.generatedNotice),
+    "import spriteUrl from './sprite.svg?no-inline'",
+    '',
+    `export const spriteManifest = ${source}`,
+    '',
+    'export default spriteManifest',
+    '',
+  ].join('\n')
+}
+
+function manifestTypes(config: ResolvedSpriteConfig): string {
+  return [
+    header(config.generatedNotice),
+    '',
+    'export type SpriteManifestColor = { variable: `--icon-color-${number}`; fallback: string }',
+    'export type SpriteManifestIcon = {',
+    '  name: string',
+    '  id: string',
+    '  viewBox: string | null',
+    '  colors: readonly SpriteManifestColor[]',
+    '}',
+    'export type SpriteManifest = {',
+    '  schemaVersion: 1',
+    "  generator: '@gromlab/svg-sprites'",
+    '  name: string',
+    '  description?: string',
+    "  usage: { framework: 'lit'; componentName: string; tagName: string; defineFunction: string }",
+    "  mode: 'lit@vite'",
+    "  target: 'vite'",
+    "  format: 'stack' | 'symbol'",
+    '  iconCount: number',
+    '  spriteUrl: string',
+    '  icons: readonly SpriteManifestIcon[]',
+    '}',
+    'export declare const spriteManifest: SpriteManifest',
+    'export default spriteManifest',
+    '',
+  ].join('\n')
+}
+
+export function generateOutputFiles(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): GeneratedFile[] {
+  return [
+    { path: path.posix.join(OUTPUT_DIR, 'index.js'), content: index(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'index.d.ts'), content: indexTypes(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'sprite.svg'), content: markedSvg(artifact.bytes, config.generatedNotice) },
+    { path: path.posix.join(OUTPUT_DIR, 'icon-data.js'), content: iconData(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'icon-data.d.ts'), content: iconTypes(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'lit', 'lit-component.js'), content: component(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'lit', 'lit-component.d.ts'), content: componentTypes(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'lit', 'lit-component.css'), content: styles(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.js'), content: manifest(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.d.ts'), content: manifestTypes(config) },
+  ]
+}

src/modes/lit-webpack/adapter.ts

@@ -0,0 +1,25 @@
+import { compileSpriteContent } from '../../compiler.js'
+import { createCompiledSpriteArtifact } from '../../core/compiled-artifact.js'
+import type { ModeAdapter } from '../../core/mode-adapter.js'
+import { generateOutputFiles } from './output.js'
+
+export const litWebpackAdapter: ModeAdapter<'lit@webpack'> = {
+  mode: 'lit@webpack',
+  async generate(context) {
+    const bytes = await compileSpriteContent(context.prepared.folder, context.config.transform, {
+      rootViewBox: false,
+    })
+    const artifact = createCompiledSpriteArtifact(bytes, context.prepared.iconNames, 'stack')
+
+    return {
+      files: generateOutputFiles(context.config, artifact),
+      paths: {
+        generatedDir: '.svg-sprite',
+        sprite: '.svg-sprite/sprite.svg',
+        manifest: '.svg-sprite/svg-sprite.manifest.js',
+        entry: '.svg-sprite/index.js',
+      },
+      result: { target: 'webpack' },
+    }
+  },
+}

src/modes/lit-webpack/output.ts

@@ -0,0 +1,259 @@
+import path from 'node:path'
+import type { CompiledSpriteArtifact } from '../../core/compiled-artifact.js'
+import { GENERATED_MARKER } from '../../core/generated-markers.js'
+import type { GeneratedFile } from '../../core/mode-adapter.js'
+import type { ResolvedSpriteConfig } from '../../types.js'
+
+const MODE = 'lit@webpack'
+const TARGET = 'webpack'
+const OUTPUT_DIR = '.svg-sprite'
+const NOTICE = 'AUTOMATICALLY GENERATED FILE. Do not edit manually.'
+
+function pascal(value: string): string {
+  return value.split('-').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join('')
+}
+
+function camel(value: string): string {
+  return value.replace(/-([a-z0-9])/g, (_, char: string) => char.toUpperCase())
+}
+
+function header(enabled: boolean): string {
+  return enabled
+    ? `/*\n * ${NOTICE}\n * ${GENERATED_MARKER}.\n */`
+    : `/* ${GENERATED_MARKER}. Do not edit. */`
+}
+
+function markedSvg(bytes: Uint8Array, enabled: boolean): string {
+  const marker = enabled ? `${NOTICE} ${GENERATED_MARKER}.` : `${GENERATED_MARKER}. Do not edit.`
+  const content = new TextDecoder().decode(bytes)
+  return content.startsWith('<?xml')
+    ? content.replace(/^(<\?xml[^?]*\?>)\s*/, `$1\n<!-- ${marker} -->\n`)
+    : `<!-- ${marker} -->\n${content}`
+}
+
+function description(config: ResolvedSpriteConfig): string[] {
+  const text = config.description ?? `Icon names for the "${config.name}" SVG sprite.`
+  return ['/**', ...text.split(/\r?\n/).map((line) => ` * ${line.replace(/\*\//g, '* /')}`), ' */']
+}
+
+function iconData(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const prefix = camel(config.name)
+  const names = artifact.icons.map((icon) => icon.name)
+  const ids = Object.fromEntries(artifact.icons.map((icon) => [icon.name, icon.id]))
+  return [
+    header(config.generatedNotice),
+    '',
+    ...description(config),
+    `export const ${prefix}IconNames = ${JSON.stringify(names, null, 2)}`,
+    '',
+    `export const ${prefix}IconIds = ${JSON.stringify(ids, null, 2)}`,
+    '',
+  ].join('\n')
+}
+
+function iconTypes(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const component = `${pascal(config.name)}Icon`
+  const names = `${camel(config.name)}IconNames`
+  const ids = `${camel(config.name)}IconIds`
+  return [
+    header(config.generatedNotice),
+    '',
+    ...description(config),
+    `export declare const ${names}: readonly [`,
+    ...artifact.icons.map((icon) => `  ${JSON.stringify(icon.name)},`),
+    ']',
+    `export type ${component}Name = typeof ${names}[number]`,
+    `export declare const ${ids}: {`,
+    ...artifact.icons.map((icon) => `  readonly ${JSON.stringify(icon.name)}: ${JSON.stringify(icon.id)}`),
+    '}',
+    '',
+  ].join('\n')
+}
+
+function component(config: ResolvedSpriteConfig): string {
+  const className = `${pascal(config.name)}Icon`
+  const prefix = camel(config.name)
+  const tagName = `${config.name}-icon`
+  return [
+    header(config.generatedNotice),
+    "import { LitElement, html, nothing, unsafeCSS } from 'lit'",
+    "import componentStyles from './lit-component.css?inline'",
+    `import { ${prefix}IconIds } from '../icon-data.js'`,
+    '',
+    "const spriteUrl = new URL('../sprite.svg', import.meta.url).href",
+    '',
+    `export const ${prefix}IconTagName = ${JSON.stringify(tagName)}`,
+    '',
+    `export class ${className} extends LitElement {`,
+    '  static properties = {',
+    "    icon: { type: String },",
+    '  }',
+    '',
+    '  static styles = unsafeCSS(componentStyles)',
+    '',
+    "  icon = ''",
+    '',
+    '  render() {',
+    `    const id = ${prefix}IconIds[this.icon]`,
+    '    if (!id) return nothing',
+    '',
+    "    const href = spriteUrl + '#' + id",
+    '    return html`<svg class="root" part="svg" aria-hidden="true"><use href=${href}></use></svg>`',
+    '  }',
+    '}',
+    '',
+    `export function define${className}() {`,
+    `  if (!customElements.get(${prefix}IconTagName)) {`,
+    `    customElements.define(${prefix}IconTagName, ${className})`,
+    '  }',
+    '}',
+    '',
+  ].join('\n')
+}
+
+function componentTypes(config: ResolvedSpriteConfig): string {
+  const className = `${pascal(config.name)}Icon`
+  const prefix = camel(config.name)
+  const tagName = `${config.name}-icon`
+  return [
+    header(config.generatedNotice),
+    "import { LitElement } from 'lit'",
+    `import type { ${className}Name } from '../icon-data.js'`,
+    '',
+    `export declare const ${prefix}IconTagName: ${JSON.stringify(tagName)}`,
+    `export declare class ${className} extends LitElement {`,
+    `  icon: ${className}Name | ''`,
+    '}',
+    `export declare function define${className}(): void`,
+    '',
+    'declare global {',
+    '  interface HTMLElementTagNameMap {',
+    `    ${JSON.stringify(tagName)}: ${className}`,
+    '  }',
+    '}',
+    '',
+  ].join('\n')
+}
+
+function styles(config: ResolvedSpriteConfig): string {
+  const transition = config.transform.addTransition
+    ? ['  transition-property: fill, stroke, color;', '  transition-duration: 0.3s;', '  transition-timing-function: ease;']
+    : []
+  return [
+    header(config.generatedNotice),
+    '',
+    ':host {',
+    '  display: inline-flex;',
+    '  width: 1em;',
+    '  height: 1em;',
+    '  vertical-align: middle;',
+    '}',
+    '',
+    '.root {',
+    '  width: 100%;',
+    '  height: 100%;',
+    ...transition,
+    '}',
+    '',
+  ].join('\n')
+}
+
+function index(config: ResolvedSpriteConfig): string {
+  const className = `${pascal(config.name)}Icon`
+  const prefix = camel(config.name)
+  return [
+    header(config.generatedNotice),
+    `export { ${className}, define${className}, ${prefix}IconTagName } from './lit/lit-component.js'`,
+    `export { ${prefix}IconNames } from './icon-data.js'`,
+    '',
+  ].join('\n')
+}
+
+function indexTypes(config: ResolvedSpriteConfig): string {
+  const className = `${pascal(config.name)}Icon`
+  const prefix = camel(config.name)
+  return [
+    header(config.generatedNotice),
+    `export { ${className}, define${className}, ${prefix}IconTagName } from './lit/lit-component.js'`,
+    `export { ${prefix}IconNames } from './icon-data.js'`,
+    `export type { ${className}Name } from './icon-data.js'`,
+    '',
+  ].join('\n')
+}
+
+function manifest(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const className = `${pascal(config.name)}Icon`
+  const data = {
+    schemaVersion: 1,
+    generator: '@gromlab/svg-sprites',
+    name: config.name,
+    ...(config.description === undefined ? {} : { description: config.description }),
+    usage: {
+      framework: 'lit',
+      componentName: className,
+      tagName: `${config.name}-icon`,
+      defineFunction: `define${className}`,
+    },
+    mode: MODE,
+    target: TARGET,
+    format: artifact.format,
+    iconCount: artifact.icons.length,
+    spriteUrl: '__SPRITE_URL__',
+    icons: artifact.icons,
+  }
+  const source = JSON.stringify(data, null, 2).replace('"__SPRITE_URL__"', 'spriteUrl')
+  return [
+    header(config.generatedNotice),
+    "const spriteUrl = new URL('./sprite.svg', import.meta.url).href",
+    '',
+    `export const spriteManifest = ${source}`,
+    '',
+    'export default spriteManifest',
+    '',
+  ].join('\n')
+}
+
+function manifestTypes(config: ResolvedSpriteConfig): string {
+  return [
+    header(config.generatedNotice),
+    '',
+    'export type SpriteManifestColor = { variable: `--icon-color-${number}`; fallback: string }',
+    'export type SpriteManifestIcon = {',
+    '  name: string',
+    '  id: string',
+    '  viewBox: string | null',
+    '  colors: readonly SpriteManifestColor[]',
+    '}',
+    'export type SpriteManifest = {',
+    '  schemaVersion: 1',
+    "  generator: '@gromlab/svg-sprites'",
+    '  name: string',
+    '  description?: string',
+    "  usage: { framework: 'lit'; componentName: string; tagName: string; defineFunction: string }",
+    "  mode: 'lit@webpack'",
+    "  target: 'webpack'",
+    "  format: 'stack' | 'symbol'",
+    '  iconCount: number',
+    '  spriteUrl: string',
+    '  icons: readonly SpriteManifestIcon[]',
+    '}',
+    'export declare const spriteManifest: SpriteManifest',
+    'export default spriteManifest',
+    '',
+  ].join('\n')
+}
+
+export function generateOutputFiles(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): GeneratedFile[] {
+  return [
+    { path: path.posix.join(OUTPUT_DIR, 'index.js'), content: index(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'index.d.ts'), content: indexTypes(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'sprite.svg'), content: markedSvg(artifact.bytes, config.generatedNotice) },
+    { path: path.posix.join(OUTPUT_DIR, 'icon-data.js'), content: iconData(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'icon-data.d.ts'), content: iconTypes(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'lit', 'lit-component.js'), content: component(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'lit', 'lit-component.d.ts'), content: componentTypes(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'lit', 'lit-component.css'), content: styles(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.js'), content: manifest(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.d.ts'), content: manifestTypes(config) },
+  ]
+}

src/modes/nuxt-vite/adapter.ts

@@ -0,0 +1,25 @@
+import { compileSpriteContent } from '../../compiler.js'
+import { createCompiledSpriteArtifact } from '../../core/compiled-artifact.js'
+import type { ModeAdapter } from '../../core/mode-adapter.js'
+import { generateOutputFiles } from './output.js'
+
+export const nuxtViteAdapter: ModeAdapter<'nuxt@vite'> = {
+  mode: 'nuxt@vite',
+  async generate(context) {
+    const bytes = await compileSpriteContent(context.prepared.folder, context.config.transform, {
+      rootViewBox: false,
+    })
+    const artifact = createCompiledSpriteArtifact(bytes, context.prepared.iconNames, 'stack')
+
+    return {
+      files: generateOutputFiles(context.config, artifact),
+      paths: {
+        generatedDir: '.svg-sprite',
+        sprite: '.svg-sprite/sprite.svg',
+        manifest: '.svg-sprite/svg-sprite.manifest.js',
+        entry: '.svg-sprite/index.js',
+      },
+      result: { target: 'vite' },
+    }
+  },
+}

src/modes/nuxt-vite/output.ts

@@ -0,0 +1,241 @@
+import path from 'node:path'
+import type { CompiledSpriteArtifact } from '../../core/compiled-artifact.js'
+import { GENERATED_MARKER } from '../../core/generated-markers.js'
+import type { GeneratedFile } from '../../core/mode-adapter.js'
+import type { ResolvedSpriteConfig } from '../../types.js'
+
+const MODE = 'nuxt@vite'
+const TARGET = 'vite'
+const OUTPUT_DIR = '.svg-sprite'
+const NOTICE = 'AUTOMATICALLY GENERATED FILE. Do not edit manually.'
+
+function pascal(value: string): string {
+  return value.split('-').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join('')
+}
+
+function camel(value: string): string {
+  return value.replace(/-([a-z0-9])/g, (_, char: string) => char.toUpperCase())
+}
+
+function header(enabled: boolean): string {
+  return enabled
+    ? `/*\n * ${NOTICE}\n * ${GENERATED_MARKER}.\n */`
+    : `/* ${GENERATED_MARKER}. Do not edit. */`
+}
+
+function markedSvg(bytes: Uint8Array, enabled: boolean): string {
+  const marker = enabled ? `${NOTICE}\n  ${GENERATED_MARKER}.` : `${GENERATED_MARKER}. Do not edit.`
+  const content = new TextDecoder().decode(bytes)
+  return content.startsWith('<?xml')
+    ? content.replace(/^(<\?xml[^?]*\?>)\s*/, `$1\n<!-- ${marker} -->\n`)
+    : `<!-- ${marker} -->\n${content}`
+}
+
+function docs(config: ResolvedSpriteConfig): string[] {
+  const text = config.description ?? `SVG sprite icon names for "${config.name}".`
+  return ['/**', ...text.split(/\r?\n/).map((line) => ` * ${line.replace(/\*\//g, '* /')}`), ' */']
+}
+
+function iconData(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const prefix = camel(config.name)
+  const names = artifact.icons.map((icon) => icon.name)
+  const ids = Object.fromEntries(artifact.icons.map((icon) => [icon.name, icon.id]))
+  return [
+    header(config.generatedNotice),
+    '',
+    ...docs(config),
+    `export const ${prefix}IconNames = ${JSON.stringify(names, null, 2)}`,
+    '',
+    `export const ${prefix}IconIds = ${JSON.stringify(ids, null, 2)}`,
+    '',
+  ].join('\n')
+}
+
+function component(config: ResolvedSpriteConfig): string {
+  const componentName = `${pascal(config.name)}Icon`
+  const ids = `${camel(config.name)}IconIds`
+  return [
+    header(config.generatedNotice),
+    "import { defineComponent, h } from 'vue'",
+    "import styles from './vue-component.module.css'",
+    `import { ${ids} } from '../icon-data.js'`,
+    "import spriteUrl from '../sprite.svg?no-inline'",
+    '',
+    `export const ${componentName} = defineComponent({`,
+    `  name: '${componentName}',`,
+    '  inheritAttrs: false,',
+    '  props: {',
+    "    icon: { type: String, required: true },",
+    "    wrapped: { type: Boolean, default: false },",
+    '  },',
+    '  setup(props, { attrs }) {',
+    '    return () => {',
+    `      const href = spriteUrl + '#' + ${ids}[props.icon]`,
+    '      if (props.wrapped) {',
+    "        return h('span', { ...attrs, class: [styles.wrap, attrs.class] }, [",
+    "          h('svg', null, [h('use', { href })]),",
+    '        ])',
+    '      }',
+    "      return h('svg', { ...attrs, class: [styles.root, attrs.class] }, [",
+    "        h('use', { href }),",
+    '      ])',
+    '    }',
+    '  },',
+    '})',
+    '',
+  ].join('\n')
+}
+
+function iconDeclarations(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const componentName = `${pascal(config.name)}Icon`
+  const names = `${camel(config.name)}IconNames`
+  const ids = `${camel(config.name)}IconIds`
+  return [
+    header(config.generatedNotice),
+    '',
+    ...docs(config),
+    `export declare const ${names}: readonly [`,
+    ...artifact.icons.map((icon) => `  ${JSON.stringify(icon.name)},`),
+    ']',
+    `export type ${componentName}Name = typeof ${names}[number]`,
+    `export declare const ${ids}: {`,
+    ...artifact.icons.map((icon) => `  readonly ${JSON.stringify(icon.name)}: ${JSON.stringify(icon.id)}`),
+    '}',
+    '',
+  ].join('\n')
+}
+
+function componentDeclarations(config: ResolvedSpriteConfig): string {
+  const componentName = `${pascal(config.name)}Icon`
+  return [
+    header(config.generatedNotice),
+    "import type { CSSProperties, DefineComponent, HTMLAttributes, SVGAttributes } from 'vue'",
+    `import type { ${componentName}Name } from '../icon-data.js'`,
+    '',
+    `export type ${componentName}Style = CSSProperties & Partial<Record<\`--icon-color-\${number}\`, string | number>>`,
+    `type ${componentName}BaseProps = { icon: ${componentName}Name }`,
+    `type ${componentName}SvgProps = ${componentName}BaseProps & { wrapped?: false } & Omit<SVGAttributes, 'style'> & { style?: ${componentName}Style }`,
+    `type ${componentName}WrappedProps = ${componentName}BaseProps & { wrapped: true } & Omit<HTMLAttributes, 'style'> & { style?: ${componentName}Style }`,
+    `export type ${componentName}Props = ${componentName}SvgProps | ${componentName}WrappedProps`,
+    `export declare const ${componentName}: DefineComponent<${componentName}Props>`,
+    '',
+  ].join('\n')
+}
+
+function index(config: ResolvedSpriteConfig): string {
+  return [
+    header(config.generatedNotice),
+    `export { ${pascal(config.name)}Icon } from './vue/vue-component.js'`,
+    `export { ${camel(config.name)}IconNames } from './icon-data.js'`,
+    '',
+  ].join('\n')
+}
+
+function indexDeclarations(config: ResolvedSpriteConfig): string {
+  const componentName = `${pascal(config.name)}Icon`
+  const names = `${camel(config.name)}IconNames`
+  return [
+    header(config.generatedNotice),
+    `export { ${componentName} } from './vue/vue-component.js'`,
+    `export type { ${componentName}Props, ${componentName}Style } from './vue/vue-component.js'`,
+    `export { ${names} } from './icon-data.js'`,
+    `export type { ${componentName}Name } from './icon-data.js'`,
+    '',
+  ].join('\n')
+}
+
+function styles(config: ResolvedSpriteConfig): string {
+  const transition = config.transform.addTransition
+    ? ['  transition-property: fill, stroke, color;', '  transition-duration: 0.3s;', '  transition-timing-function: ease;']
+    : []
+  return [
+    header(config.generatedNotice),
+    '',
+    '.root {',
+    ...transition,
+    '}',
+    '',
+    '.wrap {',
+    '  display: inline-flex;',
+    '}',
+    '',
+    '.wrap svg {',
+    '  width: 100%;',
+    '  height: 100%;',
+    ...transition,
+    '}',
+    '',
+  ].join('\n')
+}
+
+function manifest(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const data = {
+    schemaVersion: 1,
+    generator: '@gromlab/svg-sprites',
+    name: config.name,
+    ...(config.description === undefined ? {} : { description: config.description }),
+    usage: { framework: 'vue', componentName: `${pascal(config.name)}Icon` },
+    mode: MODE,
+    target: TARGET,
+    format: artifact.format,
+    iconCount: artifact.icons.length,
+    spriteUrl: '__SPRITE_URL__',
+    icons: artifact.icons,
+  }
+  const source = JSON.stringify(data, null, 2).replace('"__SPRITE_URL__"', 'spriteUrl')
+  return [
+    header(config.generatedNotice),
+    "import spriteUrl from './sprite.svg?no-inline'",
+    '',
+    `export const spriteManifest = ${source}`,
+    '',
+    'export default spriteManifest',
+    '',
+  ].join('\n')
+}
+
+function manifestDeclarations(config: ResolvedSpriteConfig): string {
+  return [
+    header(config.generatedNotice),
+    '',
+    'export type SpriteManifestColor = { variable: `--icon-color-${number}`; fallback: string }',
+    'export type SpriteManifestIcon = {',
+    '  name: string',
+    '  id: string',
+    '  viewBox: string | null',
+    '  colors: readonly SpriteManifestColor[]',
+    '}',
+    'export type SpriteManifest = {',
+    '  schemaVersion: 1',
+    "  generator: '@gromlab/svg-sprites'",
+    '  name: string',
+    '  description?: string',
+    "  usage: { framework: 'vue'; componentName: string }",
+    "  mode: 'nuxt@vite'",
+    "  target: 'vite'",
+    "  format: 'stack' | 'symbol'",
+    '  iconCount: number',
+    '  spriteUrl: string',
+    '  icons: readonly SpriteManifestIcon[]',
+    '}',
+    '',
+    'export declare const spriteManifest: SpriteManifest',
+    'export default spriteManifest',
+    '',
+  ].join('\n')
+}
+
+export function generateOutputFiles(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): GeneratedFile[] {
+  return [
+    { path: path.posix.join(OUTPUT_DIR, 'index.js'), content: index(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'index.d.ts'), content: indexDeclarations(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'sprite.svg'), content: markedSvg(artifact.bytes, config.generatedNotice) },
+    { path: path.posix.join(OUTPUT_DIR, 'icon-data.js'), content: iconData(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'icon-data.d.ts'), content: iconDeclarations(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'vue', 'vue-component.js'), content: component(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'vue', 'vue-component.d.ts'), content: componentDeclarations(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'vue', 'vue-component.module.css'), content: styles(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.js'), content: manifest(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.d.ts'), content: manifestDeclarations(config) },
+  ]
+}

src/modes/nuxt-webpack/adapter.ts

@@ -0,0 +1,25 @@
+import { compileSpriteContent } from '../../compiler.js'
+import { createCompiledSpriteArtifact } from '../../core/compiled-artifact.js'
+import type { ModeAdapter } from '../../core/mode-adapter.js'
+import { generateOutputFiles } from './output.js'
+
+export const nuxtWebpackAdapter: ModeAdapter<'nuxt@webpack'> = {
+  mode: 'nuxt@webpack',
+  async generate(context) {
+    const bytes = await compileSpriteContent(context.prepared.folder, context.config.transform, {
+      rootViewBox: false,
+    })
+    const artifact = createCompiledSpriteArtifact(bytes, context.prepared.iconNames, 'stack')
+
+    return {
+      files: generateOutputFiles(context.config, artifact),
+      paths: {
+        generatedDir: '.svg-sprite',
+        sprite: '.svg-sprite/sprite.svg',
+        manifest: '.svg-sprite/svg-sprite.manifest.js',
+        entry: '.svg-sprite/index.js',
+      },
+      result: { target: 'webpack' },
+    }
+  },
+}

src/modes/nuxt-webpack/output.ts

@@ -0,0 +1,241 @@
+import path from 'node:path'
+import type { CompiledSpriteArtifact } from '../../core/compiled-artifact.js'
+import { GENERATED_MARKER } from '../../core/generated-markers.js'
+import type { GeneratedFile } from '../../core/mode-adapter.js'
+import type { ResolvedSpriteConfig } from '../../types.js'
+
+const MODE = 'nuxt@webpack'
+const TARGET = 'webpack'
+const OUTPUT_DIR = '.svg-sprite'
+const NOTICE = 'AUTOMATICALLY GENERATED FILE. Do not edit manually.'
+
+function pascal(value: string): string {
+  return value.split('-').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join('')
+}
+
+function camel(value: string): string {
+  return value.replace(/-([a-z0-9])/g, (_, char: string) => char.toUpperCase())
+}
+
+function header(enabled: boolean): string {
+  return enabled
+    ? `/*\n * ${NOTICE}\n * ${GENERATED_MARKER}.\n */`
+    : `/* ${GENERATED_MARKER}. Do not edit. */`
+}
+
+function markedSvg(bytes: Uint8Array, enabled: boolean): string {
+  const marker = enabled ? `${NOTICE}\n  ${GENERATED_MARKER}.` : `${GENERATED_MARKER}. Do not edit.`
+  const content = new TextDecoder().decode(bytes)
+  return content.startsWith('<?xml')
+    ? content.replace(/^(<\?xml[^?]*\?>)\s*/, `$1\n<!-- ${marker} -->\n`)
+    : `<!-- ${marker} -->\n${content}`
+}
+
+function docs(config: ResolvedSpriteConfig): string[] {
+  const text = config.description ?? `SVG sprite icon names for "${config.name}".`
+  return ['/**', ...text.split(/\r?\n/).map((line) => ` * ${line.replace(/\*\//g, '* /')}`), ' */']
+}
+
+function iconData(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const prefix = camel(config.name)
+  const names = artifact.icons.map((icon) => icon.name)
+  const ids = Object.fromEntries(artifact.icons.map((icon) => [icon.name, icon.id]))
+  return [
+    header(config.generatedNotice),
+    '',
+    ...docs(config),
+    `export const ${prefix}IconNames = ${JSON.stringify(names, null, 2)}`,
+    '',
+    `export const ${prefix}IconIds = ${JSON.stringify(ids, null, 2)}`,
+    '',
+  ].join('\n')
+}
+
+function component(config: ResolvedSpriteConfig): string {
+  const componentName = `${pascal(config.name)}Icon`
+  const ids = `${camel(config.name)}IconIds`
+  return [
+    header(config.generatedNotice),
+    "import { defineComponent, h } from 'vue'",
+    "import styles from './vue-component.module.css'",
+    `import { ${ids} } from '../icon-data.js'`,
+    "import spriteUrl from '../sprite.svg'",
+    '',
+    `export const ${componentName} = defineComponent({`,
+    `  name: '${componentName}',`,
+    '  inheritAttrs: false,',
+    '  props: {',
+    "    icon: { type: String, required: true },",
+    "    wrapped: { type: Boolean, default: false },",
+    '  },',
+    '  setup(props, { attrs }) {',
+    '    return () => {',
+    `      const href = spriteUrl + '#' + ${ids}[props.icon]`,
+    '      if (props.wrapped) {',
+    "        return h('span', { ...attrs, class: [styles.wrap, attrs.class] }, [",
+    "          h('svg', null, [h('use', { href })]),",
+    '        ])',
+    '      }',
+    "      return h('svg', { ...attrs, class: [styles.root, attrs.class] }, [",
+    "        h('use', { href }),",
+    '      ])',
+    '    }',
+    '  },',
+    '})',
+    '',
+  ].join('\n')
+}
+
+function iconDeclarations(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const componentName = `${pascal(config.name)}Icon`
+  const names = `${camel(config.name)}IconNames`
+  const ids = `${camel(config.name)}IconIds`
+  return [
+    header(config.generatedNotice),
+    '',
+    ...docs(config),
+    `export declare const ${names}: readonly [`,
+    ...artifact.icons.map((icon) => `  ${JSON.stringify(icon.name)},`),
+    ']',
+    `export type ${componentName}Name = typeof ${names}[number]`,
+    `export declare const ${ids}: {`,
+    ...artifact.icons.map((icon) => `  readonly ${JSON.stringify(icon.name)}: ${JSON.stringify(icon.id)}`),
+    '}',
+    '',
+  ].join('\n')
+}
+
+function componentDeclarations(config: ResolvedSpriteConfig): string {
+  const componentName = `${pascal(config.name)}Icon`
+  return [
+    header(config.generatedNotice),
+    "import type { CSSProperties, DefineComponent, HTMLAttributes, SVGAttributes } from 'vue'",
+    `import type { ${componentName}Name } from '../icon-data.js'`,
+    '',
+    `export type ${componentName}Style = CSSProperties & Partial<Record<\`--icon-color-\${number}\`, string | number>>`,
+    `type ${componentName}BaseProps = { icon: ${componentName}Name }`,
+    `type ${componentName}SvgProps = ${componentName}BaseProps & { wrapped?: false } & Omit<SVGAttributes, 'style'> & { style?: ${componentName}Style }`,
+    `type ${componentName}WrappedProps = ${componentName}BaseProps & { wrapped: true } & Omit<HTMLAttributes, 'style'> & { style?: ${componentName}Style }`,
+    `export type ${componentName}Props = ${componentName}SvgProps | ${componentName}WrappedProps`,
+    `export declare const ${componentName}: DefineComponent<${componentName}Props>`,
+    '',
+  ].join('\n')
+}
+
+function index(config: ResolvedSpriteConfig): string {
+  return [
+    header(config.generatedNotice),
+    `export { ${pascal(config.name)}Icon } from './vue/vue-component.js'`,
+    `export { ${camel(config.name)}IconNames } from './icon-data.js'`,
+    '',
+  ].join('\n')
+}
+
+function indexDeclarations(config: ResolvedSpriteConfig): string {
+  const componentName = `${pascal(config.name)}Icon`
+  const names = `${camel(config.name)}IconNames`
+  return [
+    header(config.generatedNotice),
+    `export { ${componentName} } from './vue/vue-component.js'`,
+    `export type { ${componentName}Props, ${componentName}Style } from './vue/vue-component.js'`,
+    `export { ${names} } from './icon-data.js'`,
+    `export type { ${componentName}Name } from './icon-data.js'`,
+    '',
+  ].join('\n')
+}
+
+function styles(config: ResolvedSpriteConfig): string {
+  const transition = config.transform.addTransition
+    ? ['  transition-property: fill, stroke, color;', '  transition-duration: 0.3s;', '  transition-timing-function: ease;']
+    : []
+  return [
+    header(config.generatedNotice),
+    '',
+    '.root {',
+    ...transition,
+    '}',
+    '',
+    '.wrap {',
+    '  display: inline-flex;',
+    '}',
+    '',
+    '.wrap svg {',
+    '  width: 100%;',
+    '  height: 100%;',
+    ...transition,
+    '}',
+    '',
+  ].join('\n')
+}
+
+function manifest(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const data = {
+    schemaVersion: 1,
+    generator: '@gromlab/svg-sprites',
+    name: config.name,
+    ...(config.description === undefined ? {} : { description: config.description }),
+    usage: { framework: 'vue', componentName: `${pascal(config.name)}Icon` },
+    mode: MODE,
+    target: TARGET,
+    format: artifact.format,
+    iconCount: artifact.icons.length,
+    spriteUrl: '__SPRITE_URL__',
+    icons: artifact.icons,
+  }
+  const source = JSON.stringify(data, null, 2).replace('"__SPRITE_URL__"', 'spriteUrl')
+  return [
+    header(config.generatedNotice),
+    "import spriteUrl from './sprite.svg'",
+    '',
+    `export const spriteManifest = ${source}`,
+    '',
+    'export default spriteManifest',
+    '',
+  ].join('\n')
+}
+
+function manifestDeclarations(config: ResolvedSpriteConfig): string {
+  return [
+    header(config.generatedNotice),
+    '',
+    'export type SpriteManifestColor = { variable: `--icon-color-${number}`; fallback: string }',
+    'export type SpriteManifestIcon = {',
+    '  name: string',
+    '  id: string',
+    '  viewBox: string | null',
+    '  colors: readonly SpriteManifestColor[]',
+    '}',
+    'export type SpriteManifest = {',
+    '  schemaVersion: 1',
+    "  generator: '@gromlab/svg-sprites'",
+    '  name: string',
+    '  description?: string',
+    "  usage: { framework: 'vue'; componentName: string }",
+    "  mode: 'nuxt@webpack'",
+    "  target: 'webpack'",
+    "  format: 'stack' | 'symbol'",
+    '  iconCount: number',
+    '  spriteUrl: string',
+    '  icons: readonly SpriteManifestIcon[]',
+    '}',
+    '',
+    'export declare const spriteManifest: SpriteManifest',
+    'export default spriteManifest',
+    '',
+  ].join('\n')
+}
+
+export function generateOutputFiles(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): GeneratedFile[] {
+  return [
+    { path: path.posix.join(OUTPUT_DIR, 'index.js'), content: index(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'index.d.ts'), content: indexDeclarations(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'sprite.svg'), content: markedSvg(artifact.bytes, config.generatedNotice) },
+    { path: path.posix.join(OUTPUT_DIR, 'icon-data.js'), content: iconData(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'icon-data.d.ts'), content: iconDeclarations(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'vue', 'vue-component.js'), content: component(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'vue', 'vue-component.d.ts'), content: componentDeclarations(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'vue', 'vue-component.module.css'), content: styles(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.js'), content: manifest(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.d.ts'), content: manifestDeclarations(config) },
+  ]
+}

src/modes/preact-vite/adapter.ts

@@ -0,0 +1,25 @@
+import { compileSpriteContent } from '../../compiler.js'
+import { createCompiledSpriteArtifact } from '../../core/compiled-artifact.js'
+import type { ModeAdapter } from '../../core/mode-adapter.js'
+import { generateOutputFiles } from './output.js'
+
+export const preactViteAdapter: ModeAdapter<'preact@vite'> = {
+  mode: 'preact@vite',
+  async generate(context) {
+    const bytes = await compileSpriteContent(context.prepared.folder, context.config.transform, {
+      rootViewBox: false,
+    })
+    const artifact = createCompiledSpriteArtifact(bytes, context.prepared.iconNames, 'stack')
+
+    return {
+      files: generateOutputFiles(context.config, artifact),
+      paths: {
+        generatedDir: '.svg-sprite',
+        sprite: '.svg-sprite/sprite.svg',
+        manifest: '.svg-sprite/svg-sprite.manifest.js',
+        entry: '.svg-sprite/index.js',
+      },
+      result: { target: 'vite' },
+    }
+  },
+}

src/modes/preact-vite/output.ts

@@ -0,0 +1,188 @@
+import path from 'node:path'
+import type { CompiledSpriteArtifact } from '../../core/compiled-artifact.js'
+import { GENERATED_MARKER } from '../../core/generated-markers.js'
+import type { GeneratedFile } from '../../core/mode-adapter.js'
+import type { ResolvedSpriteConfig } from '../../types.js'
+
+const OUTPUT_DIR = '.svg-sprite'
+
+function pascal(value: string): string {
+  return value.split('-').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join('')
+}
+
+function camel(value: string): string {
+  return value.replace(/-([a-z0-9])/g, (_, char: string) => char.toUpperCase())
+}
+
+function header(enabled: boolean): string {
+  return enabled
+    ? `/*\n * АВТОМАТИЧЕСКИ СГЕНЕРИРОВАННЫЙ ФАЙЛ. Не редактируйте вручную.\n * ${GENERATED_MARKER}.\n */`
+    : `/* ${GENERATED_MARKER}. Do not edit. */`
+}
+
+function svg(bytes: Uint8Array, enabled: boolean): string {
+  const notice = enabled
+    ? `АВТОМАТИЧЕСКИ СГЕНЕРИРОВАННЫЙ ФАЙЛ. ${GENERATED_MARKER}.`
+    : `${GENERATED_MARKER}. Do not edit.`
+  const content = new TextDecoder().decode(bytes)
+  return content.startsWith('<?xml')
+    ? content.replace(/^(<\?xml[^?]*\?>)\s*/, `$1\n<!-- ${notice} -->\n`)
+    : `<!-- ${notice} -->\n${content}`
+}
+
+function description(config: ResolvedSpriteConfig): string[] {
+  const text = config.description ?? `Имена иконок SVG-спрайта «${config.name}».`
+  return ['/**', ...text.split(/\r?\n/).map((line) => ` * ${line.replace(/\*\//g, '* /')}`), ' */']
+}
+
+function iconData(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const name = camel(config.name)
+  return [
+    header(config.generatedNotice),
+    '',
+    ...description(config),
+    `export const ${name}IconNames = ${JSON.stringify(artifact.icons.map((icon) => icon.name), null, 2)}`,
+    '',
+    `export const ${name}IconIds = ${JSON.stringify(Object.fromEntries(artifact.icons.map((icon) => [icon.name, icon.id])), null, 2)}`,
+    '',
+  ].join('\n')
+}
+
+function iconTypes(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const component = `${pascal(config.name)}Icon`
+  const names = `${camel(config.name)}IconNames`
+  const ids = `${camel(config.name)}IconIds`
+  return [
+    header(config.generatedNotice),
+    '',
+    ...description(config),
+    `export declare const ${names}: readonly [`,
+    ...artifact.icons.map((icon) => `  ${JSON.stringify(icon.name)},`),
+    ']',
+    `export type ${component}Name = typeof ${names}[number]`,
+    `export declare const ${ids}: {`,
+    ...artifact.icons.map((icon) => `  readonly ${JSON.stringify(icon.name)}: ${JSON.stringify(icon.id)}`),
+    '}',
+    '',
+  ].join('\n')
+}
+
+function component(config: ResolvedSpriteConfig): string {
+  const componentName = `${pascal(config.name)}Icon`
+  const ids = `${camel(config.name)}IconIds`
+  return [
+    header(config.generatedNotice),
+    "import { h } from 'preact'",
+    "import styles from './preact-component.module.css'",
+    `import { ${ids} } from '../icon-data.js'`,
+    "import spriteUrl from '../sprite.svg?no-inline'",
+    '',
+    `/** Иконка из SVG-спрайта «${config.name}». */`,
+    `export const ${componentName} = (props) => {`,
+    '  const { icon, wrapped, class: classValue, className, ...rest } = props',
+    `  const href = spriteUrl + '#' + ${ids}[icon]`,
+    '  const classes = [wrapped ? styles.wrap : styles.root, classValue, className].filter(Boolean).join(\' \')',
+    '',
+    '  if (wrapped) {',
+    "    return h('span', { ...rest, class: classes }, h('svg', null, h('use', { href })))",
+    '  }',
+    "  return h('svg', { ...rest, class: classes }, h('use', { href }))",
+    '}',
+    '',
+  ].join('\n')
+}
+
+function componentTypes(config: ResolvedSpriteConfig): string {
+  const component = `${pascal(config.name)}Icon`
+  return [
+    header(config.generatedNotice),
+    "import type { FunctionalComponent, JSX } from 'preact'",
+    `import type { ${component}Name } from '../icon-data.js'`,
+    '',
+    `export type ${component}Style = JSX.CSSProperties & Partial<Record<\`--icon-color-\${number}\`, string | number>>`,
+    `type ${component}BaseProps = { icon: ${component}Name }`,
+    `type ${component}SvgProps = ${component}BaseProps & { wrapped?: false } & Omit<JSX.SVGAttributes<SVGSVGElement>, 'style'> & { style?: ${component}Style }`,
+    `type ${component}WrappedProps = ${component}BaseProps & { wrapped: true } & Omit<JSX.HTMLAttributes<HTMLSpanElement>, 'style'> & { style?: ${component}Style }`,
+    `export type ${component}Props = ${component}SvgProps | ${component}WrappedProps`,
+    `export declare const ${component}: FunctionalComponent<${component}Props>`,
+    '',
+  ].join('\n')
+}
+
+function index(config: ResolvedSpriteConfig): string {
+  return [
+    header(config.generatedNotice),
+    `export { ${pascal(config.name)}Icon } from './preact/preact-component.js'`,
+    `export { ${camel(config.name)}IconNames } from './icon-data.js'`,
+    '',
+  ].join('\n')
+}
+
+function indexTypes(config: ResolvedSpriteConfig): string {
+  const component = `${pascal(config.name)}Icon`
+  return [
+    header(config.generatedNotice),
+    `export { ${component} } from './preact/preact-component.js'`,
+    `export type { ${component}Props, ${component}Style } from './preact/preact-component.js'`,
+    `export { ${camel(config.name)}IconNames } from './icon-data.js'`,
+    `export type { ${component}Name } from './icon-data.js'`,
+    '',
+  ].join('\n')
+}
+
+function styles(config: ResolvedSpriteConfig): string {
+  const transition = config.transform.addTransition
+    ? ['  transition-property: fill, stroke, color;', '  transition-duration: 0.3s;', '  transition-timing-function: ease;']
+    : []
+  return [header(config.generatedNotice), '', '.root {', ...transition, '}', '', '.wrap {', '  display: inline-flex;', '}', '', '.wrap svg {', '  width: 100%;', '  height: 100%;', ...transition, '}', ''].join('\n')
+}
+
+function manifest(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const data = {
+    schemaVersion: 1,
+    generator: '@gromlab/svg-sprites',
+    name: config.name,
+    ...(config.description === undefined ? {} : { description: config.description }),
+    usage: { framework: 'preact', componentName: `${pascal(config.name)}Icon` },
+    mode: 'preact@vite',
+    target: 'vite',
+    format: artifact.format,
+    iconCount: artifact.icons.length,
+    spriteUrl: '__SPRITE_URL__',
+    icons: artifact.icons,
+  }
+  const source = JSON.stringify(data, null, 2).replace('"__SPRITE_URL__"', 'spriteUrl')
+  return [header(config.generatedNotice), "import spriteUrl from './sprite.svg?no-inline'", '', `export const spriteManifest = ${source}`, '', 'export default spriteManifest', ''].join('\n')
+}
+
+function manifestTypes(config: ResolvedSpriteConfig): string {
+  return [
+    header(config.generatedNotice),
+    'export type SpriteManifestColor = { variable: `--icon-color-${number}`; fallback: string }',
+    'export type SpriteManifestIcon = { name: string; id: string; viewBox: string | null; colors: readonly SpriteManifestColor[] }',
+    'export type SpriteManifest = {',
+    "  schemaVersion: 1; generator: '@gromlab/svg-sprites'; name: string; description?: string",
+    "  usage: { framework: 'preact'; componentName: string }",
+    "  mode: 'preact@vite'; target: 'vite'; format: 'stack' | 'symbol'",
+    '  iconCount: number; spriteUrl: string; icons: readonly SpriteManifestIcon[]',
+    '}',
+    'export declare const spriteManifest: SpriteManifest',
+    'export default spriteManifest',
+    '',
+  ].join('\n')
+}
+
+export function generateOutputFiles(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): GeneratedFile[] {
+  return [
+    { path: path.posix.join(OUTPUT_DIR, 'index.js'), content: index(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'index.d.ts'), content: indexTypes(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'sprite.svg'), content: svg(artifact.bytes, config.generatedNotice) },
+    { path: path.posix.join(OUTPUT_DIR, 'icon-data.js'), content: iconData(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'icon-data.d.ts'), content: iconTypes(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'preact', 'preact-component.js'), content: component(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'preact', 'preact-component.d.ts'), content: componentTypes(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'preact', 'preact-component.module.css'), content: styles(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.js'), content: manifest(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.d.ts'), content: manifestTypes(config) },
+  ]
+}

src/modes/preact-webpack/adapter.ts

@@ -0,0 +1,25 @@
+import { compileSpriteContent } from '../../compiler.js'
+import { createCompiledSpriteArtifact } from '../../core/compiled-artifact.js'
+import type { ModeAdapter } from '../../core/mode-adapter.js'
+import { generateOutputFiles } from './output.js'
+
+export const preactWebpackAdapter: ModeAdapter<'preact@webpack'> = {
+  mode: 'preact@webpack',
+  async generate(context) {
+    const bytes = await compileSpriteContent(context.prepared.folder, context.config.transform, {
+      rootViewBox: false,
+    })
+    const artifact = createCompiledSpriteArtifact(bytes, context.prepared.iconNames, 'stack')
+
+    return {
+      files: generateOutputFiles(context.config, artifact),
+      paths: {
+        generatedDir: '.svg-sprite',
+        sprite: '.svg-sprite/sprite.svg',
+        manifest: '.svg-sprite/svg-sprite.manifest.js',
+        entry: '.svg-sprite/index.js',
+      },
+      result: { target: 'webpack' },
+    }
+  },
+}

src/modes/preact-webpack/output.ts

@@ -0,0 +1,189 @@
+import path from 'node:path'
+import type { CompiledSpriteArtifact } from '../../core/compiled-artifact.js'
+import { GENERATED_MARKER } from '../../core/generated-markers.js'
+import type { GeneratedFile } from '../../core/mode-adapter.js'
+import type { ResolvedSpriteConfig } from '../../types.js'
+
+const OUTPUT_DIR = '.svg-sprite'
+
+function pascal(value: string): string {
+  return value.split('-').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join('')
+}
+
+function camel(value: string): string {
+  return value.replace(/-([a-z0-9])/g, (_, char: string) => char.toUpperCase())
+}
+
+function header(enabled: boolean): string {
+  return enabled
+    ? `/*\n * АВТОМАТИЧЕСКИ СГЕНЕРИРОВАННЫЙ ФАЙЛ. Не редактируйте вручную.\n * ${GENERATED_MARKER}.\n */`
+    : `/* ${GENERATED_MARKER}. Do not edit. */`
+}
+
+function svg(bytes: Uint8Array, enabled: boolean): string {
+  const notice = enabled
+    ? `АВТОМАТИЧЕСКИ СГЕНЕРИРОВАННЫЙ ФАЙЛ. ${GENERATED_MARKER}.`
+    : `${GENERATED_MARKER}. Do not edit.`
+  const content = new TextDecoder().decode(bytes)
+  return content.startsWith('<?xml')
+    ? content.replace(/^(<\?xml[^?]*\?>)\s*/, `$1\n<!-- ${notice} -->\n`)
+    : `<!-- ${notice} -->\n${content}`
+}
+
+function description(config: ResolvedSpriteConfig): string[] {
+  const text = config.description ?? `Имена иконок SVG-спрайта «${config.name}».`
+  return ['/**', ...text.split(/\r?\n/).map((line) => ` * ${line.replace(/\*\//g, '* /')}`), ' */']
+}
+
+function iconData(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const name = camel(config.name)
+  return [
+    header(config.generatedNotice),
+    '',
+    ...description(config),
+    `export const ${name}IconNames = ${JSON.stringify(artifact.icons.map((icon) => icon.name), null, 2)}`,
+    '',
+    `export const ${name}IconIds = ${JSON.stringify(Object.fromEntries(artifact.icons.map((icon) => [icon.name, icon.id])), null, 2)}`,
+    '',
+  ].join('\n')
+}
+
+function iconTypes(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const component = `${pascal(config.name)}Icon`
+  const names = `${camel(config.name)}IconNames`
+  const ids = `${camel(config.name)}IconIds`
+  return [
+    header(config.generatedNotice),
+    '',
+    ...description(config),
+    `export declare const ${names}: readonly [`,
+    ...artifact.icons.map((icon) => `  ${JSON.stringify(icon.name)},`),
+    ']',
+    `export type ${component}Name = typeof ${names}[number]`,
+    `export declare const ${ids}: {`,
+    ...artifact.icons.map((icon) => `  readonly ${JSON.stringify(icon.name)}: ${JSON.stringify(icon.id)}`),
+    '}',
+    '',
+  ].join('\n')
+}
+
+function component(config: ResolvedSpriteConfig): string {
+  const componentName = `${pascal(config.name)}Icon`
+  const ids = `${camel(config.name)}IconIds`
+  return [
+    header(config.generatedNotice),
+    "import { h } from 'preact'",
+    "import styles from './preact-component.module.css'",
+    `import { ${ids} } from '../icon-data.js'`,
+    '',
+    "const spriteUrl = new URL('../sprite.svg', import.meta.url).href",
+    '',
+    `/** Иконка из SVG-спрайта «${config.name}». */`,
+    `export const ${componentName} = (props) => {`,
+    '  const { icon, wrapped, class: classValue, className, ...rest } = props',
+    `  const href = spriteUrl + '#' + ${ids}[icon]`,
+    '  const classes = [wrapped ? styles.wrap : styles.root, classValue, className].filter(Boolean).join(\' \')',
+    '',
+    '  if (wrapped) {',
+    "    return h('span', { ...rest, class: classes }, h('svg', null, h('use', { href })))",
+    '  }',
+    "  return h('svg', { ...rest, class: classes }, h('use', { href }))",
+    '}',
+    '',
+  ].join('\n')
+}
+
+function componentTypes(config: ResolvedSpriteConfig): string {
+  const component = `${pascal(config.name)}Icon`
+  return [
+    header(config.generatedNotice),
+    "import type { FunctionalComponent, JSX } from 'preact'",
+    `import type { ${component}Name } from '../icon-data.js'`,
+    '',
+    `export type ${component}Style = JSX.CSSProperties & Partial<Record<\`--icon-color-\${number}\`, string | number>>`,
+    `type ${component}BaseProps = { icon: ${component}Name }`,
+    `type ${component}SvgProps = ${component}BaseProps & { wrapped?: false } & Omit<JSX.SVGAttributes<SVGSVGElement>, 'style'> & { style?: ${component}Style }`,
+    `type ${component}WrappedProps = ${component}BaseProps & { wrapped: true } & Omit<JSX.HTMLAttributes<HTMLSpanElement>, 'style'> & { style?: ${component}Style }`,
+    `export type ${component}Props = ${component}SvgProps | ${component}WrappedProps`,
+    `export declare const ${component}: FunctionalComponent<${component}Props>`,
+    '',
+  ].join('\n')
+}
+
+function index(config: ResolvedSpriteConfig): string {
+  return [
+    header(config.generatedNotice),
+    `export { ${pascal(config.name)}Icon } from './preact/preact-component.js'`,
+    `export { ${camel(config.name)}IconNames } from './icon-data.js'`,
+    '',
+  ].join('\n')
+}
+
+function indexTypes(config: ResolvedSpriteConfig): string {
+  const component = `${pascal(config.name)}Icon`
+  return [
+    header(config.generatedNotice),
+    `export { ${component} } from './preact/preact-component.js'`,
+    `export type { ${component}Props, ${component}Style } from './preact/preact-component.js'`,
+    `export { ${camel(config.name)}IconNames } from './icon-data.js'`,
+    `export type { ${component}Name } from './icon-data.js'`,
+    '',
+  ].join('\n')
+}
+
+function styles(config: ResolvedSpriteConfig): string {
+  const transition = config.transform.addTransition
+    ? ['  transition-property: fill, stroke, color;', '  transition-duration: 0.3s;', '  transition-timing-function: ease;']
+    : []
+  return [header(config.generatedNotice), '', '.root {', ...transition, '}', '', '.wrap {', '  display: inline-flex;', '}', '', '.wrap svg {', '  width: 100%;', '  height: 100%;', ...transition, '}', ''].join('\n')
+}
+
+function manifest(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const data = {
+    schemaVersion: 1,
+    generator: '@gromlab/svg-sprites',
+    name: config.name,
+    ...(config.description === undefined ? {} : { description: config.description }),
+    usage: { framework: 'preact', componentName: `${pascal(config.name)}Icon` },
+    mode: 'preact@webpack',
+    target: 'webpack',
+    format: artifact.format,
+    iconCount: artifact.icons.length,
+    spriteUrl: '__SPRITE_URL__',
+    icons: artifact.icons,
+  }
+  const source = JSON.stringify(data, null, 2).replace('"__SPRITE_URL__"', 'spriteUrl')
+  return [header(config.generatedNotice), "const spriteUrl = new URL('./sprite.svg', import.meta.url).href", '', `export const spriteManifest = ${source}`, '', 'export default spriteManifest', ''].join('\n')
+}
+
+function manifestTypes(config: ResolvedSpriteConfig): string {
+  return [
+    header(config.generatedNotice),
+    'export type SpriteManifestColor = { variable: `--icon-color-${number}`; fallback: string }',
+    'export type SpriteManifestIcon = { name: string; id: string; viewBox: string | null; colors: readonly SpriteManifestColor[] }',
+    'export type SpriteManifest = {',
+    "  schemaVersion: 1; generator: '@gromlab/svg-sprites'; name: string; description?: string",
+    "  usage: { framework: 'preact'; componentName: string }",
+    "  mode: 'preact@webpack'; target: 'webpack'; format: 'stack' | 'symbol'",
+    '  iconCount: number; spriteUrl: string; icons: readonly SpriteManifestIcon[]',
+    '}',
+    'export declare const spriteManifest: SpriteManifest',
+    'export default spriteManifest',
+    '',
+  ].join('\n')
+}
+
+export function generateOutputFiles(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): GeneratedFile[] {
+  return [
+    { path: path.posix.join(OUTPUT_DIR, 'index.js'), content: index(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'index.d.ts'), content: indexTypes(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'sprite.svg'), content: svg(artifact.bytes, config.generatedNotice) },
+    { path: path.posix.join(OUTPUT_DIR, 'icon-data.js'), content: iconData(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'icon-data.d.ts'), content: iconTypes(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'preact', 'preact-component.js'), content: component(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'preact', 'preact-component.d.ts'), content: componentTypes(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'preact', 'preact-component.module.css'), content: styles(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.js'), content: manifest(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.d.ts'), content: manifestTypes(config) },
+  ]
+}

src/modes/qwik-vite/adapter.ts

@@ -0,0 +1,25 @@
+import { compileSpriteContent } from '../../compiler.js'
+import { createCompiledSpriteArtifact } from '../../core/compiled-artifact.js'
+import type { ModeAdapter } from '../../core/mode-adapter.js'
+import { generateOutputFiles } from './output.js'
+
+export const qwikViteAdapter: ModeAdapter<'qwik@vite'> = {
+  mode: 'qwik@vite',
+  async generate(context) {
+    const bytes = await compileSpriteContent(context.prepared.folder, context.config.transform, {
+      rootViewBox: false,
+    })
+    const artifact = createCompiledSpriteArtifact(bytes, context.prepared.iconNames, 'stack')
+
+    return {
+      files: generateOutputFiles(context.config, artifact),
+      paths: {
+        generatedDir: '.svg-sprite',
+        sprite: '.svg-sprite/sprite.svg',
+        manifest: '.svg-sprite/svg-sprite.manifest.js',
+        entry: '.svg-sprite/index.js',
+      },
+      result: { target: 'vite' },
+    }
+  },
+}

src/modes/qwik-vite/output.ts

@@ -0,0 +1,192 @@
+import path from 'node:path'
+import type { CompiledSpriteArtifact } from '../../core/compiled-artifact.js'
+import { GENERATED_MARKER } from '../../core/generated-markers.js'
+import type { GeneratedFile } from '../../core/mode-adapter.js'
+import type { ResolvedSpriteConfig } from '../../types.js'
+
+const OUTPUT_DIR = '.svg-sprite'
+
+function pascal(value: string): string {
+  return value.split('-').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join('')
+}
+
+function camel(value: string): string {
+  return value.replace(/-([a-z0-9])/g, (_, char: string) => char.toUpperCase())
+}
+
+function header(enabled: boolean): string {
+  return enabled
+    ? `/*\n * АВТОМАТИЧЕСКИ СГЕНЕРИРОВАННЫЙ ФАЙЛ. Не редактируйте вручную.\n * ${GENERATED_MARKER}.\n */`
+    : `/* ${GENERATED_MARKER}. Do not edit. */`
+}
+
+function svg(bytes: Uint8Array, enabled: boolean): string {
+  const notice = enabled
+    ? `АВТОМАТИЧЕСКИ СГЕНЕРИРОВАННЫЙ ФАЙЛ. ${GENERATED_MARKER}.`
+    : `${GENERATED_MARKER}. Do not edit.`
+  const content = new TextDecoder().decode(bytes)
+  return content.startsWith('<?xml')
+    ? content.replace(/^(<\?xml[^?]*\?>)\s*/, `$1\n<!-- ${notice} -->\n`)
+    : `<!-- ${notice} -->\n${content}`
+}
+
+function description(config: ResolvedSpriteConfig): string[] {
+  const text = config.description ?? `Имена иконок SVG-спрайта «${config.name}».`
+  return ['/**', ...text.split(/\r?\n/).map((line) => ` * ${line.replace(/\*\//g, '* /')}`), ' */']
+}
+
+function iconData(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const name = camel(config.name)
+  return [
+    header(config.generatedNotice),
+    '',
+    ...description(config),
+    `export const ${name}IconNames = ${JSON.stringify(artifact.icons.map((icon) => icon.name), null, 2)}`,
+    '',
+    `export const ${name}IconIds = ${JSON.stringify(Object.fromEntries(artifact.icons.map((icon) => [icon.name, icon.id])), null, 2)}`,
+    '',
+  ].join('\n')
+}
+
+function iconTypes(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const component = `${pascal(config.name)}Icon`
+  const names = `${camel(config.name)}IconNames`
+  const ids = `${camel(config.name)}IconIds`
+  return [
+    header(config.generatedNotice),
+    '',
+    ...description(config),
+    `export declare const ${names}: readonly [`,
+    ...artifact.icons.map((icon) => `  ${JSON.stringify(icon.name)},`),
+    ']',
+    `export type ${component}Name = typeof ${names}[number]`,
+    `export declare const ${ids}: {`,
+    ...artifact.icons.map((icon) => `  readonly ${JSON.stringify(icon.name)}: ${JSON.stringify(icon.id)}`),
+    '}',
+    '',
+  ].join('\n')
+}
+
+function component(config: ResolvedSpriteConfig): string {
+  const componentName = `${pascal(config.name)}Icon`
+  const ids = `${camel(config.name)}IconIds`
+  return [
+    header(config.generatedNotice),
+    "import { component$ } from '@builder.io/qwik'",
+    "import styles from './qwik-component.module.css'",
+    `import { ${ids} } from '../icon-data.js'`,
+    "import spriteUrl from '../sprite.svg?no-inline'",
+    '',
+    `/** SSR-safe иконка из SVG-спрайта «${config.name}». */`,
+    `export const ${componentName} = component$((props) => {`,
+    '  const { icon, wrapped, class: classValue, ...rest } = props',
+    `  const href = spriteUrl + '#' + ${ids}[icon]`,
+    '  const classes = [wrapped ? styles.wrap : styles.root, classValue]',
+    '',
+    '  if (wrapped) {',
+    '    return (',
+    '      <span {...rest} class={classes}>',
+    '        <svg><use href={href} /></svg>',
+    '      </span>',
+    '    )',
+    '  }',
+    '  return <svg {...rest} class={classes}><use href={href} /></svg>',
+    '})',
+    '',
+  ].join('\n')
+}
+
+function componentTypes(config: ResolvedSpriteConfig): string {
+  const component = `${pascal(config.name)}Icon`
+  return [
+    header(config.generatedNotice),
+    "import type { Component, CSSProperties, QwikIntrinsicElements } from '@builder.io/qwik'",
+    `import type { ${component}Name } from '../icon-data.js'`,
+    '',
+    `export type ${component}Style = CSSProperties & Partial<Record<\`--icon-color-\${number}\`, string | number>>`,
+    `type ${component}BaseProps = { icon: ${component}Name }`,
+    `type ${component}SvgProps = ${component}BaseProps & { wrapped?: false } & Omit<QwikIntrinsicElements['svg'], 'style'> & { style?: ${component}Style }`,
+    `type ${component}WrappedProps = ${component}BaseProps & { wrapped: true } & Omit<QwikIntrinsicElements['span'], 'style'> & { style?: ${component}Style }`,
+    `export type ${component}Props = ${component}SvgProps | ${component}WrappedProps`,
+    `export declare const ${component}: Component<${component}Props>`,
+    '',
+  ].join('\n')
+}
+
+function index(config: ResolvedSpriteConfig): string {
+  return [
+    header(config.generatedNotice),
+    `export { ${pascal(config.name)}Icon } from './qwik/qwik-component.jsx'`,
+    `export { ${camel(config.name)}IconNames } from './icon-data.js'`,
+    '',
+  ].join('\n')
+}
+
+function indexTypes(config: ResolvedSpriteConfig): string {
+  const component = `${pascal(config.name)}Icon`
+  return [
+    header(config.generatedNotice),
+    `export { ${component} } from './qwik/qwik-component.jsx'`,
+    `export type { ${component}Props, ${component}Style } from './qwik/qwik-component.jsx'`,
+    `export { ${camel(config.name)}IconNames } from './icon-data.js'`,
+    `export type { ${component}Name } from './icon-data.js'`,
+    '',
+  ].join('\n')
+}
+
+function styles(config: ResolvedSpriteConfig): string {
+  const transition = config.transform.addTransition
+    ? ['  transition-property: fill, stroke, color;', '  transition-duration: 0.3s;', '  transition-timing-function: ease;']
+    : []
+  return [header(config.generatedNotice), '', '.root {', ...transition, '}', '', '.wrap {', '  display: inline-flex;', '}', '', '.wrap svg {', '  width: 100%;', '  height: 100%;', ...transition, '}', ''].join('\n')
+}
+
+function manifest(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const data = {
+    schemaVersion: 1,
+    generator: '@gromlab/svg-sprites',
+    name: config.name,
+    ...(config.description === undefined ? {} : { description: config.description }),
+    usage: { framework: 'qwik', componentName: `${pascal(config.name)}Icon`, ssr: true },
+    mode: 'qwik@vite',
+    target: 'vite',
+    format: artifact.format,
+    iconCount: artifact.icons.length,
+    spriteUrl: '__SPRITE_URL__',
+    icons: artifact.icons,
+  }
+  const source = JSON.stringify(data, null, 2).replace('"__SPRITE_URL__"', 'spriteUrl')
+  return [header(config.generatedNotice), "import spriteUrl from './sprite.svg?no-inline'", '', `export const spriteManifest = ${source}`, '', 'export default spriteManifest', ''].join('\n')
+}
+
+function manifestTypes(config: ResolvedSpriteConfig): string {
+  return [
+    header(config.generatedNotice),
+    'export type SpriteManifestColor = { variable: `--icon-color-${number}`; fallback: string }',
+    'export type SpriteManifestIcon = { name: string; id: string; viewBox: string | null; colors: readonly SpriteManifestColor[] }',
+    'export type SpriteManifest = {',
+    "  schemaVersion: 1; generator: '@gromlab/svg-sprites'; name: string; description?: string",
+    "  usage: { framework: 'qwik'; componentName: string; ssr: true }",
+    "  mode: 'qwik@vite'; target: 'vite'; format: 'stack' | 'symbol'",
+    '  iconCount: number; spriteUrl: string; icons: readonly SpriteManifestIcon[]',
+    '}',
+    'export declare const spriteManifest: SpriteManifest',
+    'export default spriteManifest',
+    '',
+  ].join('\n')
+}
+
+export function generateOutputFiles(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): GeneratedFile[] {
+  return [
+    { path: path.posix.join(OUTPUT_DIR, 'index.js'), content: index(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'index.d.ts'), content: indexTypes(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'sprite.svg'), content: svg(artifact.bytes, config.generatedNotice) },
+    { path: path.posix.join(OUTPUT_DIR, 'icon-data.js'), content: iconData(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'icon-data.d.ts'), content: iconTypes(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'qwik', 'qwik-component.jsx'), content: component(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'qwik', 'qwik-component.d.ts'), content: componentTypes(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'qwik', 'qwik-component.module.css'), content: styles(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.js'), content: manifest(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.d.ts'), content: manifestTypes(config) },
+  ]
+}

src/modes/solid-start-vite/adapter.ts

@@ -0,0 +1,25 @@
+import { compileSpriteContent } from '../../compiler.js'
+import { createCompiledSpriteArtifact } from '../../core/compiled-artifact.js'
+import type { ModeAdapter } from '../../core/mode-adapter.js'
+import { generateOutputFiles } from './output.js'
+
+export const solidStartViteAdapter: ModeAdapter<'solid-start@vite'> = {
+  mode: 'solid-start@vite',
+  async generate(context) {
+    const bytes = await compileSpriteContent(context.prepared.folder, context.config.transform, {
+      rootViewBox: false,
+    })
+    const artifact = createCompiledSpriteArtifact(bytes, context.prepared.iconNames, 'stack')
+
+    return {
+      files: generateOutputFiles(context.config, artifact),
+      paths: {
+        generatedDir: '.svg-sprite',
+        sprite: '.svg-sprite/sprite.svg',
+        manifest: '.svg-sprite/svg-sprite.manifest.js',
+        entry: '.svg-sprite/index.js',
+      },
+      result: { target: 'vite' },
+    }
+  },
+}

src/modes/solid-start-vite/output.ts

@@ -0,0 +1,197 @@
+import path from 'node:path'
+import type { CompiledSpriteArtifact } from '../../core/compiled-artifact.js'
+import { GENERATED_MARKER } from '../../core/generated-markers.js'
+import type { GeneratedFile } from '../../core/mode-adapter.js'
+import type { ResolvedSpriteConfig } from '../../types.js'
+
+const OUTPUT_DIR = '.svg-sprite'
+
+function pascal(value: string): string {
+  return value.split('-').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join('')
+}
+
+function camel(value: string): string {
+  return value.replace(/-([a-z0-9])/g, (_, char: string) => char.toUpperCase())
+}
+
+function header(enabled: boolean): string {
+  return enabled
+    ? `/*\n * АВТОМАТИЧЕСКИ СГЕНЕРИРОВАННЫЙ ФАЙЛ. Не редактируйте вручную.\n * ${GENERATED_MARKER}.\n */`
+    : `/* ${GENERATED_MARKER}. Do not edit. */`
+}
+
+function svg(bytes: Uint8Array, enabled: boolean): string {
+  const notice = enabled
+    ? `АВТОМАТИЧЕСКИ СГЕНЕРИРОВАННЫЙ ФАЙЛ. ${GENERATED_MARKER}.`
+    : `${GENERATED_MARKER}. Do not edit.`
+  const content = new TextDecoder().decode(bytes)
+  return content.startsWith('<?xml')
+    ? content.replace(/^(<\?xml[^?]*\?>)\s*/, `$1\n<!-- ${notice} -->\n`)
+    : `<!-- ${notice} -->\n${content}`
+}
+
+function description(config: ResolvedSpriteConfig): string[] {
+  const text = config.description ?? `Имена иконок SVG-спрайта «${config.name}».`
+  return ['/**', ...text.split(/\r?\n/).map((line) => ` * ${line.replace(/\*\//g, '* /')}`), ' */']
+}
+
+function iconData(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const name = camel(config.name)
+  return [
+    header(config.generatedNotice),
+    '',
+    ...description(config),
+    `export const ${name}IconNames = ${JSON.stringify(artifact.icons.map((icon) => icon.name), null, 2)}`,
+    '',
+    `export const ${name}IconIds = ${JSON.stringify(Object.fromEntries(artifact.icons.map((icon) => [icon.name, icon.id])), null, 2)}`,
+    '',
+  ].join('\n')
+}
+
+function iconTypes(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const component = `${pascal(config.name)}Icon`
+  const names = `${camel(config.name)}IconNames`
+  const ids = `${camel(config.name)}IconIds`
+  return [
+    header(config.generatedNotice),
+    '',
+    ...description(config),
+    `export declare const ${names}: readonly [`,
+    ...artifact.icons.map((icon) => `  ${JSON.stringify(icon.name)},`),
+    ']',
+    `export type ${component}Name = typeof ${names}[number]`,
+    `export declare const ${ids}: {`,
+    ...artifact.icons.map((icon) => `  readonly ${JSON.stringify(icon.name)}: ${JSON.stringify(icon.id)}`),
+    '}',
+    '',
+  ].join('\n')
+}
+
+function component(config: ResolvedSpriteConfig): string {
+  const componentName = `${pascal(config.name)}Icon`
+  const ids = `${camel(config.name)}IconIds`
+  return [
+    header(config.generatedNotice),
+    "import { Show, splitProps } from 'solid-js'",
+    "import styles from './solid-component.module.css'",
+    `import { ${ids} } from '../icon-data.js'`,
+    "import spriteUrl from '../sprite.svg?no-inline'",
+    '',
+    `/** SSR-safe иконка из SVG-спрайта «${config.name}». */`,
+    `export const ${componentName} = (props) => {`,
+    "  const [local, rest] = splitProps(props, ['icon', 'wrapped', 'class'])",
+    `  const href = () => spriteUrl + '#' + ${ids}[local.icon]`,
+    '',
+    '  return (',
+    '    <Show',
+    '      when={local.wrapped}',
+    '      fallback={',
+    '        <svg {...rest} class={[styles.root, local.class].filter(Boolean).join(\' \')}>',
+    '          <use href={href()} />',
+    '        </svg>',
+    '      }',
+    '    >',
+    '      <span {...rest} class={[styles.wrap, local.class].filter(Boolean).join(\' \')}>',
+    '        <svg><use href={href()} /></svg>',
+    '      </span>',
+    '    </Show>',
+    '  )',
+    '}',
+    '',
+  ].join('\n')
+}
+
+function componentTypes(config: ResolvedSpriteConfig): string {
+  const component = `${pascal(config.name)}Icon`
+  return [
+    header(config.generatedNotice),
+    "import type { Component, JSX } from 'solid-js'",
+    `import type { ${component}Name } from '../icon-data.js'`,
+    '',
+    `export type ${component}Style = JSX.CSSProperties & Partial<Record<\`--icon-color-\${number}\`, string | number>>`,
+    `type ${component}BaseProps = { icon: ${component}Name }`,
+    `type ${component}SvgProps = ${component}BaseProps & { wrapped?: false } & Omit<JSX.SvgSVGAttributes<SVGSVGElement>, 'style'> & { style?: ${component}Style }`,
+    `type ${component}WrappedProps = ${component}BaseProps & { wrapped: true } & Omit<JSX.HTMLAttributes<HTMLSpanElement>, 'style'> & { style?: ${component}Style }`,
+    `export type ${component}Props = ${component}SvgProps | ${component}WrappedProps`,
+    `export declare const ${component}: Component<${component}Props>`,
+    '',
+  ].join('\n')
+}
+
+function index(config: ResolvedSpriteConfig): string {
+  return [
+    header(config.generatedNotice),
+    `export { ${pascal(config.name)}Icon } from './solid/solid-component.jsx'`,
+    `export { ${camel(config.name)}IconNames } from './icon-data.js'`,
+    '',
+  ].join('\n')
+}
+
+function indexTypes(config: ResolvedSpriteConfig): string {
+  const component = `${pascal(config.name)}Icon`
+  return [
+    header(config.generatedNotice),
+    `export { ${component} } from './solid/solid-component.jsx'`,
+    `export type { ${component}Props, ${component}Style } from './solid/solid-component.jsx'`,
+    `export { ${camel(config.name)}IconNames } from './icon-data.js'`,
+    `export type { ${component}Name } from './icon-data.js'`,
+    '',
+  ].join('\n')
+}
+
+function styles(config: ResolvedSpriteConfig): string {
+  const transition = config.transform.addTransition
+    ? ['  transition-property: fill, stroke, color;', '  transition-duration: 0.3s;', '  transition-timing-function: ease;']
+    : []
+  return [header(config.generatedNotice), '', '.root {', ...transition, '}', '', '.wrap {', '  display: inline-flex;', '}', '', '.wrap svg {', '  width: 100%;', '  height: 100%;', ...transition, '}', ''].join('\n')
+}
+
+function manifest(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const data = {
+    schemaVersion: 1,
+    generator: '@gromlab/svg-sprites',
+    name: config.name,
+    ...(config.description === undefined ? {} : { description: config.description }),
+    usage: { framework: 'solid-start', componentName: `${pascal(config.name)}Icon`, ssr: true },
+    mode: 'solid-start@vite',
+    target: 'vite',
+    format: artifact.format,
+    iconCount: artifact.icons.length,
+    spriteUrl: '__SPRITE_URL__',
+    icons: artifact.icons,
+  }
+  const source = JSON.stringify(data, null, 2).replace('"__SPRITE_URL__"', 'spriteUrl')
+  return [header(config.generatedNotice), "import spriteUrl from './sprite.svg?no-inline'", '', `export const spriteManifest = ${source}`, '', 'export default spriteManifest', ''].join('\n')
+}
+
+function manifestTypes(config: ResolvedSpriteConfig): string {
+  return [
+    header(config.generatedNotice),
+    'export type SpriteManifestColor = { variable: `--icon-color-${number}`; fallback: string }',
+    'export type SpriteManifestIcon = { name: string; id: string; viewBox: string | null; colors: readonly SpriteManifestColor[] }',
+    'export type SpriteManifest = {',
+    "  schemaVersion: 1; generator: '@gromlab/svg-sprites'; name: string; description?: string",
+    "  usage: { framework: 'solid-start'; componentName: string; ssr: true }",
+    "  mode: 'solid-start@vite'; target: 'vite'; format: 'stack' | 'symbol'",
+    '  iconCount: number; spriteUrl: string; icons: readonly SpriteManifestIcon[]',
+    '}',
+    'export declare const spriteManifest: SpriteManifest',
+    'export default spriteManifest',
+    '',
+  ].join('\n')
+}
+
+export function generateOutputFiles(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): GeneratedFile[] {
+  return [
+    { path: path.posix.join(OUTPUT_DIR, 'index.js'), content: index(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'index.d.ts'), content: indexTypes(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'sprite.svg'), content: svg(artifact.bytes, config.generatedNotice) },
+    { path: path.posix.join(OUTPUT_DIR, 'icon-data.js'), content: iconData(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'icon-data.d.ts'), content: iconTypes(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'solid', 'solid-component.jsx'), content: component(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'solid', 'solid-component.d.ts'), content: componentTypes(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'solid', 'solid-component.module.css'), content: styles(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.js'), content: manifest(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.d.ts'), content: manifestTypes(config) },
+  ]
+}

src/modes/solid-vite/adapter.ts

@@ -0,0 +1,25 @@
+import { compileSpriteContent } from '../../compiler.js'
+import { createCompiledSpriteArtifact } from '../../core/compiled-artifact.js'
+import type { ModeAdapter } from '../../core/mode-adapter.js'
+import { generateOutputFiles } from './output.js'
+
+export const solidViteAdapter: ModeAdapter<'solid@vite'> = {
+  mode: 'solid@vite',
+  async generate(context) {
+    const bytes = await compileSpriteContent(context.prepared.folder, context.config.transform, {
+      rootViewBox: false,
+    })
+    const artifact = createCompiledSpriteArtifact(bytes, context.prepared.iconNames, 'stack')
+
+    return {
+      files: generateOutputFiles(context.config, artifact),
+      paths: {
+        generatedDir: '.svg-sprite',
+        sprite: '.svg-sprite/sprite.svg',
+        manifest: '.svg-sprite/svg-sprite.manifest.js',
+        entry: '.svg-sprite/index.js',
+      },
+      result: { target: 'vite' },
+    }
+  },
+}

src/modes/solid-vite/output.ts

@@ -0,0 +1,197 @@
+import path from 'node:path'
+import type { CompiledSpriteArtifact } from '../../core/compiled-artifact.js'
+import { GENERATED_MARKER } from '../../core/generated-markers.js'
+import type { GeneratedFile } from '../../core/mode-adapter.js'
+import type { ResolvedSpriteConfig } from '../../types.js'
+
+const OUTPUT_DIR = '.svg-sprite'
+
+function pascal(value: string): string {
+  return value.split('-').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join('')
+}
+
+function camel(value: string): string {
+  return value.replace(/-([a-z0-9])/g, (_, char: string) => char.toUpperCase())
+}
+
+function header(enabled: boolean): string {
+  return enabled
+    ? `/*\n * АВТОМАТИЧЕСКИ СГЕНЕРИРОВАННЫЙ ФАЙЛ. Не редактируйте вручную.\n * ${GENERATED_MARKER}.\n */`
+    : `/* ${GENERATED_MARKER}. Do not edit. */`
+}
+
+function svg(bytes: Uint8Array, enabled: boolean): string {
+  const notice = enabled
+    ? `АВТОМАТИЧЕСКИ СГЕНЕРИРОВАННЫЙ ФАЙЛ. ${GENERATED_MARKER}.`
+    : `${GENERATED_MARKER}. Do not edit.`
+  const content = new TextDecoder().decode(bytes)
+  return content.startsWith('<?xml')
+    ? content.replace(/^(<\?xml[^?]*\?>)\s*/, `$1\n<!-- ${notice} -->\n`)
+    : `<!-- ${notice} -->\n${content}`
+}
+
+function description(config: ResolvedSpriteConfig): string[] {
+  const text = config.description ?? `Имена иконок SVG-спрайта «${config.name}».`
+  return ['/**', ...text.split(/\r?\n/).map((line) => ` * ${line.replace(/\*\//g, '* /')}`), ' */']
+}
+
+function iconData(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const name = camel(config.name)
+  return [
+    header(config.generatedNotice),
+    '',
+    ...description(config),
+    `export const ${name}IconNames = ${JSON.stringify(artifact.icons.map((icon) => icon.name), null, 2)}`,
+    '',
+    `export const ${name}IconIds = ${JSON.stringify(Object.fromEntries(artifact.icons.map((icon) => [icon.name, icon.id])), null, 2)}`,
+    '',
+  ].join('\n')
+}
+
+function iconTypes(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const component = `${pascal(config.name)}Icon`
+  const names = `${camel(config.name)}IconNames`
+  const ids = `${camel(config.name)}IconIds`
+  return [
+    header(config.generatedNotice),
+    '',
+    ...description(config),
+    `export declare const ${names}: readonly [`,
+    ...artifact.icons.map((icon) => `  ${JSON.stringify(icon.name)},`),
+    ']',
+    `export type ${component}Name = typeof ${names}[number]`,
+    `export declare const ${ids}: {`,
+    ...artifact.icons.map((icon) => `  readonly ${JSON.stringify(icon.name)}: ${JSON.stringify(icon.id)}`),
+    '}',
+    '',
+  ].join('\n')
+}
+
+function component(config: ResolvedSpriteConfig): string {
+  const componentName = `${pascal(config.name)}Icon`
+  const ids = `${camel(config.name)}IconIds`
+  return [
+    header(config.generatedNotice),
+    "import { Show, splitProps } from 'solid-js'",
+    "import styles from './solid-component.module.css'",
+    `import { ${ids} } from '../icon-data.js'`,
+    "import spriteUrl from '../sprite.svg?no-inline'",
+    '',
+    `/** Иконка из SVG-спрайта «${config.name}». */`,
+    `export const ${componentName} = (props) => {`,
+    "  const [local, rest] = splitProps(props, ['icon', 'wrapped', 'class'])",
+    `  const href = () => spriteUrl + '#' + ${ids}[local.icon]`,
+    '',
+    '  return (',
+    '    <Show',
+    '      when={local.wrapped}',
+    '      fallback={',
+    '        <svg {...rest} class={[styles.root, local.class].filter(Boolean).join(\' \')}>',
+    '          <use href={href()} />',
+    '        </svg>',
+    '      }',
+    '    >',
+    '      <span {...rest} class={[styles.wrap, local.class].filter(Boolean).join(\' \')}>',
+    '        <svg><use href={href()} /></svg>',
+    '      </span>',
+    '    </Show>',
+    '  )',
+    '}',
+    '',
+  ].join('\n')
+}
+
+function componentTypes(config: ResolvedSpriteConfig): string {
+  const component = `${pascal(config.name)}Icon`
+  return [
+    header(config.generatedNotice),
+    "import type { Component, JSX } from 'solid-js'",
+    `import type { ${component}Name } from '../icon-data.js'`,
+    '',
+    `export type ${component}Style = JSX.CSSProperties & Partial<Record<\`--icon-color-\${number}\`, string | number>>`,
+    `type ${component}BaseProps = { icon: ${component}Name }`,
+    `type ${component}SvgProps = ${component}BaseProps & { wrapped?: false } & Omit<JSX.SvgSVGAttributes<SVGSVGElement>, 'style'> & { style?: ${component}Style }`,
+    `type ${component}WrappedProps = ${component}BaseProps & { wrapped: true } & Omit<JSX.HTMLAttributes<HTMLSpanElement>, 'style'> & { style?: ${component}Style }`,
+    `export type ${component}Props = ${component}SvgProps | ${component}WrappedProps`,
+    `export declare const ${component}: Component<${component}Props>`,
+    '',
+  ].join('\n')
+}
+
+function index(config: ResolvedSpriteConfig): string {
+  return [
+    header(config.generatedNotice),
+    `export { ${pascal(config.name)}Icon } from './solid/solid-component.jsx'`,
+    `export { ${camel(config.name)}IconNames } from './icon-data.js'`,
+    '',
+  ].join('\n')
+}
+
+function indexTypes(config: ResolvedSpriteConfig): string {
+  const component = `${pascal(config.name)}Icon`
+  return [
+    header(config.generatedNotice),
+    `export { ${component} } from './solid/solid-component.jsx'`,
+    `export type { ${component}Props, ${component}Style } from './solid/solid-component.jsx'`,
+    `export { ${camel(config.name)}IconNames } from './icon-data.js'`,
+    `export type { ${component}Name } from './icon-data.js'`,
+    '',
+  ].join('\n')
+}
+
+function styles(config: ResolvedSpriteConfig): string {
+  const transition = config.transform.addTransition
+    ? ['  transition-property: fill, stroke, color;', '  transition-duration: 0.3s;', '  transition-timing-function: ease;']
+    : []
+  return [header(config.generatedNotice), '', '.root {', ...transition, '}', '', '.wrap {', '  display: inline-flex;', '}', '', '.wrap svg {', '  width: 100%;', '  height: 100%;', ...transition, '}', ''].join('\n')
+}
+
+function manifest(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const data = {
+    schemaVersion: 1,
+    generator: '@gromlab/svg-sprites',
+    name: config.name,
+    ...(config.description === undefined ? {} : { description: config.description }),
+    usage: { framework: 'solid', componentName: `${pascal(config.name)}Icon` },
+    mode: 'solid@vite',
+    target: 'vite',
+    format: artifact.format,
+    iconCount: artifact.icons.length,
+    spriteUrl: '__SPRITE_URL__',
+    icons: artifact.icons,
+  }
+  const source = JSON.stringify(data, null, 2).replace('"__SPRITE_URL__"', 'spriteUrl')
+  return [header(config.generatedNotice), "import spriteUrl from './sprite.svg?no-inline'", '', `export const spriteManifest = ${source}`, '', 'export default spriteManifest', ''].join('\n')
+}
+
+function manifestTypes(config: ResolvedSpriteConfig): string {
+  return [
+    header(config.generatedNotice),
+    'export type SpriteManifestColor = { variable: `--icon-color-${number}`; fallback: string }',
+    'export type SpriteManifestIcon = { name: string; id: string; viewBox: string | null; colors: readonly SpriteManifestColor[] }',
+    'export type SpriteManifest = {',
+    "  schemaVersion: 1; generator: '@gromlab/svg-sprites'; name: string; description?: string",
+    "  usage: { framework: 'solid'; componentName: string }",
+    "  mode: 'solid@vite'; target: 'vite'; format: 'stack' | 'symbol'",
+    '  iconCount: number; spriteUrl: string; icons: readonly SpriteManifestIcon[]',
+    '}',
+    'export declare const spriteManifest: SpriteManifest',
+    'export default spriteManifest',
+    '',
+  ].join('\n')
+}
+
+export function generateOutputFiles(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): GeneratedFile[] {
+  return [
+    { path: path.posix.join(OUTPUT_DIR, 'index.js'), content: index(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'index.d.ts'), content: indexTypes(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'sprite.svg'), content: svg(artifact.bytes, config.generatedNotice) },
+    { path: path.posix.join(OUTPUT_DIR, 'icon-data.js'), content: iconData(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'icon-data.d.ts'), content: iconTypes(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'solid', 'solid-component.jsx'), content: component(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'solid', 'solid-component.d.ts'), content: componentTypes(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'solid', 'solid-component.module.css'), content: styles(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.js'), content: manifest(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.d.ts'), content: manifestTypes(config) },
+  ]
+}

src/modes/solid-webpack/adapter.ts

@@ -0,0 +1,25 @@
+import { compileSpriteContent } from '../../compiler.js'
+import { createCompiledSpriteArtifact } from '../../core/compiled-artifact.js'
+import type { ModeAdapter } from '../../core/mode-adapter.js'
+import { generateOutputFiles } from './output.js'
+
+export const solidWebpackAdapter: ModeAdapter<'solid@webpack'> = {
+  mode: 'solid@webpack',
+  async generate(context) {
+    const bytes = await compileSpriteContent(context.prepared.folder, context.config.transform, {
+      rootViewBox: false,
+    })
+    const artifact = createCompiledSpriteArtifact(bytes, context.prepared.iconNames, 'stack')
+
+    return {
+      files: generateOutputFiles(context.config, artifact),
+      paths: {
+        generatedDir: '.svg-sprite',
+        sprite: '.svg-sprite/sprite.svg',
+        manifest: '.svg-sprite/svg-sprite.manifest.js',
+        entry: '.svg-sprite/index.js',
+      },
+      result: { target: 'webpack' },
+    }
+  },
+}

src/modes/solid-webpack/output.ts

@@ -0,0 +1,198 @@
+import path from 'node:path'
+import type { CompiledSpriteArtifact } from '../../core/compiled-artifact.js'
+import { GENERATED_MARKER } from '../../core/generated-markers.js'
+import type { GeneratedFile } from '../../core/mode-adapter.js'
+import type { ResolvedSpriteConfig } from '../../types.js'
+
+const OUTPUT_DIR = '.svg-sprite'
+
+function pascal(value: string): string {
+  return value.split('-').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join('')
+}
+
+function camel(value: string): string {
+  return value.replace(/-([a-z0-9])/g, (_, char: string) => char.toUpperCase())
+}
+
+function header(enabled: boolean): string {
+  return enabled
+    ? `/*\n * АВТОМАТИЧЕСКИ СГЕНЕРИРОВАННЫЙ ФАЙЛ. Не редактируйте вручную.\n * ${GENERATED_MARKER}.\n */`
+    : `/* ${GENERATED_MARKER}. Do not edit. */`
+}
+
+function svg(bytes: Uint8Array, enabled: boolean): string {
+  const notice = enabled
+    ? `АВТОМАТИЧЕСКИ СГЕНЕРИРОВАННЫЙ ФАЙЛ. ${GENERATED_MARKER}.`
+    : `${GENERATED_MARKER}. Do not edit.`
+  const content = new TextDecoder().decode(bytes)
+  return content.startsWith('<?xml')
+    ? content.replace(/^(<\?xml[^?]*\?>)\s*/, `$1\n<!-- ${notice} -->\n`)
+    : `<!-- ${notice} -->\n${content}`
+}
+
+function description(config: ResolvedSpriteConfig): string[] {
+  const text = config.description ?? `Имена иконок SVG-спрайта «${config.name}».`
+  return ['/**', ...text.split(/\r?\n/).map((line) => ` * ${line.replace(/\*\//g, '* /')}`), ' */']
+}
+
+function iconData(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const name = camel(config.name)
+  return [
+    header(config.generatedNotice),
+    '',
+    ...description(config),
+    `export const ${name}IconNames = ${JSON.stringify(artifact.icons.map((icon) => icon.name), null, 2)}`,
+    '',
+    `export const ${name}IconIds = ${JSON.stringify(Object.fromEntries(artifact.icons.map((icon) => [icon.name, icon.id])), null, 2)}`,
+    '',
+  ].join('\n')
+}
+
+function iconTypes(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const component = `${pascal(config.name)}Icon`
+  const names = `${camel(config.name)}IconNames`
+  const ids = `${camel(config.name)}IconIds`
+  return [
+    header(config.generatedNotice),
+    '',
+    ...description(config),
+    `export declare const ${names}: readonly [`,
+    ...artifact.icons.map((icon) => `  ${JSON.stringify(icon.name)},`),
+    ']',
+    `export type ${component}Name = typeof ${names}[number]`,
+    `export declare const ${ids}: {`,
+    ...artifact.icons.map((icon) => `  readonly ${JSON.stringify(icon.name)}: ${JSON.stringify(icon.id)}`),
+    '}',
+    '',
+  ].join('\n')
+}
+
+function component(config: ResolvedSpriteConfig): string {
+  const componentName = `${pascal(config.name)}Icon`
+  const ids = `${camel(config.name)}IconIds`
+  return [
+    header(config.generatedNotice),
+    "import { Show, splitProps } from 'solid-js'",
+    "import styles from './solid-component.module.css'",
+    `import { ${ids} } from '../icon-data.js'`,
+    '',
+    "const spriteUrl = new URL('../sprite.svg', import.meta.url).href",
+    '',
+    `/** Иконка из SVG-спрайта «${config.name}». */`,
+    `export const ${componentName} = (props) => {`,
+    "  const [local, rest] = splitProps(props, ['icon', 'wrapped', 'class'])",
+    `  const href = () => spriteUrl + '#' + ${ids}[local.icon]`,
+    '',
+    '  return (',
+    '    <Show',
+    '      when={local.wrapped}',
+    '      fallback={',
+    '        <svg {...rest} class={[styles.root, local.class].filter(Boolean).join(\' \')}>',
+    '          <use href={href()} />',
+    '        </svg>',
+    '      }',
+    '    >',
+    '      <span {...rest} class={[styles.wrap, local.class].filter(Boolean).join(\' \')}>',
+    '        <svg><use href={href()} /></svg>',
+    '      </span>',
+    '    </Show>',
+    '  )',
+    '}',
+    '',
+  ].join('\n')
+}
+
+function componentTypes(config: ResolvedSpriteConfig): string {
+  const component = `${pascal(config.name)}Icon`
+  return [
+    header(config.generatedNotice),
+    "import type { Component, JSX } from 'solid-js'",
+    `import type { ${component}Name } from '../icon-data.js'`,
+    '',
+    `export type ${component}Style = JSX.CSSProperties & Partial<Record<\`--icon-color-\${number}\`, string | number>>`,
+    `type ${component}BaseProps = { icon: ${component}Name }`,
+    `type ${component}SvgProps = ${component}BaseProps & { wrapped?: false } & Omit<JSX.SvgSVGAttributes<SVGSVGElement>, 'style'> & { style?: ${component}Style }`,
+    `type ${component}WrappedProps = ${component}BaseProps & { wrapped: true } & Omit<JSX.HTMLAttributes<HTMLSpanElement>, 'style'> & { style?: ${component}Style }`,
+    `export type ${component}Props = ${component}SvgProps | ${component}WrappedProps`,
+    `export declare const ${component}: Component<${component}Props>`,
+    '',
+  ].join('\n')
+}
+
+function index(config: ResolvedSpriteConfig): string {
+  return [
+    header(config.generatedNotice),
+    `export { ${pascal(config.name)}Icon } from './solid/solid-component.jsx'`,
+    `export { ${camel(config.name)}IconNames } from './icon-data.js'`,
+    '',
+  ].join('\n')
+}
+
+function indexTypes(config: ResolvedSpriteConfig): string {
+  const component = `${pascal(config.name)}Icon`
+  return [
+    header(config.generatedNotice),
+    `export { ${component} } from './solid/solid-component.jsx'`,
+    `export type { ${component}Props, ${component}Style } from './solid/solid-component.jsx'`,
+    `export { ${camel(config.name)}IconNames } from './icon-data.js'`,
+    `export type { ${component}Name } from './icon-data.js'`,
+    '',
+  ].join('\n')
+}
+
+function styles(config: ResolvedSpriteConfig): string {
+  const transition = config.transform.addTransition
+    ? ['  transition-property: fill, stroke, color;', '  transition-duration: 0.3s;', '  transition-timing-function: ease;']
+    : []
+  return [header(config.generatedNotice), '', '.root {', ...transition, '}', '', '.wrap {', '  display: inline-flex;', '}', '', '.wrap svg {', '  width: 100%;', '  height: 100%;', ...transition, '}', ''].join('\n')
+}
+
+function manifest(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const data = {
+    schemaVersion: 1,
+    generator: '@gromlab/svg-sprites',
+    name: config.name,
+    ...(config.description === undefined ? {} : { description: config.description }),
+    usage: { framework: 'solid', componentName: `${pascal(config.name)}Icon` },
+    mode: 'solid@webpack',
+    target: 'webpack',
+    format: artifact.format,
+    iconCount: artifact.icons.length,
+    spriteUrl: '__SPRITE_URL__',
+    icons: artifact.icons,
+  }
+  const source = JSON.stringify(data, null, 2).replace('"__SPRITE_URL__"', 'spriteUrl')
+  return [header(config.generatedNotice), "const spriteUrl = new URL('./sprite.svg', import.meta.url).href", '', `export const spriteManifest = ${source}`, '', 'export default spriteManifest', ''].join('\n')
+}
+
+function manifestTypes(config: ResolvedSpriteConfig): string {
+  return [
+    header(config.generatedNotice),
+    'export type SpriteManifestColor = { variable: `--icon-color-${number}`; fallback: string }',
+    'export type SpriteManifestIcon = { name: string; id: string; viewBox: string | null; colors: readonly SpriteManifestColor[] }',
+    'export type SpriteManifest = {',
+    "  schemaVersion: 1; generator: '@gromlab/svg-sprites'; name: string; description?: string",
+    "  usage: { framework: 'solid'; componentName: string }",
+    "  mode: 'solid@webpack'; target: 'webpack'; format: 'stack' | 'symbol'",
+    '  iconCount: number; spriteUrl: string; icons: readonly SpriteManifestIcon[]',
+    '}',
+    'export declare const spriteManifest: SpriteManifest',
+    'export default spriteManifest',
+    '',
+  ].join('\n')
+}
+
+export function generateOutputFiles(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): GeneratedFile[] {
+  return [
+    { path: path.posix.join(OUTPUT_DIR, 'index.js'), content: index(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'index.d.ts'), content: indexTypes(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'sprite.svg'), content: svg(artifact.bytes, config.generatedNotice) },
+    { path: path.posix.join(OUTPUT_DIR, 'icon-data.js'), content: iconData(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'icon-data.d.ts'), content: iconTypes(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'solid', 'solid-component.jsx'), content: component(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'solid', 'solid-component.d.ts'), content: componentTypes(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'solid', 'solid-component.module.css'), content: styles(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.js'), content: manifest(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.d.ts'), content: manifestTypes(config) },
+  ]
+}

src/modes/svelte-vite/adapter.ts

@@ -0,0 +1,27 @@
+import { compileSpriteContent } from '../../compiler.js'
+import { createCompiledSpriteArtifact } from '../../core/compiled-artifact.js'
+import type { ModeAdapter } from '../../core/mode-adapter.js'
+import { generateOutputFiles } from './output.js'
+
+export const svelteViteAdapter: ModeAdapter<'svelte@vite'> = {
+  mode: 'svelte@vite',
+  async generate(context) {
+    const bytes = await compileSpriteContent(
+      context.prepared.folder,
+      context.config.transform,
+      { rootViewBox: false },
+    )
+    const artifact = createCompiledSpriteArtifact(bytes, context.prepared.iconNames, 'stack')
+
+    return {
+      files: generateOutputFiles(context.config, artifact),
+      paths: {
+        generatedDir: '.svg-sprite',
+        sprite: '.svg-sprite/sprite.svg',
+        manifest: '.svg-sprite/svg-sprite.manifest.js',
+        entry: '.svg-sprite/index.js',
+      },
+      result: { target: 'vite' },
+    }
+  },
+}

src/modes/svelte-vite/output.ts

@@ -0,0 +1,229 @@
+import path from 'node:path'
+import type { CompiledSpriteArtifact } from '../../core/compiled-artifact.js'
+import { GENERATED_MARKER } from '../../core/generated-markers.js'
+import type { GeneratedFile } from '../../core/mode-adapter.js'
+import type { ResolvedSpriteConfig } from '../../types.js'
+
+const MODE = 'svelte@vite'
+const TARGET = 'vite'
+const OUTPUT_DIR = '.svg-sprite'
+const NOTICE = 'АВТОМАТИЧЕСКИ СГЕНЕРИРОВАННЫЙ ФАЙЛ. Не редактируйте вручную.'
+
+function pascal(value: string): string {
+  return value.split('-').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join('')
+}
+
+function camel(value: string): string {
+  return value.replace(/-([a-z0-9])/g, (_, char: string) => char.toUpperCase())
+}
+
+function jsHeader(enabled: boolean): string {
+  return enabled
+    ? `/*\n * ${NOTICE}\n * ${GENERATED_MARKER}.\n */`
+    : `/* ${GENERATED_MARKER}. Do not edit. */`
+}
+
+function markupHeader(enabled: boolean): string {
+  return enabled
+    ? `<!-- ${NOTICE}\n  ${GENERATED_MARKER}. -->`
+    : `<!-- ${GENERATED_MARKER}. Do not edit. -->`
+}
+
+function svg(bytes: Uint8Array, enabled: boolean): string {
+  const marker = enabled ? `${NOTICE}\n  ${GENERATED_MARKER}.` : `${GENERATED_MARKER}. Do not edit.`
+  const content = new TextDecoder().decode(bytes)
+  return content.startsWith('<?xml')
+    ? content.replace(/^(<\?xml[^?]*\?>)\s*/, `$1\n<!-- ${marker} -->\n`)
+    : `<!-- ${marker} -->\n${content}`
+}
+
+function description(config: ResolvedSpriteConfig): string[] {
+  const text = config.description ?? `Имена иконок SVG-спрайта «${config.name}».`
+  return ['/**', ...text.split(/\r?\n/).map((line) => ` * ${line.replace(/\*\//g, '* /')}`), ' */']
+}
+
+function iconData(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const prefix = camel(config.name)
+  return [
+    jsHeader(config.generatedNotice),
+    '',
+    ...description(config),
+    `export const ${prefix}IconNames = ${JSON.stringify(artifact.icons.map((icon) => icon.name), null, 2)}`,
+    '',
+    `export const ${prefix}IconIds = ${JSON.stringify(Object.fromEntries(artifact.icons.map((icon) => [icon.name, icon.id])), null, 2)}`,
+    '',
+  ].join('\n')
+}
+
+function component(config: ResolvedSpriteConfig): string {
+  const ids = `${camel(config.name)}IconIds`
+  const transition = config.transform.addTransition
+    ? ['    transition-property: fill, stroke, color;', '    transition-duration: 0.3s;', '    transition-timing-function: ease;']
+    : []
+  return [
+    markupHeader(config.generatedNotice),
+    '<script>',
+    `  import { ${ids} } from '../icon-data.js'`,
+    "  import spriteUrl from '../sprite.svg?no-inline'",
+    '',
+    '  let { icon, wrapped = false, class: className, ...attributes } = $props()',
+    `  const href = $derived(spriteUrl + '#' + ${ids}[icon])`,
+    '</script>',
+    '',
+    '{#if wrapped}',
+    '  <span {...attributes} class={["wrap", className]}><svg aria-hidden="true"><use {href}></use></svg></span>',
+    '{:else}',
+    '  <svg {...attributes} class={["root", className]}><use {href}></use></svg>',
+    '{/if}',
+    '',
+    '<style>',
+    '  .root {',
+    ...transition,
+    '  }',
+    '',
+    '  .wrap {',
+    '    display: inline-flex;',
+    '  }',
+    '',
+    '  .wrap svg {',
+    '    width: 100%;',
+    '    height: 100%;',
+    ...transition,
+    '  }',
+    '</style>',
+    '',
+  ].join('\n')
+}
+
+function iconDeclarations(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const componentName = `${pascal(config.name)}Icon`
+  const names = `${camel(config.name)}IconNames`
+  const ids = `${camel(config.name)}IconIds`
+  return [
+    jsHeader(config.generatedNotice),
+    '',
+    ...description(config),
+    `export declare const ${names}: readonly [`,
+    ...artifact.icons.map((icon) => `  ${JSON.stringify(icon.name)},`),
+    ']',
+    `export type ${componentName}Name = typeof ${names}[number]`,
+    `export declare const ${ids}: {`,
+    ...artifact.icons.map((icon) => `  readonly ${JSON.stringify(icon.name)}: ${JSON.stringify(icon.id)}`),
+    '}',
+    '',
+  ].join('\n')
+}
+
+function componentDeclarations(config: ResolvedSpriteConfig): string {
+  const componentName = `${pascal(config.name)}Icon`
+  return [
+    jsHeader(config.generatedNotice),
+    "import type { Component } from 'svelte'",
+    "import type { ClassValue, HTMLAttributes, SVGAttributes } from 'svelte/elements'",
+    `import type { ${componentName}Name } from '../icon-data.js'`,
+    '',
+    `export type ${componentName}Style = string`,
+    `type ${componentName}BaseProps = { icon: ${componentName}Name; class?: ClassValue; style?: ${componentName}Style }`,
+    `type ${componentName}SvgProps = ${componentName}BaseProps & { wrapped?: false } & Omit<SVGAttributes<SVGSVGElement>, 'class' | 'style'>`,
+    `type ${componentName}WrappedProps = ${componentName}BaseProps & { wrapped: true } & Omit<HTMLAttributes<HTMLSpanElement>, 'class' | 'style'>`,
+    `export type ${componentName}Props = ${componentName}SvgProps | ${componentName}WrappedProps`,
+    `declare const ${componentName}: Component<${componentName}Props>`,
+    `export default ${componentName}`,
+    '',
+  ].join('\n')
+}
+
+function index(config: ResolvedSpriteConfig): string {
+  return [
+    jsHeader(config.generatedNotice),
+    `export { default as ${pascal(config.name)}Icon } from './svelte/svelte-component.svelte'`,
+    `export { ${camel(config.name)}IconNames } from './icon-data.js'`,
+    '',
+  ].join('\n')
+}
+
+function indexDeclarations(config: ResolvedSpriteConfig): string {
+  const componentName = `${pascal(config.name)}Icon`
+  return [
+    jsHeader(config.generatedNotice),
+    `export { default as ${componentName} } from './svelte/svelte-component.svelte'`,
+    `export type { ${componentName}Props, ${componentName}Style } from './svelte/svelte-component.svelte'`,
+    `export { ${camel(config.name)}IconNames } from './icon-data.js'`,
+    `export type { ${componentName}Name } from './icon-data.js'`,
+    '',
+  ].join('\n')
+}
+
+function manifest(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const data = {
+    schemaVersion: 1,
+    generator: '@gromlab/svg-sprites',
+    name: config.name,
+    ...(config.description === undefined ? {} : { description: config.description }),
+    usage: { framework: 'svelte', componentName: `${pascal(config.name)}Icon` },
+    mode: MODE,
+    target: TARGET,
+    format: artifact.format,
+    iconCount: artifact.icons.length,
+    spriteUrl: '__SPRITE_URL__',
+    icons: artifact.icons,
+  }
+  const source = JSON.stringify(data, null, 2).replace('"__SPRITE_URL__"', 'spriteUrl')
+  return [
+    jsHeader(config.generatedNotice),
+    "import spriteUrl from './sprite.svg?no-inline'",
+    '',
+    `export const spriteManifest = ${source}`,
+    '',
+    'export default spriteManifest',
+    '',
+  ].join('\n')
+}
+
+function manifestDeclarations(config: ResolvedSpriteConfig): string {
+  return [
+    jsHeader(config.generatedNotice),
+    '',
+    'export type SpriteManifestColor = {',
+    '  variable: `--icon-color-${number}`',
+    '  fallback: string',
+    '}',
+    'export type SpriteManifestIcon = {',
+    '  name: string',
+    '  id: string',
+    '  viewBox: string | null',
+    '  colors: readonly SpriteManifestColor[]',
+    '}',
+    'export type SpriteManifest = {',
+    '  schemaVersion: 1',
+    "  generator: '@gromlab/svg-sprites'",
+    '  name: string',
+    '  description?: string',
+    "  usage: { framework: 'svelte'; componentName: string }",
+    "  mode: 'svelte@vite'",
+    "  target: 'vite'",
+    "  format: 'stack' | 'symbol'",
+    '  iconCount: number',
+    '  spriteUrl: string',
+    '  icons: readonly SpriteManifestIcon[]',
+    '}',
+    '',
+    'export declare const spriteManifest: SpriteManifest',
+    'export default spriteManifest',
+    '',
+  ].join('\n')
+}
+
+export function generateOutputFiles(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): GeneratedFile[] {
+  return [
+    { path: path.posix.join(OUTPUT_DIR, 'index.js'), content: index(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'index.d.ts'), content: indexDeclarations(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'sprite.svg'), content: svg(artifact.bytes, config.generatedNotice) },
+    { path: path.posix.join(OUTPUT_DIR, 'icon-data.js'), content: iconData(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'icon-data.d.ts'), content: iconDeclarations(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'svelte', 'svelte-component.svelte'), content: component(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'svelte', 'svelte-component.svelte.d.ts'), content: componentDeclarations(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.js'), content: manifest(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.d.ts'), content: manifestDeclarations(config) },
+  ]
+}

src/modes/svelte-webpack/adapter.ts

@@ -0,0 +1,27 @@
+import { compileSpriteContent } from '../../compiler.js'
+import { createCompiledSpriteArtifact } from '../../core/compiled-artifact.js'
+import type { ModeAdapter } from '../../core/mode-adapter.js'
+import { generateOutputFiles } from './output.js'
+
+export const svelteWebpackAdapter: ModeAdapter<'svelte@webpack'> = {
+  mode: 'svelte@webpack',
+  async generate(context) {
+    const bytes = await compileSpriteContent(
+      context.prepared.folder,
+      context.config.transform,
+      { rootViewBox: false },
+    )
+    const artifact = createCompiledSpriteArtifact(bytes, context.prepared.iconNames, 'stack')
+
+    return {
+      files: generateOutputFiles(context.config, artifact),
+      paths: {
+        generatedDir: '.svg-sprite',
+        sprite: '.svg-sprite/sprite.svg',
+        manifest: '.svg-sprite/svg-sprite.manifest.js',
+        entry: '.svg-sprite/index.js',
+      },
+      result: { target: 'webpack' },
+    }
+  },
+}

src/modes/svelte-webpack/output.ts

@@ -0,0 +1,229 @@
+import path from 'node:path'
+import type { CompiledSpriteArtifact } from '../../core/compiled-artifact.js'
+import { GENERATED_MARKER } from '../../core/generated-markers.js'
+import type { GeneratedFile } from '../../core/mode-adapter.js'
+import type { ResolvedSpriteConfig } from '../../types.js'
+
+const MODE = 'svelte@webpack'
+const TARGET = 'webpack'
+const OUTPUT_DIR = '.svg-sprite'
+const NOTICE = 'АВТОМАТИЧЕСКИ СГЕНЕРИРОВАННЫЙ ФАЙЛ. Не редактируйте вручную.'
+
+function pascal(value: string): string {
+  return value.split('-').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join('')
+}
+
+function camel(value: string): string {
+  return value.replace(/-([a-z0-9])/g, (_, char: string) => char.toUpperCase())
+}
+
+function jsHeader(enabled: boolean): string {
+  return enabled
+    ? `/*\n * ${NOTICE}\n * ${GENERATED_MARKER}.\n */`
+    : `/* ${GENERATED_MARKER}. Do not edit. */`
+}
+
+function markupHeader(enabled: boolean): string {
+  return enabled
+    ? `<!-- ${NOTICE}\n  ${GENERATED_MARKER}. -->`
+    : `<!-- ${GENERATED_MARKER}. Do not edit. -->`
+}
+
+function svg(bytes: Uint8Array, enabled: boolean): string {
+  const marker = enabled ? `${NOTICE}\n  ${GENERATED_MARKER}.` : `${GENERATED_MARKER}. Do not edit.`
+  const content = new TextDecoder().decode(bytes)
+  return content.startsWith('<?xml')
+    ? content.replace(/^(<\?xml[^?]*\?>)\s*/, `$1\n<!-- ${marker} -->\n`)
+    : `<!-- ${marker} -->\n${content}`
+}
+
+function description(config: ResolvedSpriteConfig): string[] {
+  const text = config.description ?? `Имена иконок SVG-спрайта «${config.name}».`
+  return ['/**', ...text.split(/\r?\n/).map((line) => ` * ${line.replace(/\*\//g, '* /')}`), ' */']
+}
+
+function iconData(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const prefix = camel(config.name)
+  return [
+    jsHeader(config.generatedNotice),
+    '',
+    ...description(config),
+    `export const ${prefix}IconNames = ${JSON.stringify(artifact.icons.map((icon) => icon.name), null, 2)}`,
+    '',
+    `export const ${prefix}IconIds = ${JSON.stringify(Object.fromEntries(artifact.icons.map((icon) => [icon.name, icon.id])), null, 2)}`,
+    '',
+  ].join('\n')
+}
+
+function component(config: ResolvedSpriteConfig): string {
+  const ids = `${camel(config.name)}IconIds`
+  const transition = config.transform.addTransition
+    ? ['    transition-property: fill, stroke, color;', '    transition-duration: 0.3s;', '    transition-timing-function: ease;']
+    : []
+  return [
+    markupHeader(config.generatedNotice),
+    '<script>',
+    `  import { ${ids} } from '../icon-data.js'`,
+    '',
+    "  const spriteUrl = new URL('../sprite.svg', import.meta.url).href",
+    '  let { icon, wrapped = false, class: className, ...attributes } = $props()',
+    `  const href = $derived(spriteUrl + '#' + ${ids}[icon])`,
+    '</script>',
+    '',
+    '{#if wrapped}',
+    '  <span {...attributes} class={["wrap", className]}><svg aria-hidden="true"><use {href}></use></svg></span>',
+    '{:else}',
+    '  <svg {...attributes} class={["root", className]}><use {href}></use></svg>',
+    '{/if}',
+    '',
+    '<style>',
+    '  .root {',
+    ...transition,
+    '  }',
+    '',
+    '  .wrap {',
+    '    display: inline-flex;',
+    '  }',
+    '',
+    '  .wrap svg {',
+    '    width: 100%;',
+    '    height: 100%;',
+    ...transition,
+    '  }',
+    '</style>',
+    '',
+  ].join('\n')
+}
+
+function iconDeclarations(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const componentName = `${pascal(config.name)}Icon`
+  const names = `${camel(config.name)}IconNames`
+  const ids = `${camel(config.name)}IconIds`
+  return [
+    jsHeader(config.generatedNotice),
+    '',
+    ...description(config),
+    `export declare const ${names}: readonly [`,
+    ...artifact.icons.map((icon) => `  ${JSON.stringify(icon.name)},`),
+    ']',
+    `export type ${componentName}Name = typeof ${names}[number]`,
+    `export declare const ${ids}: {`,
+    ...artifact.icons.map((icon) => `  readonly ${JSON.stringify(icon.name)}: ${JSON.stringify(icon.id)}`),
+    '}',
+    '',
+  ].join('\n')
+}
+
+function componentDeclarations(config: ResolvedSpriteConfig): string {
+  const componentName = `${pascal(config.name)}Icon`
+  return [
+    jsHeader(config.generatedNotice),
+    "import type { Component } from 'svelte'",
+    "import type { ClassValue, HTMLAttributes, SVGAttributes } from 'svelte/elements'",
+    `import type { ${componentName}Name } from '../icon-data.js'`,
+    '',
+    `export type ${componentName}Style = string`,
+    `type ${componentName}BaseProps = { icon: ${componentName}Name; class?: ClassValue; style?: ${componentName}Style }`,
+    `type ${componentName}SvgProps = ${componentName}BaseProps & { wrapped?: false } & Omit<SVGAttributes<SVGSVGElement>, 'class' | 'style'>`,
+    `type ${componentName}WrappedProps = ${componentName}BaseProps & { wrapped: true } & Omit<HTMLAttributes<HTMLSpanElement>, 'class' | 'style'>`,
+    `export type ${componentName}Props = ${componentName}SvgProps | ${componentName}WrappedProps`,
+    `declare const ${componentName}: Component<${componentName}Props>`,
+    `export default ${componentName}`,
+    '',
+  ].join('\n')
+}
+
+function index(config: ResolvedSpriteConfig): string {
+  return [
+    jsHeader(config.generatedNotice),
+    `export { default as ${pascal(config.name)}Icon } from './svelte/svelte-component.svelte'`,
+    `export { ${camel(config.name)}IconNames } from './icon-data.js'`,
+    '',
+  ].join('\n')
+}
+
+function indexDeclarations(config: ResolvedSpriteConfig): string {
+  const componentName = `${pascal(config.name)}Icon`
+  return [
+    jsHeader(config.generatedNotice),
+    `export { default as ${componentName} } from './svelte/svelte-component.svelte'`,
+    `export type { ${componentName}Props, ${componentName}Style } from './svelte/svelte-component.svelte'`,
+    `export { ${camel(config.name)}IconNames } from './icon-data.js'`,
+    `export type { ${componentName}Name } from './icon-data.js'`,
+    '',
+  ].join('\n')
+}
+
+function manifest(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const data = {
+    schemaVersion: 1,
+    generator: '@gromlab/svg-sprites',
+    name: config.name,
+    ...(config.description === undefined ? {} : { description: config.description }),
+    usage: { framework: 'svelte', componentName: `${pascal(config.name)}Icon` },
+    mode: MODE,
+    target: TARGET,
+    format: artifact.format,
+    iconCount: artifact.icons.length,
+    spriteUrl: '__SPRITE_URL__',
+    icons: artifact.icons,
+  }
+  const source = JSON.stringify(data, null, 2).replace('"__SPRITE_URL__"', 'spriteUrl')
+  return [
+    jsHeader(config.generatedNotice),
+    "const spriteUrl = new URL('./sprite.svg', import.meta.url).href",
+    '',
+    `export const spriteManifest = ${source}`,
+    '',
+    'export default spriteManifest',
+    '',
+  ].join('\n')
+}
+
+function manifestDeclarations(config: ResolvedSpriteConfig): string {
+  return [
+    jsHeader(config.generatedNotice),
+    '',
+    'export type SpriteManifestColor = {',
+    '  variable: `--icon-color-${number}`',
+    '  fallback: string',
+    '}',
+    'export type SpriteManifestIcon = {',
+    '  name: string',
+    '  id: string',
+    '  viewBox: string | null',
+    '  colors: readonly SpriteManifestColor[]',
+    '}',
+    'export type SpriteManifest = {',
+    '  schemaVersion: 1',
+    "  generator: '@gromlab/svg-sprites'",
+    '  name: string',
+    '  description?: string',
+    "  usage: { framework: 'svelte'; componentName: string }",
+    "  mode: 'svelte@webpack'",
+    "  target: 'webpack'",
+    "  format: 'stack' | 'symbol'",
+    '  iconCount: number',
+    '  spriteUrl: string',
+    '  icons: readonly SpriteManifestIcon[]',
+    '}',
+    '',
+    'export declare const spriteManifest: SpriteManifest',
+    'export default spriteManifest',
+    '',
+  ].join('\n')
+}
+
+export function generateOutputFiles(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): GeneratedFile[] {
+  return [
+    { path: path.posix.join(OUTPUT_DIR, 'index.js'), content: index(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'index.d.ts'), content: indexDeclarations(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'sprite.svg'), content: svg(artifact.bytes, config.generatedNotice) },
+    { path: path.posix.join(OUTPUT_DIR, 'icon-data.js'), content: iconData(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'icon-data.d.ts'), content: iconDeclarations(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'svelte', 'svelte-component.svelte'), content: component(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'svelte', 'svelte-component.svelte.d.ts'), content: componentDeclarations(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.js'), content: manifest(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.d.ts'), content: manifestDeclarations(config) },
+  ]
+}

src/modes/sveltekit-vite/adapter.ts

@@ -0,0 +1,27 @@
+import { compileSpriteContent } from '../../compiler.js'
+import { createCompiledSpriteArtifact } from '../../core/compiled-artifact.js'
+import type { ModeAdapter } from '../../core/mode-adapter.js'
+import { generateOutputFiles } from './output.js'
+
+export const sveltekitViteAdapter: ModeAdapter<'sveltekit@vite'> = {
+  mode: 'sveltekit@vite',
+  async generate(context) {
+    const bytes = await compileSpriteContent(
+      context.prepared.folder,
+      context.config.transform,
+      { rootViewBox: false },
+    )
+    const artifact = createCompiledSpriteArtifact(bytes, context.prepared.iconNames, 'stack')
+
+    return {
+      files: generateOutputFiles(context.config, artifact),
+      paths: {
+        generatedDir: '.svg-sprite',
+        sprite: '.svg-sprite/sprite.svg',
+        manifest: '.svg-sprite/svg-sprite.manifest.js',
+        entry: '.svg-sprite/index.js',
+      },
+      result: { target: 'vite' },
+    }
+  },
+}

src/modes/sveltekit-vite/output.ts

@@ -0,0 +1,229 @@
+import path from 'node:path'
+import type { CompiledSpriteArtifact } from '../../core/compiled-artifact.js'
+import { GENERATED_MARKER } from '../../core/generated-markers.js'
+import type { GeneratedFile } from '../../core/mode-adapter.js'
+import type { ResolvedSpriteConfig } from '../../types.js'
+
+const MODE = 'sveltekit@vite'
+const TARGET = 'vite'
+const OUTPUT_DIR = '.svg-sprite'
+const NOTICE = 'АВТОМАТИЧЕСКИ СГЕНЕРИРОВАННЫЙ ФАЙЛ. Не редактируйте вручную.'
+
+function pascal(value: string): string {
+  return value.split('-').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join('')
+}
+
+function camel(value: string): string {
+  return value.replace(/-([a-z0-9])/g, (_, char: string) => char.toUpperCase())
+}
+
+function jsHeader(enabled: boolean): string {
+  return enabled
+    ? `/*\n * ${NOTICE}\n * ${GENERATED_MARKER}.\n */`
+    : `/* ${GENERATED_MARKER}. Do not edit. */`
+}
+
+function markupHeader(enabled: boolean): string {
+  return enabled
+    ? `<!-- ${NOTICE}\n  ${GENERATED_MARKER}. -->`
+    : `<!-- ${GENERATED_MARKER}. Do not edit. -->`
+}
+
+function svg(bytes: Uint8Array, enabled: boolean): string {
+  const marker = enabled ? `${NOTICE}\n  ${GENERATED_MARKER}.` : `${GENERATED_MARKER}. Do not edit.`
+  const content = new TextDecoder().decode(bytes)
+  return content.startsWith('<?xml')
+    ? content.replace(/^(<\?xml[^?]*\?>)\s*/, `$1\n<!-- ${marker} -->\n`)
+    : `<!-- ${marker} -->\n${content}`
+}
+
+function description(config: ResolvedSpriteConfig): string[] {
+  const text = config.description ?? `Имена иконок SVG-спрайта «${config.name}».`
+  return ['/**', ...text.split(/\r?\n/).map((line) => ` * ${line.replace(/\*\//g, '* /')}`), ' */']
+}
+
+function iconData(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const prefix = camel(config.name)
+  return [
+    jsHeader(config.generatedNotice),
+    '',
+    ...description(config),
+    `export const ${prefix}IconNames = ${JSON.stringify(artifact.icons.map((icon) => icon.name), null, 2)}`,
+    '',
+    `export const ${prefix}IconIds = ${JSON.stringify(Object.fromEntries(artifact.icons.map((icon) => [icon.name, icon.id])), null, 2)}`,
+    '',
+  ].join('\n')
+}
+
+function component(config: ResolvedSpriteConfig): string {
+  const ids = `${camel(config.name)}IconIds`
+  const transition = config.transform.addTransition
+    ? ['    transition-property: fill, stroke, color;', '    transition-duration: 0.3s;', '    transition-timing-function: ease;']
+    : []
+  return [
+    markupHeader(config.generatedNotice),
+    '<script>',
+    `  import { ${ids} } from '../icon-data.js'`,
+    "  import spriteUrl from '../sprite.svg?no-inline'",
+    '',
+    '  let { icon, wrapped = false, class: className, ...attributes } = $props()',
+    `  const href = $derived(spriteUrl + '#' + ${ids}[icon])`,
+    '</script>',
+    '',
+    '{#if wrapped}',
+    '  <span {...attributes} class={["wrap", className]}><svg aria-hidden="true"><use {href}></use></svg></span>',
+    '{:else}',
+    '  <svg {...attributes} class={["root", className]}><use {href}></use></svg>',
+    '{/if}',
+    '',
+    '<style>',
+    '  .root {',
+    ...transition,
+    '  }',
+    '',
+    '  .wrap {',
+    '    display: inline-flex;',
+    '  }',
+    '',
+    '  .wrap svg {',
+    '    width: 100%;',
+    '    height: 100%;',
+    ...transition,
+    '  }',
+    '</style>',
+    '',
+  ].join('\n')
+}
+
+function iconDeclarations(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const componentName = `${pascal(config.name)}Icon`
+  const names = `${camel(config.name)}IconNames`
+  const ids = `${camel(config.name)}IconIds`
+  return [
+    jsHeader(config.generatedNotice),
+    '',
+    ...description(config),
+    `export declare const ${names}: readonly [`,
+    ...artifact.icons.map((icon) => `  ${JSON.stringify(icon.name)},`),
+    ']',
+    `export type ${componentName}Name = typeof ${names}[number]`,
+    `export declare const ${ids}: {`,
+    ...artifact.icons.map((icon) => `  readonly ${JSON.stringify(icon.name)}: ${JSON.stringify(icon.id)}`),
+    '}',
+    '',
+  ].join('\n')
+}
+
+function componentDeclarations(config: ResolvedSpriteConfig): string {
+  const componentName = `${pascal(config.name)}Icon`
+  return [
+    jsHeader(config.generatedNotice),
+    "import type { Component } from 'svelte'",
+    "import type { ClassValue, HTMLAttributes, SVGAttributes } from 'svelte/elements'",
+    `import type { ${componentName}Name } from '../icon-data.js'`,
+    '',
+    `export type ${componentName}Style = string`,
+    `type ${componentName}BaseProps = { icon: ${componentName}Name; class?: ClassValue; style?: ${componentName}Style }`,
+    `type ${componentName}SvgProps = ${componentName}BaseProps & { wrapped?: false } & Omit<SVGAttributes<SVGSVGElement>, 'class' | 'style'>`,
+    `type ${componentName}WrappedProps = ${componentName}BaseProps & { wrapped: true } & Omit<HTMLAttributes<HTMLSpanElement>, 'class' | 'style'>`,
+    `export type ${componentName}Props = ${componentName}SvgProps | ${componentName}WrappedProps`,
+    `declare const ${componentName}: Component<${componentName}Props>`,
+    `export default ${componentName}`,
+    '',
+  ].join('\n')
+}
+
+function index(config: ResolvedSpriteConfig): string {
+  return [
+    jsHeader(config.generatedNotice),
+    `export { default as ${pascal(config.name)}Icon } from './svelte/svelte-component.svelte'`,
+    `export { ${camel(config.name)}IconNames } from './icon-data.js'`,
+    '',
+  ].join('\n')
+}
+
+function indexDeclarations(config: ResolvedSpriteConfig): string {
+  const componentName = `${pascal(config.name)}Icon`
+  return [
+    jsHeader(config.generatedNotice),
+    `export { default as ${componentName} } from './svelte/svelte-component.svelte'`,
+    `export type { ${componentName}Props, ${componentName}Style } from './svelte/svelte-component.svelte'`,
+    `export { ${camel(config.name)}IconNames } from './icon-data.js'`,
+    `export type { ${componentName}Name } from './icon-data.js'`,
+    '',
+  ].join('\n')
+}
+
+function manifest(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const data = {
+    schemaVersion: 1,
+    generator: '@gromlab/svg-sprites',
+    name: config.name,
+    ...(config.description === undefined ? {} : { description: config.description }),
+    usage: { framework: 'svelte', componentName: `${pascal(config.name)}Icon` },
+    mode: MODE,
+    target: TARGET,
+    format: artifact.format,
+    iconCount: artifact.icons.length,
+    spriteUrl: '__SPRITE_URL__',
+    icons: artifact.icons,
+  }
+  const source = JSON.stringify(data, null, 2).replace('"__SPRITE_URL__"', 'spriteUrl')
+  return [
+    jsHeader(config.generatedNotice),
+    "import spriteUrl from './sprite.svg?no-inline'",
+    '',
+    `export const spriteManifest = ${source}`,
+    '',
+    'export default spriteManifest',
+    '',
+  ].join('\n')
+}
+
+function manifestDeclarations(config: ResolvedSpriteConfig): string {
+  return [
+    jsHeader(config.generatedNotice),
+    '',
+    'export type SpriteManifestColor = {',
+    '  variable: `--icon-color-${number}`',
+    '  fallback: string',
+    '}',
+    'export type SpriteManifestIcon = {',
+    '  name: string',
+    '  id: string',
+    '  viewBox: string | null',
+    '  colors: readonly SpriteManifestColor[]',
+    '}',
+    'export type SpriteManifest = {',
+    '  schemaVersion: 1',
+    "  generator: '@gromlab/svg-sprites'",
+    '  name: string',
+    '  description?: string',
+    "  usage: { framework: 'svelte'; componentName: string }",
+    "  mode: 'sveltekit@vite'",
+    "  target: 'vite'",
+    "  format: 'stack' | 'symbol'",
+    '  iconCount: number',
+    '  spriteUrl: string',
+    '  icons: readonly SpriteManifestIcon[]',
+    '}',
+    '',
+    'export declare const spriteManifest: SpriteManifest',
+    'export default spriteManifest',
+    '',
+  ].join('\n')
+}
+
+export function generateOutputFiles(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): GeneratedFile[] {
+  return [
+    { path: path.posix.join(OUTPUT_DIR, 'index.js'), content: index(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'index.d.ts'), content: indexDeclarations(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'sprite.svg'), content: svg(artifact.bytes, config.generatedNotice) },
+    { path: path.posix.join(OUTPUT_DIR, 'icon-data.js'), content: iconData(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'icon-data.d.ts'), content: iconDeclarations(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'svelte', 'svelte-component.svelte'), content: component(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'svelte', 'svelte-component.svelte.d.ts'), content: componentDeclarations(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.js'), content: manifest(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.d.ts'), content: manifestDeclarations(config) },
+  ]
+}

src/modes/vue-vite/adapter.ts

@@ -0,0 +1,27 @@
+import { compileSpriteContent } from '../../compiler.js'
+import { createCompiledSpriteArtifact } from '../../core/compiled-artifact.js'
+import type { ModeAdapter } from '../../core/mode-adapter.js'
+import { generateOutputFiles } from './output.js'
+
+export const vueViteAdapter: ModeAdapter<'vue@vite'> = {
+  mode: 'vue@vite',
+  async generate(context) {
+    const bytes = await compileSpriteContent(
+      context.prepared.folder,
+      context.config.transform,
+      { rootViewBox: false },
+    )
+    const artifact = createCompiledSpriteArtifact(bytes, context.prepared.iconNames, 'stack')
+
+    return {
+      files: generateOutputFiles(context.config, artifact),
+      paths: {
+        generatedDir: '.svg-sprite',
+        sprite: '.svg-sprite/sprite.svg',
+        manifest: '.svg-sprite/svg-sprite.manifest.js',
+        entry: '.svg-sprite/index.js',
+      },
+      result: { target: 'vite' },
+    }
+  },
+}

src/modes/vue-vite/output.ts

@@ -0,0 +1,301 @@
+import path from 'node:path'
+import type { CompiledSpriteArtifact } from '../../core/compiled-artifact.js'
+import { GENERATED_MARKER } from '../../core/generated-markers.js'
+import type { GeneratedFile } from '../../core/mode-adapter.js'
+import type { ResolvedSpriteConfig } from '../../types.js'
+
+const MODE = 'vue@vite'
+const TARGET = 'vite'
+const OUTPUT_DIR = '.svg-sprite'
+const GENERATED_NOTICE = [
+  '----------------------------------------------------------------------',
+  '## АВТОМАТИЧЕСКИ СГЕНЕРИРОВАННЫЙ ФАЙЛ                               ##',
+  '##                                                                  ##',
+  '## Не редактируйте вручную: изменения будут перезаписаны.           ##',
+  '## Для изменений перегенерируйте SVG-спрайт.                        ##',
+  '##                                                                  ##',
+  '## Генератор: @gromlab/svg-sprites                                  ##',
+  '## Репозиторий: https://github.com/gromlab-ru/svg-sprites            ##',
+  '----------------------------------------------------------------------',
+]
+
+function toPascalCase(value: string): string {
+  return value.split('-').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join('')
+}
+
+function toCamelCase(value: string): string {
+  return value.replace(/-([a-z0-9])/g, (_, char: string) => char.toUpperCase())
+}
+
+function blockHeader(enabled: boolean): string {
+  if (!enabled) return `/* ${GENERATED_MARKER}. Do not edit. */`
+  return ['/*', ...GENERATED_NOTICE.map((line) => ` * ${line}`), ' */'].join('\n')
+}
+
+function svgHeader(enabled: boolean): string {
+  if (!enabled) return `<!-- ${GENERATED_MARKER}. Do not edit. -->`
+  return ['<!--', ...GENERATED_NOTICE.slice(1, -1).map((line) => `  ${line}`), '-->'].join('\n')
+}
+
+function formatSvg(content: string): string {
+  let depth = 0
+  const lines = content.replace(/></g, '>\n<').split('\n')
+  const formatted = lines.map((line) => {
+    const trimmed = line.trim()
+    const tags = trimmed.match(/<[^>]+>/g) ?? []
+    const startsWithClosingTag = trimmed.startsWith('</')
+    if (startsWithClosingTag) depth = Math.max(0, depth - 1)
+    const formattedLine = `${'  '.repeat(depth)}${trimmed}`
+
+    for (const tag of tags) {
+      if (tag.startsWith('</')) {
+        if (!startsWithClosingTag) depth = Math.max(0, depth - 1)
+      } else if (!tag.startsWith('<?') && !tag.startsWith('<!') && !tag.endsWith('/>')) {
+        depth += 1
+      }
+    }
+    return formattedLine
+  })
+  return `${formatted.join('\n')}\n`
+}
+
+function markedSvg(bytes: Uint8Array, notice: boolean): string {
+  const svg = formatSvg(new TextDecoder().decode(bytes))
+  const header = svgHeader(notice)
+  return svg.startsWith('<?xml')
+    ? svg.replace(/^(<\?xml[^?]*\?>)\s*/, `$1\n${header}\n`)
+    : `${header}\n${svg}`
+}
+
+function descriptionComment(name: string, description?: string): string[] {
+  const text = description ?? `Имена иконок SVG-спрайта «${name}».`
+  return ['/**', ...text.split(/\r?\n/).map((line) => ` * ${line.replace(/\*\//g, '* /')}`), ' */']
+}
+
+function generateIconData(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const camelName = toCamelCase(config.name)
+  const names = artifact.icons.map((icon) => icon.name)
+  const ids = Object.fromEntries(artifact.icons.map((icon) => [icon.name, icon.id]))
+  return [
+    blockHeader(config.generatedNotice),
+    '',
+    ...descriptionComment(config.name, config.description),
+    `export const ${camelName}IconNames = ${JSON.stringify(names, null, 2)}`,
+    '',
+    `export const ${camelName}IconIds = ${JSON.stringify(ids, null, 2)}`,
+    '',
+  ].join('\n')
+}
+
+function generateComponent(config: ResolvedSpriteConfig): string {
+  const pascalName = toPascalCase(config.name)
+  const camelName = toCamelCase(config.name)
+  return [
+    blockHeader(config.generatedNotice),
+    "import { defineComponent, h } from 'vue'",
+    "import styles from './vue-component.module.css'",
+    `import { ${camelName}IconIds } from '../icon-data.js'`,
+    "import spriteUrl from '../sprite.svg?no-inline'",
+    '',
+    `/** Иконка из SVG-спрайта «${config.name}». */`,
+    `export const ${pascalName}Icon = defineComponent({`,
+    `  name: '${pascalName}Icon',`,
+    '  inheritAttrs: false,',
+    '  props: {',
+    "    icon: { type: String, required: true },",
+    "    wrapped: { type: Boolean, default: false },",
+    '  },',
+    '  setup(props, { attrs }) {',
+    '    return () => {',
+    `      const href = spriteUrl + '#' + ${camelName}IconIds[props.icon]`,
+    '',
+    '      if (props.wrapped) {',
+    "        return h('span', {",
+    '          ...attrs,',
+    '          class: [styles.wrap, attrs.class],',
+    "        }, [h('svg', null, [h('use', { href })])])",
+    '      }',
+    '',
+    "      return h('svg', {",
+    '        ...attrs,',
+    '        class: [styles.root, attrs.class],',
+    "      }, [h('use', { href })])",
+    '    }',
+    '  },',
+    '})',
+    '',
+  ].join('\n')
+}
+
+function generateIconDeclarations(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const pascalName = toPascalCase(config.name)
+  const camelName = toCamelCase(config.name)
+  const tuple = artifact.icons.map((icon) => `  ${JSON.stringify(icon.name)},`).join('\n')
+  const ids = artifact.icons.map((icon) => `  readonly ${JSON.stringify(icon.name)}: ${JSON.stringify(icon.id)}`).join('\n')
+  return [
+    blockHeader(config.generatedNotice),
+    '',
+    ...descriptionComment(config.name, config.description),
+    `export declare const ${camelName}IconNames: readonly [`,
+    tuple,
+    ']',
+    '',
+    `export type ${pascalName}IconName = typeof ${camelName}IconNames[number]`,
+    `export declare const ${camelName}IconIds: {`,
+    ids,
+    '}',
+    '',
+  ].join('\n')
+}
+
+function generateComponentDeclarations(config: ResolvedSpriteConfig): string {
+  const pascalName = toPascalCase(config.name)
+  return [
+    blockHeader(config.generatedNotice),
+    "import type { CSSProperties, DefineComponent, HTMLAttributes, SVGAttributes } from 'vue'",
+    `import type { ${pascalName}IconName } from '../icon-data.js'`,
+    '',
+    `export type ${pascalName}IconStyle = CSSProperties & Partial<Record<\`--icon-color-\${number}\`, string | number>>`,
+    '',
+    `type ${pascalName}IconBaseProps = { icon: ${pascalName}IconName }`,
+    `type ${pascalName}IconSvgProps = ${pascalName}IconBaseProps & { wrapped?: false } & Omit<SVGAttributes, 'style'> & { style?: ${pascalName}IconStyle }`,
+    `type ${pascalName}IconWrappedProps = ${pascalName}IconBaseProps & { wrapped: true } & Omit<HTMLAttributes, 'style'> & { style?: ${pascalName}IconStyle }`,
+    `export type ${pascalName}IconProps = ${pascalName}IconSvgProps | ${pascalName}IconWrappedProps`,
+    '',
+    `export declare const ${pascalName}Icon: DefineComponent<${pascalName}IconProps>`,
+    '',
+  ].join('\n')
+}
+
+function generateIndexDeclarations(config: ResolvedSpriteConfig): string {
+  const pascalName = toPascalCase(config.name)
+  const camelName = toCamelCase(config.name)
+  return [
+    blockHeader(config.generatedNotice),
+    `export { ${pascalName}Icon } from './vue/vue-component.js'`,
+    `export type { ${pascalName}IconProps, ${pascalName}IconStyle } from './vue/vue-component.js'`,
+    `export { ${camelName}IconNames } from './icon-data.js'`,
+    `export type { ${pascalName}IconName } from './icon-data.js'`,
+    '',
+  ].join('\n')
+}
+
+function generateIndex(config: ResolvedSpriteConfig): string {
+  const pascalName = toPascalCase(config.name)
+  const camelName = toCamelCase(config.name)
+  return [
+    blockHeader(config.generatedNotice),
+    `export { ${pascalName}Icon } from './vue/vue-component.js'`,
+    `export { ${camelName}IconNames } from './icon-data.js'`,
+    '',
+  ].join('\n')
+}
+
+function generateStyles(config: ResolvedSpriteConfig): string {
+  const transition = config.transform.addTransition
+    ? ['  transition-property: fill, stroke, color;', '  transition-duration: 0.3s;', '  transition-timing-function: ease;']
+    : []
+  return [
+    blockHeader(config.generatedNotice),
+    '',
+    '.root {',
+    ...transition,
+    '}',
+    '',
+    '.wrap {',
+    '  display: inline-flex;',
+    '}',
+    '',
+    '.wrap svg {',
+    '  width: 100%;',
+    '  height: 100%;',
+    ...transition,
+    '}',
+    '',
+  ].join('\n')
+}
+
+function manifestData(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact) {
+  return {
+    schemaVersion: 1,
+    generator: '@gromlab/svg-sprites',
+    name: config.name,
+    ...(config.description === undefined ? {} : { description: config.description }),
+    usage: {
+      framework: 'vue',
+      componentName: `${toPascalCase(config.name)}Icon`,
+    },
+    mode: MODE,
+    target: TARGET,
+    format: artifact.format,
+    iconCount: artifact.icons.length,
+    spriteUrl: '__SPRITE_URL__',
+    icons: artifact.icons,
+  }
+}
+
+function generateManifest(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const serialized = JSON.stringify(manifestData(config, artifact), null, 2)
+    .replace('"__SPRITE_URL__"', 'spriteUrl')
+  return [
+    blockHeader(config.generatedNotice),
+    "import spriteUrl from './sprite.svg?no-inline'",
+    '',
+    `export const spriteManifest = ${serialized}`,
+    '',
+    'export default spriteManifest',
+    '',
+  ].join('\n')
+}
+
+function generateManifestDeclarations(config: ResolvedSpriteConfig): string {
+  return [
+    blockHeader(config.generatedNotice),
+    '',
+    'export type SpriteManifestColor = {',
+    '  variable: `--icon-color-${number}`',
+    '  fallback: string',
+    '}',
+    'export type SpriteManifestIcon = {',
+    '  name: string',
+    '  id: string',
+    '  viewBox: string | null',
+    '  colors: readonly SpriteManifestColor[]',
+    '}',
+    'export type SpriteManifest = {',
+    '  schemaVersion: 1',
+    "  generator: '@gromlab/svg-sprites'",
+    '  name: string',
+    '  description?: string',
+    "  usage: { framework: 'vue'; componentName: string }",
+    "  mode: 'vue@vite'",
+    "  target: 'vite'",
+    "  format: 'stack' | 'symbol'",
+    '  iconCount: number',
+    '  spriteUrl: string',
+    '  icons: readonly SpriteManifestIcon[]',
+    '}',
+    '',
+    'export declare const spriteManifest: SpriteManifest',
+    'export default spriteManifest',
+    '',
+  ].join('\n')
+}
+
+export function generateOutputFiles(
+  config: ResolvedSpriteConfig,
+  artifact: CompiledSpriteArtifact,
+): GeneratedFile[] {
+  return [
+    { path: path.posix.join(OUTPUT_DIR, 'index.js'), content: generateIndex(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'index.d.ts'), content: generateIndexDeclarations(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'sprite.svg'), content: markedSvg(artifact.bytes, config.generatedNotice) },
+    { path: path.posix.join(OUTPUT_DIR, 'icon-data.js'), content: generateIconData(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'icon-data.d.ts'), content: generateIconDeclarations(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'vue', 'vue-component.js'), content: generateComponent(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'vue', 'vue-component.d.ts'), content: generateComponentDeclarations(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'vue', 'vue-component.module.css'), content: generateStyles(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.js'), content: generateManifest(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.d.ts'), content: generateManifestDeclarations(config) },
+  ]
+}

src/modes/vue-webpack/adapter.ts

@@ -0,0 +1,25 @@
+import { compileSpriteContent } from '../../compiler.js'
+import { createCompiledSpriteArtifact } from '../../core/compiled-artifact.js'
+import type { ModeAdapter } from '../../core/mode-adapter.js'
+import { generateOutputFiles } from './output.js'
+
+export const vueWebpackAdapter: ModeAdapter<'vue@webpack'> = {
+  mode: 'vue@webpack',
+  async generate(context) {
+    const bytes = await compileSpriteContent(context.prepared.folder, context.config.transform, {
+      rootViewBox: false,
+    })
+    const artifact = createCompiledSpriteArtifact(bytes, context.prepared.iconNames, 'stack')
+
+    return {
+      files: generateOutputFiles(context.config, artifact),
+      paths: {
+        generatedDir: '.svg-sprite',
+        sprite: '.svg-sprite/sprite.svg',
+        manifest: '.svg-sprite/svg-sprite.manifest.js',
+        entry: '.svg-sprite/index.js',
+      },
+      result: { target: 'webpack' },
+    }
+  },
+}

src/modes/vue-webpack/output.ts

@@ -0,0 +1,242 @@
+import path from 'node:path'
+import type { CompiledSpriteArtifact } from '../../core/compiled-artifact.js'
+import { GENERATED_MARKER } from '../../core/generated-markers.js'
+import type { GeneratedFile } from '../../core/mode-adapter.js'
+import type { ResolvedSpriteConfig } from '../../types.js'
+
+const MODE = 'vue@webpack'
+const TARGET = 'webpack'
+const OUTPUT_DIR = '.svg-sprite'
+const NOTICE = 'AUTOMATICALLY GENERATED FILE. Do not edit manually.'
+
+function pascal(value: string): string {
+  return value.split('-').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join('')
+}
+
+function camel(value: string): string {
+  return value.replace(/-([a-z0-9])/g, (_, char: string) => char.toUpperCase())
+}
+
+function header(enabled: boolean): string {
+  return enabled
+    ? `/*\n * ${NOTICE}\n * ${GENERATED_MARKER}.\n */`
+    : `/* ${GENERATED_MARKER}. Do not edit. */`
+}
+
+function markedSvg(bytes: Uint8Array, enabled: boolean): string {
+  const marker = enabled ? `${NOTICE}\n  ${GENERATED_MARKER}.` : `${GENERATED_MARKER}. Do not edit.`
+  const content = new TextDecoder().decode(bytes)
+  return content.startsWith('<?xml')
+    ? content.replace(/^(<\?xml[^?]*\?>)\s*/, `$1\n<!-- ${marker} -->\n`)
+    : `<!-- ${marker} -->\n${content}`
+}
+
+function docs(config: ResolvedSpriteConfig): string[] {
+  const text = config.description ?? `SVG sprite icon names for "${config.name}".`
+  return ['/**', ...text.split(/\r?\n/).map((line) => ` * ${line.replace(/\*\//g, '* /')}`), ' */']
+}
+
+function iconData(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const prefix = camel(config.name)
+  const names = artifact.icons.map((icon) => icon.name)
+  const ids = Object.fromEntries(artifact.icons.map((icon) => [icon.name, icon.id]))
+  return [
+    header(config.generatedNotice),
+    '',
+    ...docs(config),
+    `export const ${prefix}IconNames = ${JSON.stringify(names, null, 2)}`,
+    '',
+    `export const ${prefix}IconIds = ${JSON.stringify(ids, null, 2)}`,
+    '',
+  ].join('\n')
+}
+
+function component(config: ResolvedSpriteConfig): string {
+  const componentName = `${pascal(config.name)}Icon`
+  const ids = `${camel(config.name)}IconIds`
+  return [
+    header(config.generatedNotice),
+    "import { defineComponent, h } from 'vue'",
+    "import styles from './vue-component.module.css'",
+    `import { ${ids} } from '../icon-data.js'`,
+    '',
+    "const spriteUrl = new URL('../sprite.svg', import.meta.url).href",
+    '',
+    `export const ${componentName} = defineComponent({`,
+    `  name: '${componentName}',`,
+    '  inheritAttrs: false,',
+    '  props: {',
+    "    icon: { type: String, required: true },",
+    "    wrapped: { type: Boolean, default: false },",
+    '  },',
+    '  setup(props, { attrs }) {',
+    '    return () => {',
+    `      const href = spriteUrl + '#' + ${ids}[props.icon]`,
+    '      if (props.wrapped) {',
+    "        return h('span', { ...attrs, class: [styles.wrap, attrs.class] }, [",
+    "          h('svg', null, [h('use', { href })]),",
+    '        ])',
+    '      }',
+    "      return h('svg', { ...attrs, class: [styles.root, attrs.class] }, [",
+    "        h('use', { href }),",
+    '      ])',
+    '    }',
+    '  },',
+    '})',
+    '',
+  ].join('\n')
+}
+
+function iconDeclarations(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const componentName = `${pascal(config.name)}Icon`
+  const names = `${camel(config.name)}IconNames`
+  const ids = `${camel(config.name)}IconIds`
+  return [
+    header(config.generatedNotice),
+    '',
+    ...docs(config),
+    `export declare const ${names}: readonly [`,
+    ...artifact.icons.map((icon) => `  ${JSON.stringify(icon.name)},`),
+    ']',
+    `export type ${componentName}Name = typeof ${names}[number]`,
+    `export declare const ${ids}: {`,
+    ...artifact.icons.map((icon) => `  readonly ${JSON.stringify(icon.name)}: ${JSON.stringify(icon.id)}`),
+    '}',
+    '',
+  ].join('\n')
+}
+
+function componentDeclarations(config: ResolvedSpriteConfig): string {
+  const componentName = `${pascal(config.name)}Icon`
+  return [
+    header(config.generatedNotice),
+    "import type { CSSProperties, DefineComponent, HTMLAttributes, SVGAttributes } from 'vue'",
+    `import type { ${componentName}Name } from '../icon-data.js'`,
+    '',
+    `export type ${componentName}Style = CSSProperties & Partial<Record<\`--icon-color-\${number}\`, string | number>>`,
+    `type ${componentName}BaseProps = { icon: ${componentName}Name }`,
+    `type ${componentName}SvgProps = ${componentName}BaseProps & { wrapped?: false } & Omit<SVGAttributes, 'style'> & { style?: ${componentName}Style }`,
+    `type ${componentName}WrappedProps = ${componentName}BaseProps & { wrapped: true } & Omit<HTMLAttributes, 'style'> & { style?: ${componentName}Style }`,
+    `export type ${componentName}Props = ${componentName}SvgProps | ${componentName}WrappedProps`,
+    `export declare const ${componentName}: DefineComponent<${componentName}Props>`,
+    '',
+  ].join('\n')
+}
+
+function index(config: ResolvedSpriteConfig): string {
+  return [
+    header(config.generatedNotice),
+    `export { ${pascal(config.name)}Icon } from './vue/vue-component.js'`,
+    `export { ${camel(config.name)}IconNames } from './icon-data.js'`,
+    '',
+  ].join('\n')
+}
+
+function indexDeclarations(config: ResolvedSpriteConfig): string {
+  const componentName = `${pascal(config.name)}Icon`
+  const names = `${camel(config.name)}IconNames`
+  return [
+    header(config.generatedNotice),
+    `export { ${componentName} } from './vue/vue-component.js'`,
+    `export type { ${componentName}Props, ${componentName}Style } from './vue/vue-component.js'`,
+    `export { ${names} } from './icon-data.js'`,
+    `export type { ${componentName}Name } from './icon-data.js'`,
+    '',
+  ].join('\n')
+}
+
+function styles(config: ResolvedSpriteConfig): string {
+  const transition = config.transform.addTransition
+    ? ['  transition-property: fill, stroke, color;', '  transition-duration: 0.3s;', '  transition-timing-function: ease;']
+    : []
+  return [
+    header(config.generatedNotice),
+    '',
+    '.root {',
+    ...transition,
+    '}',
+    '',
+    '.wrap {',
+    '  display: inline-flex;',
+    '}',
+    '',
+    '.wrap svg {',
+    '  width: 100%;',
+    '  height: 100%;',
+    ...transition,
+    '}',
+    '',
+  ].join('\n')
+}
+
+function manifest(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
+  const data = {
+    schemaVersion: 1,
+    generator: '@gromlab/svg-sprites',
+    name: config.name,
+    ...(config.description === undefined ? {} : { description: config.description }),
+    usage: { framework: 'vue', componentName: `${pascal(config.name)}Icon` },
+    mode: MODE,
+    target: TARGET,
+    format: artifact.format,
+    iconCount: artifact.icons.length,
+    spriteUrl: '__SPRITE_URL__',
+    icons: artifact.icons,
+  }
+  const source = JSON.stringify(data, null, 2).replace('"__SPRITE_URL__"', 'spriteUrl')
+  return [
+    header(config.generatedNotice),
+    "const spriteUrl = new URL('./sprite.svg', import.meta.url).href",
+    '',
+    `export const spriteManifest = ${source}`,
+    '',
+    'export default spriteManifest',
+    '',
+  ].join('\n')
+}
+
+function manifestDeclarations(config: ResolvedSpriteConfig): string {
+  return [
+    header(config.generatedNotice),
+    '',
+    'export type SpriteManifestColor = { variable: `--icon-color-${number}`; fallback: string }',
+    'export type SpriteManifestIcon = {',
+    '  name: string',
+    '  id: string',
+    '  viewBox: string | null',
+    '  colors: readonly SpriteManifestColor[]',
+    '}',
+    'export type SpriteManifest = {',
+    '  schemaVersion: 1',
+    "  generator: '@gromlab/svg-sprites'",
+    '  name: string',
+    '  description?: string',
+    "  usage: { framework: 'vue'; componentName: string }",
+    "  mode: 'vue@webpack'",
+    "  target: 'webpack'",
+    "  format: 'stack' | 'symbol'",
+    '  iconCount: number',
+    '  spriteUrl: string',
+    '  icons: readonly SpriteManifestIcon[]',
+    '}',
+    '',
+    'export declare const spriteManifest: SpriteManifest',
+    'export default spriteManifest',
+    '',
+  ].join('\n')
+}
+
+export function generateOutputFiles(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): GeneratedFile[] {
+  return [
+    { path: path.posix.join(OUTPUT_DIR, 'index.js'), content: index(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'index.d.ts'), content: indexDeclarations(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'sprite.svg'), content: markedSvg(artifact.bytes, config.generatedNotice) },
+    { path: path.posix.join(OUTPUT_DIR, 'icon-data.js'), content: iconData(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'icon-data.d.ts'), content: iconDeclarations(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'vue', 'vue-component.js'), content: component(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'vue', 'vue-component.d.ts'), content: componentDeclarations(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'vue', 'vue-component.module.css'), content: styles(config) },
+    { path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.js'), content: manifest(config, artifact) },
+    { path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.d.ts'), content: manifestDeclarations(config) },
+  ]
+}