test: добавить площадку интеграционного тестирования

- добавлены consumer fixtures для React и Next.js
- добавлены typecheck, production build и браузерные smoke-тесты
- добавлена интеграционная проверка в CI

.github/workflows/ci.yml

@@ -40,3 +40,36 @@ jobs:
 
       - name: Build
         run: npm run build
+
+  integration:
+    name: Integration playground
+    runs-on: ubuntu-latest
+    timeout-minutes: 60
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 24
+          cache: npm
+          cache-dependency-path: |
+            package-lock.json
+            integration/package-lock.json
+
+      - name: Install package dependencies
+        run: npm ci
+
+      - name: Build package
+        run: npm run build:package
+
+      - name: Install playground dependencies
+        run: npm ci --prefix integration
+
+      - name: Install Chromium
+        run: npm exec --prefix integration -- playwright install --with-deps chromium
+
+      - name: Verify playground
+        run: npm run verify --prefix integration

integration/.gitignore

@@ -0,0 +1,16 @@
+node_modules/
+playwright-report/
+test-results/
+apps/*/dist/
+apps/*/.angular/
+apps/*/.astro/
+apps/*/.next/
+apps/*/.nuxt/
+apps/*/.output/
+apps/*/.svelte-kit/
+apps/*/build/
+apps/*/out-tsc/
+apps/*/public/sprites/
+apps/*/static/sprites/
+apps/*/*.tsbuildinfo
+apps/*/src/sprite/.svg-sprite/

integration/README.md

@@ -0,0 +1,67 @@
+# Integration playground
+
+Постоянные минимальные consumer-приложения для проверки генерации, typecheck,
+production build и отображения внешнего SVG-спрайта в настоящем Chromium.
+
+## Матрица
+
+| Fixture | Генератор | Runtime |
+| --- | --- | --- |
+| `react-vite` | `react@vite` | React + Vite |
+| `react-webpack` | `react@webpack` | React + Webpack 5 |
+| `next-app-turbopack` | `next@app/turbopack` | App Router + Turbopack |
+| `next-app-webpack` | `next@app/webpack` | App Router + Webpack |
+| `next-pages-turbopack` | `next@pages/turbopack` | Pages Router + Turbopack |
+| `next-pages-webpack` | `next@pages/webpack` | Pages Router + Webpack |
+
+В verify-матрицу входят только поддерживаемые exact modes. Fixtures остальных
+frameworks сохранены как заготовки и будут подключаться после появления их adapters.
+
+## Первый запуск
+
+Из корня репозитория:
+
+```bash
+npm ci
+npm run build:package
+npm run integration:install
+npm exec --prefix integration -- playwright install chromium
+npm run integration:verify
+```
+
+`integration:verify` последовательно выполняет генерацию, typecheck, production build
+активных fixtures и Playwright smoke-тесты.
+
+## Отдельные этапы
+
+```bash
+npm run integration:generate
+npm run integration:build
+npm run integration:test
+```
+
+Для запуска команды только в одном fixture:
+
+```bash
+node integration/scripts/run-workspaces.mjs build react-vite
+npm run dev --workspace @svg-sprites-fixtures/react-vite --prefix integration
+```
+
+Перед E2E production builds должны существовать. Тест запускает каждый server
+последовательно, проверяет внешний `href`, HTTP status и Content-Type спрайта,
+наличие symbol ID, отсутствие browser errors и зелёные пиксели отрисованной иконки.
+
+## Структура
+
+```text
+integration/
+├── apps/                 # реальные consumer package boundaries
+├── fixtures/icons/       # общие исходные SVG
+├── scripts/              # workspace runner и static production server
+├── tests/                # Playwright runtime smoke
+├── package.json          # отдельный npm workspace
+└── package-lock.json     # зафиксированная framework matrix
+```
+
+Generated-файлы, framework build outputs и Playwright artifacts исключены через
+`integration/.gitignore`.

integration/apps/angular/angular.json

@@ -0,0 +1,53 @@
+{
+  "$schema": "../../node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "angular": {
+      "projectType": "application",
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "browser": "src/main.ts",
+            "index": "src/index.html",
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": ["src/styles.css"],
+            "outputPath": "dist/angular"
+          },
+          "configurations": {
+            "production": {
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "angular:build:production"
+            },
+            "development": {
+              "buildTarget": "angular:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  }
+}

integration/apps/angular/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@svg-sprites-fixtures/angular",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "sprites": "svg-sprites --mode legacy .",
+    "typecheck": "ngc -p tsconfig.app.json --noEmit",
+    "build": "npm run sprites && ng build --configuration production",
+    "dev": "npm run sprites && ng serve"
+  },
+  "dependencies": {
+    "@angular/common": "21.2.18",
+    "@angular/compiler": "21.2.18",
+    "@angular/core": "21.2.18",
+    "@angular/platform-browser": "21.2.18",
+    "rxjs": "7.8.2",
+    "tslib": "2.8.1",
+    "zone.js": "0.16.2"
+  },
+  "devDependencies": {
+    "@angular/build": "21.2.18",
+    "@angular/cli": "21.2.18",
+    "@angular/compiler-cli": "21.2.18",
+    "@gromlab/svg-sprites": "file:../../..",
+    "typescript": "5.9.3"
+  }
+}

integration/apps/angular/src/app.component.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core'
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  template: `
+    <main>
+      <h1>Angular</h1>
+      <svg
+        data-testid="icon"
+        data-app="angular"
+        aria-label="Check icon"
+        viewBox="0 0 24 24"
+      >
+        <use href="/sprites/icons.sprite.svg#check"></use>
+      </svg>
+    </main>
+  `,
+})
+export class AppComponent {}

integration/apps/angular/src/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Angular sprite fixture</title>
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>

integration/apps/angular/src/main.ts

@@ -0,0 +1,5 @@
+import { bootstrapApplication } from '@angular/platform-browser'
+
+import { AppComponent } from './app.component'
+
+bootstrapApplication(AppComponent).catch((error: unknown) => console.error(error))

integration/apps/angular/src/styles.css

@@ -0,0 +1,16 @@
+:root {
+  font-family: system-ui, sans-serif;
+  color: #172033;
+  background: #fff;
+}
+
+body {
+  margin: 0;
+  padding: 40px;
+}
+
+[data-testid='icon'] {
+  width: 64px;
+  height: 64px;
+  color: #16a34a;
+}

integration/apps/angular/svg-sprites.config.ts

@@ -0,0 +1,11 @@
+export default {
+  output: 'public/sprites',
+  preview: false,
+  sprites: [
+    {
+      name: 'icons',
+      input: '../../fixtures/icons',
+      format: 'symbol',
+    },
+  ],
+}

integration/apps/angular/tsconfig.app.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": ["src/main.ts"],
+  "include": ["src/**/*.d.ts"]
+}

integration/apps/angular/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "bundler",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "lib": ["ES2022", "DOM"]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

integration/apps/astro/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@svg-sprites-fixtures/astro",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "sprites": "svg-sprites --mode legacy .",
+    "typecheck": "astro check",
+    "build": "npm run sprites && astro check && astro build",
+    "dev": "npm run sprites && astro dev"
+  },
+  "dependencies": {
+    "astro": "7.0.7"
+  },
+  "devDependencies": {
+    "@astrojs/check": "0.9.9",
+    "@gromlab/svg-sprites": "file:../../..",
+    "typescript": "6.0.2"
+  }
+}

integration/apps/astro/src/pages/index.astro

@@ -0,0 +1,44 @@
+---
+const title = 'Astro sprite fixture'
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>{title}</title>
+  </head>
+  <body>
+    <main>
+      <h1>Astro</h1>
+      <svg
+        data-testid="icon"
+        data-app="astro"
+        aria-label="Check icon"
+        viewBox="0 0 24 24"
+      >
+        <use href="/sprites/icons.sprite.svg#check"></use>
+      </svg>
+    </main>
+  </body>
+</html>
+
+<style is:global>
+  :root {
+    font-family: system-ui, sans-serif;
+    color: #172033;
+    background: #fff;
+  }
+
+  body {
+    margin: 0;
+    padding: 40px;
+  }
+
+  [data-testid='icon'] {
+    width: 64px;
+    height: 64px;
+    color: #16a34a;
+  }
+</style>

integration/apps/astro/svg-sprites.config.ts

@@ -0,0 +1,11 @@
+export default {
+  output: 'public/sprites',
+  preview: false,
+  sprites: [
+    {
+      name: 'icons',
+      input: '../../fixtures/icons',
+      format: 'symbol',
+    },
+  ],
+}

integration/apps/astro/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "astro/tsconfigs/strict"
+}

integration/apps/next-app-turbopack/app/layout.tsx

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react'
+
+import './style.css'
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}

integration/apps/next-app-turbopack/app/page.tsx

@@ -0,0 +1,18 @@
+import { IconsIcon } from '../src/sprite'
+
+export default function Page() {
+  return (
+    <main>
+      <h1>Next.js App Router + Turbopack</h1>
+      <IconsIcon
+        data-testid="icon"
+        data-app="next-app-turbopack"
+        icon="check"
+        aria-label="Check icon"
+        width={64}
+        height={64}
+        style={{ '--icon-color-1': '#16a34a' }}
+      />
+    </main>
+  )
+}

integration/apps/next-app-turbopack/app/style.css

@@ -0,0 +1,10 @@
+:root {
+  font-family: system-ui, sans-serif;
+  color: #172033;
+  background: #fff;
+}
+
+body {
+  margin: 0;
+  padding: 40px;
+}

integration/apps/next-app-turbopack/generated-contract.typecheck.tsx

@@ -0,0 +1,18 @@
+import { IconsIcon, iconsIconNames } from './src/sprite'
+import type { IconsIconName, IconsIconProps, IconsIconStyle } from './src/sprite'
+import { IconsIcon as GeneratedIconsIcon } from './src/sprite/.svg-sprite/react/react-component.js'
+import type { IconsIconName as GeneratedIconName } from './src/sprite/.svg-sprite/icon-data.js'
+import { iconsIconNames as generatedIconNames } from './src/sprite/.svg-sprite/icon-data.js'
+
+const iconName: IconsIconName = iconsIconNames[0]
+const generatedIconName: GeneratedIconName = generatedIconNames[0]
+const allIconNames: readonly IconsIconName[] = iconsIconNames
+const style: IconsIconStyle = { '--icon-color-1': '#16a34a' }
+const props: IconsIconProps = { icon: iconName, style }
+
+void allIconNames
+void <IconsIcon {...props} />
+void <GeneratedIconsIcon icon={generatedIconName} />
+
+// @ts-expect-error Unknown icon names must be rejected by generated declarations.
+void <IconsIcon icon="missing" />

integration/apps/next-app-turbopack/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

integration/apps/next-app-turbopack/next.config.mjs

@@ -0,0 +1,10 @@
+import path from 'node:path'
+
+const integrationRoot = path.resolve(import.meta.dirname, '../..')
+
+export default {
+  outputFileTracingRoot: integrationRoot,
+  turbopack: {
+    root: integrationRoot,
+  },
+}

integration/apps/next-app-turbopack/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@svg-sprites-fixtures/next-app-turbopack",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "sprites": "svg-sprites src/sprite/svg-sprite.config.ts",
+    "typecheck": "tsc --noEmit",
+    "build": "npm run sprites && next build --turbopack",
+    "dev": "npm run sprites && next dev --turbopack",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "16.2.10",
+    "react": "19.2.5",
+    "react-dom": "19.2.5"
+  },
+  "devDependencies": {
+    "@gromlab/svg-sprites": "file:../../..",
+    "@types/node": "24.12.0",
+    "@types/react": "19.2.17",
+    "@types/react-dom": "19.2.3",
+    "typescript": "6.0.2"
+  }
+}

integration/apps/next-app-turbopack/src/sprite/.gitignore

@@ -0,0 +1,2 @@
+# @generated by @gromlab/svg-sprites. Do not edit.
+/.svg-sprite/

integration/apps/next-app-turbopack/src/sprite/index.ts

@@ -0,0 +1 @@
+export * from './.svg-sprite'

integration/apps/next-app-turbopack/src/sprite/svg-sprite.config.ts

@@ -0,0 +1,8 @@
+import { defineSpriteConfig } from '@gromlab/svg-sprites'
+
+export default defineSpriteConfig({
+  mode: 'next@app/turbopack',
+  name: 'icons',
+  inputFiles: ['../../../../fixtures/icons/check.svg'],
+  generatedNotice: false,
+})

integration/apps/next-app-turbopack/tsconfig.json

@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ES2022"
+    ],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "incremental": true
+  },
+  "include": [
+    "next-env.d.ts",
+    ".next/types/**/*.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

integration/apps/next-app-webpack/app/layout.tsx

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react'
+
+import './style.css'
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}

integration/apps/next-app-webpack/app/page.tsx

@@ -0,0 +1,18 @@
+import { IconsIcon } from '../src/sprite'
+
+export default function Page() {
+  return (
+    <main>
+      <h1>Next.js App Router + Webpack</h1>
+      <IconsIcon
+        data-testid="icon"
+        data-app="next-app-webpack"
+        icon="check"
+        aria-label="Check icon"
+        width={64}
+        height={64}
+        style={{ '--icon-color-1': '#16a34a' }}
+      />
+    </main>
+  )
+}

integration/apps/next-app-webpack/app/style.css

@@ -0,0 +1,10 @@
+:root {
+  font-family: system-ui, sans-serif;
+  color: #172033;
+  background: #fff;
+}
+
+body {
+  margin: 0;
+  padding: 40px;
+}

integration/apps/next-app-webpack/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

integration/apps/next-app-webpack/next.config.mjs

@@ -0,0 +1,10 @@
+import path from 'node:path'
+
+const integrationRoot = path.resolve(import.meta.dirname, '../..')
+
+export default {
+  outputFileTracingRoot: integrationRoot,
+  turbopack: {
+    root: integrationRoot,
+  },
+}

integration/apps/next-app-webpack/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@svg-sprites-fixtures/next-app-webpack",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "sprites": "svg-sprites src/sprite/svg-sprite.config.ts",
+    "typecheck": "tsc --noEmit",
+    "build": "npm run sprites && next build --webpack",
+    "dev": "npm run sprites && next dev --webpack",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "16.2.10",
+    "react": "19.2.5",
+    "react-dom": "19.2.5"
+  },
+  "devDependencies": {
+    "@gromlab/svg-sprites": "file:../../..",
+    "@types/node": "24.12.0",
+    "@types/react": "19.2.17",
+    "@types/react-dom": "19.2.3",
+    "typescript": "6.0.2"
+  }
+}

integration/apps/next-app-webpack/src/sprite/.gitignore

@@ -0,0 +1,2 @@
+# @generated by @gromlab/svg-sprites. Do not edit.
+/.svg-sprite/

integration/apps/next-app-webpack/src/sprite/index.ts

@@ -0,0 +1 @@
+export * from './.svg-sprite'

integration/apps/next-app-webpack/src/sprite/svg-sprite.config.ts

@@ -0,0 +1,8 @@
+import { defineSpriteConfig } from '@gromlab/svg-sprites'
+
+export default defineSpriteConfig({
+  mode: 'next@app/webpack',
+  name: 'icons',
+  inputFiles: ['../../../../fixtures/icons/check.svg'],
+  generatedNotice: false,
+})

integration/apps/next-app-webpack/tsconfig.json

@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ES2022"
+    ],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "incremental": true
+  },
+  "include": [
+    "next-env.d.ts",
+    ".next/types/**/*.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

integration/apps/next-pages-turbopack/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

integration/apps/next-pages-turbopack/next.config.mjs

@@ -0,0 +1,10 @@
+import path from 'node:path'
+
+const integrationRoot = path.resolve(import.meta.dirname, '../..')
+
+export default {
+  outputFileTracingRoot: integrationRoot,
+  turbopack: {
+    root: integrationRoot,
+  },
+}

integration/apps/next-pages-turbopack/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@svg-sprites-fixtures/next-pages-turbopack",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "sprites": "svg-sprites src/sprite/svg-sprite.config.ts",
+    "typecheck": "tsc --noEmit",
+    "build": "npm run sprites && next build --turbopack",
+    "dev": "npm run sprites && next dev --turbopack",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "16.2.10",
+    "react": "19.2.5",
+    "react-dom": "19.2.5"
+  },
+  "devDependencies": {
+    "@gromlab/svg-sprites": "file:../../..",
+    "@types/node": "24.12.0",
+    "@types/react": "19.2.17",
+    "@types/react-dom": "19.2.3",
+    "typescript": "6.0.2"
+  }
+}

integration/apps/next-pages-turbopack/pages/_app.tsx

@@ -0,0 +1,7 @@
+import type { AppProps } from 'next/app'
+
+import './style.css'
+
+export default function App({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}

integration/apps/next-pages-turbopack/pages/index.tsx

@@ -0,0 +1,18 @@
+import { IconsIcon } from '../src/sprite'
+
+export default function Page() {
+  return (
+    <main>
+      <h1>Next.js Pages Router + Turbopack</h1>
+      <IconsIcon
+        data-testid="icon"
+        data-app="next-pages-turbopack"
+        icon="check"
+        aria-label="Check icon"
+        width={64}
+        height={64}
+        style={{ '--icon-color-1': '#16a34a' }}
+      />
+    </main>
+  )
+}

integration/apps/next-pages-turbopack/pages/style.css

@@ -0,0 +1,10 @@
+:root {
+  font-family: system-ui, sans-serif;
+  color: #172033;
+  background: #fff;
+}
+
+body {
+  margin: 0;
+  padding: 40px;
+}

integration/apps/next-pages-turbopack/src/sprite/.gitignore

@@ -0,0 +1,2 @@
+# @generated by @gromlab/svg-sprites. Do not edit.
+/.svg-sprite/

integration/apps/next-pages-turbopack/src/sprite/index.ts

@@ -0,0 +1 @@
+export * from './.svg-sprite'

integration/apps/next-pages-turbopack/src/sprite/svg-sprite.config.ts

@@ -0,0 +1,8 @@
+import { defineSpriteConfig } from '@gromlab/svg-sprites'
+
+export default defineSpriteConfig({
+  mode: 'next@pages/turbopack',
+  name: 'icons',
+  inputFiles: ['../../../../fixtures/icons/check.svg'],
+  generatedNotice: false,
+})

integration/apps/next-pages-turbopack/tsconfig.json

@@ -0,0 +1,35 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ES2022"
+    ],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "incremental": true
+  },
+  "include": [
+    "next-env.d.ts",
+    ".next/types/**/*.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

integration/apps/next-pages-webpack/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

integration/apps/next-pages-webpack/next.config.mjs

@@ -0,0 +1,10 @@
+import path from 'node:path'
+
+const integrationRoot = path.resolve(import.meta.dirname, '../..')
+
+export default {
+  outputFileTracingRoot: integrationRoot,
+  turbopack: {
+    root: integrationRoot,
+  },
+}

integration/apps/next-pages-webpack/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@svg-sprites-fixtures/next-pages-webpack",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "sprites": "svg-sprites src/sprite/svg-sprite.config.ts",
+    "typecheck": "tsc --noEmit",
+    "build": "npm run sprites && next build --webpack",
+    "dev": "npm run sprites && next dev --webpack",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "16.2.10",
+    "react": "19.2.5",
+    "react-dom": "19.2.5"
+  },
+  "devDependencies": {
+    "@gromlab/svg-sprites": "file:../../..",
+    "@types/node": "24.12.0",
+    "@types/react": "19.2.17",
+    "@types/react-dom": "19.2.3",
+    "typescript": "6.0.2"
+  }
+}

integration/apps/next-pages-webpack/pages/_app.tsx

@@ -0,0 +1,7 @@
+import type { AppProps } from 'next/app'
+
+import './style.css'
+
+export default function App({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}

integration/apps/next-pages-webpack/pages/index.tsx

@@ -0,0 +1,18 @@
+import { IconsIcon } from '../src/sprite'
+
+export default function Page() {
+  return (
+    <main>
+      <h1>Next.js Pages Router + Webpack</h1>
+      <IconsIcon
+        data-testid="icon"
+        data-app="next-pages-webpack"
+        icon="check"
+        aria-label="Check icon"
+        width={64}
+        height={64}
+        style={{ '--icon-color-1': '#16a34a' }}
+      />
+    </main>
+  )
+}

integration/apps/next-pages-webpack/pages/style.css

@@ -0,0 +1,10 @@
+:root {
+  font-family: system-ui, sans-serif;
+  color: #172033;
+  background: #fff;
+}
+
+body {
+  margin: 0;
+  padding: 40px;
+}

integration/apps/next-pages-webpack/src/sprite/.gitignore

@@ -0,0 +1,2 @@
+# @generated by @gromlab/svg-sprites. Do not edit.
+/.svg-sprite/

integration/apps/next-pages-webpack/src/sprite/index.ts

@@ -0,0 +1 @@
+export * from './.svg-sprite'

integration/apps/next-pages-webpack/src/sprite/svg-sprite.config.ts

@@ -0,0 +1,8 @@
+import { defineSpriteConfig } from '@gromlab/svg-sprites'
+
+export default defineSpriteConfig({
+  mode: 'next@pages/webpack',
+  name: 'icons',
+  inputFiles: ['../../../../fixtures/icons/check.svg'],
+  generatedNotice: false,
+})

integration/apps/next-pages-webpack/tsconfig.json

@@ -0,0 +1,35 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ES2022"
+    ],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "incremental": true
+  },
+  "include": [
+    "next-env.d.ts",
+    ".next/types/**/*.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

integration/apps/nuxt/app/app.vue

@@ -0,0 +1,32 @@
+<template>
+  <main>
+    <h1>Nuxt</h1>
+    <svg
+      data-testid="icon"
+      data-app="nuxt"
+      aria-label="Check icon"
+      viewBox="0 0 24 24"
+    >
+      <use href="/sprites/icons.sprite.svg#check" />
+    </svg>
+  </main>
+</template>
+
+<style>
+:root {
+  font-family: system-ui, sans-serif;
+  color: #172033;
+  background: #fff;
+}
+
+body {
+  margin: 0;
+  padding: 40px;
+}
+
+[data-testid='icon'] {
+  width: 64px;
+  height: 64px;
+  color: #16a34a;
+}
+</style>

integration/apps/nuxt/nuxt.config.ts

@@ -0,0 +1,4 @@
+export default defineNuxtConfig({
+  compatibilityDate: '2026-07-01',
+  devtools: { enabled: false },
+})

integration/apps/nuxt/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@svg-sprites-fixtures/nuxt",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "sprites": "svg-sprites --mode legacy .",
+    "typecheck": "nuxt typecheck",
+    "build": "npm run sprites && nuxt build",
+    "dev": "npm run sprites && nuxt dev",
+    "start": "node .output/server/index.mjs"
+  },
+  "dependencies": {
+    "nuxt": "4.3.1",
+    "vue": "3.5.39"
+  },
+  "devDependencies": {
+    "@gromlab/svg-sprites": "file:../../..",
+    "typescript": "6.0.2",
+    "vue-tsc": "3.3.7"
+  }
+}

integration/apps/nuxt/svg-sprites.config.ts

@@ -0,0 +1,11 @@
+export default {
+  output: 'public/sprites',
+  preview: false,
+  sprites: [
+    {
+      name: 'icons',
+      input: '../../fixtures/icons',
+      format: 'symbol',
+    },
+  ],
+}

integration/apps/react-vite/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React Vite sprite fixture</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

integration/apps/react-vite/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@svg-sprites-fixtures/react-vite",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "sprites": "svg-sprites src/sprite/svg-sprite.config.ts",
+    "typecheck": "tsc --noEmit",
+    "build": "npm run sprites && tsc --noEmit && vite build",
+    "dev": "npm run sprites && vite"
+  },
+  "dependencies": {
+    "react": "19.2.5",
+    "react-dom": "19.2.5"
+  },
+  "devDependencies": {
+    "@gromlab/svg-sprites": "file:../../..",
+    "@types/react": "19.2.17",
+    "@types/react-dom": "19.2.3",
+    "@vitejs/plugin-react": "6.0.1",
+    "typescript": "6.0.2",
+    "vite": "8.1.4"
+  }
+}

integration/apps/react-vite/src/main.tsx

@@ -0,0 +1,22 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+
+import { IconsIcon } from './sprite'
+import './style.css'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <main>
+      <h1>React + Vite</h1>
+      <IconsIcon
+        data-testid="icon"
+        data-app="react-vite"
+        icon="check"
+        aria-label="Check icon"
+        width={64}
+        height={64}
+        style={{ '--icon-color-1': '#16a34a' }}
+      />
+    </main>
+  </StrictMode>,
+)

integration/apps/react-vite/src/sprite/.gitignore

@@ -0,0 +1,2 @@
+# @generated by @gromlab/svg-sprites. Do not edit.
+/.svg-sprite/

integration/apps/react-vite/src/sprite/index.ts

@@ -0,0 +1 @@
+export * from './.svg-sprite'

integration/apps/react-vite/src/sprite/svg-sprite.config.ts

@@ -0,0 +1,8 @@
+import { defineSpriteConfig } from '@gromlab/svg-sprites'
+
+export default defineSpriteConfig({
+  mode: 'react@vite',
+  name: 'icons',
+  inputFiles: ['../../../../fixtures/icons/check.svg'],
+  generatedNotice: false,
+})

integration/apps/react-vite/src/style.css

@@ -0,0 +1,10 @@
+:root {
+  font-family: system-ui, sans-serif;
+  color: #172033;
+  background: #fff;
+}
+
+body {
+  margin: 0;
+  padding: 40px;
+}

integration/apps/react-vite/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

integration/apps/react-vite/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"]
+}

integration/apps/react-vite/vite.config.ts

@@ -0,0 +1,6 @@
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [react()],
+})

integration/apps/react-webpack/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@svg-sprites-fixtures/react-webpack",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "sprites": "svg-sprites src/sprite/svg-sprite.config.ts",
+    "typecheck": "tsc --noEmit",
+    "build": "npm run sprites && webpack --mode production",
+    "dev": "npm run sprites && webpack serve --mode development"
+  },
+  "dependencies": {
+    "react": "19.2.5",
+    "react-dom": "19.2.5"
+  },
+  "devDependencies": {
+    "@gromlab/svg-sprites": "file:../../..",
+    "@types/react": "19.2.17",
+    "@types/react-dom": "19.2.3",
+    "css-loader": "7.1.4",
+    "html-webpack-plugin": "5.6.7",
+    "style-loader": "4.0.0",
+    "ts-loader": "9.6.2",
+    "typescript": "6.0.2",
+    "webpack": "5.108.4",
+    "webpack-cli": "7.2.1",
+    "webpack-dev-server": "5.2.2"
+  }
+}

integration/apps/react-webpack/src/env.d.ts

@@ -0,0 +1,6 @@
+declare module '*.module.css' {
+  const classes: Record<string, string>
+  export default classes
+}
+
+declare module '*.css'

integration/apps/react-webpack/src/main.tsx

@@ -0,0 +1,22 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+
+import { IconsIcon } from './sprite'
+import './style.css'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <main>
+      <h1>React + Webpack</h1>
+      <IconsIcon
+        data-testid="icon"
+        data-app="react-webpack"
+        icon="check"
+        aria-label="Check icon"
+        width={64}
+        height={64}
+        style={{ '--icon-color-1': '#16a34a' }}
+      />
+    </main>
+  </StrictMode>,
+)

integration/apps/react-webpack/src/sprite/.gitignore

@@ -0,0 +1,2 @@
+# @generated by @gromlab/svg-sprites. Do not edit.
+/.svg-sprite/

integration/apps/react-webpack/src/sprite/index.ts

@@ -0,0 +1 @@
+export * from './.svg-sprite'

integration/apps/react-webpack/src/sprite/svg-sprite.config.ts

@@ -0,0 +1,8 @@
+import { defineSpriteConfig } from '@gromlab/svg-sprites'
+
+export default defineSpriteConfig({
+  mode: 'react@webpack',
+  name: 'icons',
+  inputFiles: ['../../../../fixtures/icons/check.svg'],
+  generatedNotice: false,
+})

integration/apps/react-webpack/src/style.css

@@ -0,0 +1,10 @@
+:root {
+  font-family: system-ui, sans-serif;
+  color: #172033;
+  background: #fff;
+}
+
+body {
+  margin: 0;
+  padding: 40px;
+}

integration/apps/react-webpack/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"]
+}

integration/apps/react-webpack/webpack.config.js

@@ -0,0 +1,52 @@
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+import HtmlWebpackPlugin from 'html-webpack-plugin'
+
+const root = path.dirname(fileURLToPath(import.meta.url))
+
+export default {
+  entry: './src/main.tsx',
+  output: {
+    path: path.join(root, 'dist'),
+    filename: 'assets/app.[contenthash].js',
+    assetModuleFilename: 'assets/[name].[contenthash][ext]',
+    clean: true,
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        exclude: /node_modules/,
+        use: 'ts-loader',
+      },
+      {
+        test: /\.module\.css$/,
+        use: [
+          'style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              modules: {
+                namedExport: false,
+              },
+            },
+          },
+        ],
+      },
+      {
+        test: /\.css$/,
+        exclude: /\.module\.css$/,
+        use: ['style-loader', 'css-loader'],
+      },
+    ],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      templateContent: '<!doctype html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>React Webpack sprite fixture</title></head><body><div id="root"></div></body></html>',
+    }),
+  ],
+}

integration/apps/solid-vite/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Solid Vite sprite fixture</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

integration/apps/solid-vite/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@svg-sprites-fixtures/solid-vite",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "sprites": "svg-sprites --mode legacy .",
+    "typecheck": "tsc --noEmit",
+    "build": "npm run sprites && tsc --noEmit && vite build",
+    "dev": "npm run sprites && vite"
+  },
+  "dependencies": {
+    "solid-js": "1.9.14"
+  },
+  "devDependencies": {
+    "@gromlab/svg-sprites": "file:../../..",
+    "typescript": "6.0.2",
+    "vite": "8.1.4",
+    "vite-plugin-solid": "2.11.12"
+  }
+}

integration/apps/solid-vite/src/main.tsx

@@ -0,0 +1,21 @@
+import { render } from 'solid-js/web'
+
+import './style.css'
+
+function App() {
+  return (
+    <main>
+      <h1>Solid + Vite</h1>
+      <svg
+        data-testid="icon"
+        data-app="solid-vite"
+        aria-label="Check icon"
+        viewBox="0 0 24 24"
+      >
+        <use href="/sprites/icons.sprite.svg#check" />
+      </svg>
+    </main>
+  )
+}
+
+render(() => <App />, document.getElementById('root')!)

integration/apps/solid-vite/src/style.css

@@ -0,0 +1,16 @@
+:root {
+  font-family: system-ui, sans-serif;
+  color: #172033;
+  background: #fff;
+}
+
+body {
+  margin: 0;
+  padding: 40px;
+}
+
+[data-testid='icon'] {
+  width: 64px;
+  height: 64px;
+  color: #16a34a;
+}

integration/apps/solid-vite/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

integration/apps/solid-vite/svg-sprites.config.ts

@@ -0,0 +1,11 @@
+export default {
+  output: 'public/sprites',
+  preview: false,
+  sprites: [
+    {
+      name: 'icons',
+      input: '../../fixtures/icons',
+      format: 'symbol',
+    },
+  ],
+}

integration/apps/solid-vite/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"]
+}

integration/apps/solid-vite/vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import solid from 'vite-plugin-solid'
+
+export default defineConfig({
+  plugins: [solid()],
+})

integration/apps/svelte-vite/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Svelte Vite sprite fixture</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

integration/apps/svelte-vite/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@svg-sprites-fixtures/svelte-vite",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "sprites": "svg-sprites --mode legacy .",
+    "typecheck": "svelte-check --tsconfig ./tsconfig.json",
+    "build": "npm run sprites && svelte-check --tsconfig ./tsconfig.json && vite build",
+    "dev": "npm run sprites && vite"
+  },
+  "dependencies": {
+    "svelte": "5.56.4"
+  },
+  "devDependencies": {
+    "@gromlab/svg-sprites": "file:../../..",
+    "@sveltejs/vite-plugin-svelte": "7.2.0",
+    "svelte-check": "4.7.2",
+    "typescript": "6.0.2",
+    "vite": "8.1.4"
+  }
+}

integration/apps/svelte-vite/src/App.svelte

@@ -0,0 +1,30 @@
+<main>
+  <h1>Svelte + Vite</h1>
+  <svg
+    data-testid="icon"
+    data-app="svelte-vite"
+    aria-label="Check icon"
+    viewBox="0 0 24 24"
+  >
+    <use href="/sprites/icons.sprite.svg#check"></use>
+  </svg>
+</main>
+
+<style>
+  :global(:root) {
+    font-family: system-ui, sans-serif;
+    color: #172033;
+    background: #fff;
+  }
+
+  :global(body) {
+    margin: 0;
+    padding: 40px;
+  }
+
+  [data-testid='icon'] {
+    width: 64px;
+    height: 64px;
+    color: #16a34a;
+  }
+</style>

integration/apps/svelte-vite/src/app.d.ts

@@ -0,0 +1,6 @@
+declare module '*.svelte' {
+  import type { Component } from 'svelte'
+
+  const component: Component<Record<string, never>>
+  export default component
+}

integration/apps/svelte-vite/src/main.ts

@@ -0,0 +1,7 @@
+import { mount } from 'svelte'
+
+import App from './App.svelte'
+
+mount(App, {
+  target: document.getElementById('app')!,
+})

integration/apps/svelte-vite/src/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="svelte" />

integration/apps/svelte-vite/svg-sprites.config.ts

@@ -0,0 +1,11 @@
+export default {
+  output: 'public/sprites',
+  preview: false,
+  sprites: [
+    {
+      name: 'icons',
+      input: '../../fixtures/icons',
+      format: 'symbol',
+    },
+  ],
+}

integration/apps/svelte-vite/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "allowArbitraryExtensions": true,
+    "isolatedModules": true,
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.svelte"]
+}

integration/apps/svelte-vite/vite.config.ts

@@ -0,0 +1,6 @@
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [svelte()],
+})

integration/apps/sveltekit/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@svg-sprites-fixtures/sveltekit",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "sprites": "svg-sprites --mode legacy .",
+    "typecheck": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "build": "npm run sprites && svelte-kit sync && vite build",
+    "dev": "npm run sprites && vite dev",
+    "start": "node build/index.js"
+  },
+  "dependencies": {
+    "svelte": "5.56.4"
+  },
+  "devDependencies": {
+    "@gromlab/svg-sprites": "file:../../..",
+    "@sveltejs/adapter-node": "5.5.7",
+    "@sveltejs/kit": "2.69.2",
+    "@sveltejs/vite-plugin-svelte": "7.2.0",
+    "svelte-check": "4.7.2",
+    "typescript": "6.0.2",
+    "vite": "8.1.4"
+  }
+}

integration/apps/sveltekit/src/app.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
+</html>

integration/apps/sveltekit/src/routes/+page.svelte

@@ -0,0 +1,34 @@
+<svelte:head>
+  <title>SvelteKit sprite fixture</title>
+</svelte:head>
+
+<main>
+  <h1>SvelteKit</h1>
+  <svg
+    data-testid="icon"
+    data-app="sveltekit"
+    aria-label="Check icon"
+    viewBox="0 0 24 24"
+  >
+    <use href="/sprites/icons.sprite.svg#check"></use>
+  </svg>
+</main>
+
+<style>
+  :global(:root) {
+    font-family: system-ui, sans-serif;
+    color: #172033;
+    background: #fff;
+  }
+
+  :global(body) {
+    margin: 0;
+    padding: 40px;
+  }
+
+  [data-testid='icon'] {
+    width: 64px;
+    height: 64px;
+    color: #16a34a;
+  }
+</style>