gromov/svg-sprites
1
0
Fork 0
mirror of https://github.com/gromlab-ru/svg-sprites.git synced 2026-07-22 04:40:17 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: добавить поддержку 20 framework exact modes

Browse Source 
Добавлены 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-тестов
This commit is contained in:
Сергей Громов
2026-07-15 16:56:44 +03:00
parent e54ab4991c
commit 8b3365f957
378 changed files with 21188 additions and 650 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
integration/apps/alpine-vite/index.html Normal file
View File

@@ -0,0 +1,17 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Alpine Vite sprite fixture</title>
<style>
:root { font-family: system-ui, sans-serif; color: #172033; background: #fff; }
body { margin: 0; padding: 40px; }
gromlab-sprite-viewer { display: block; margin-top: 32px; }
</style>
</head>
<body>
<main id="app"></main>
<script type="module" src="/src/main.js"></script>
</body>
</html>

20
integration/apps/alpine-vite/package.json Normal file
View File

@@ -0,0 +1,20 @@
{
"name": "@svg-sprites-fixtures/alpine-vite",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"sprites": "svg-sprites src/sprite/svg-sprite.config.json",
"typecheck": "tsc --noEmit",
"build": "npm run sprites && npm run typecheck && vite build",
"dev": "npm run sprites && vite"
},
"dependencies": {
"alpinejs": "3.15.12"
},
"devDependencies": {
"@gromlab/svg-sprites": "file:../../..",
"typescript": "6.0.2",
"vite": "8.1.4"
}
}

22
integration/apps/alpine-vite/src/generated-contract.typecheck.ts Normal file
View File

@@ -0,0 +1,22 @@
import {
iconsAlpinePlugin,
iconsIconDirective,
iconsIconMagic,
iconsIconNames,
type IconsIconName,
} from './sprite/index.js'
declare const Alpine: { plugin(plugin: typeof iconsAlpinePlugin): void }
const iconName: IconsIconName = iconsIconNames[0]
const directive: 'icons-icon' = iconsIconDirective
const magic: 'iconsIconHref' = iconsIconMagic
Alpine.plugin(iconsAlpinePlugin)
void iconName
void directive
void magic
// @ts-expect-error Generated icon names form a literal union.
const missingIcon: IconsIconName = 'missing'
void missingIcon

25
integration/apps/alpine-vite/src/main.js Normal file
View File

@@ -0,0 +1,25 @@
import '@gromlab/svg-sprites/viewer/element'
import Alpine from 'alpinejs'
import spriteManifest from './sprite/.svg-sprite/svg-sprite.manifest.js'
import { iconsAlpinePlugin } from './sprite/index.js'
Alpine.plugin(iconsAlpinePlugin)
window.Alpine = Alpine
document.querySelector('#app').innerHTML = `
<main x-data>
<h1>Alpine + Vite</h1>
<svg
data-testid="icon"
data-app="alpine-vite"
x-icons-icon="'check'"
role="img"
aria-label="Check icon"
style="width:64px;height:64px;color:#16a34a;--icon-color-1:#16a34a"
></svg>
<gromlab-sprite-viewer viewer-title="Alpine Vite Viewer"></gromlab-sprite-viewer>
</main>
`
document.querySelector('gromlab-sprite-viewer').sources = [spriteManifest]
Alpine.start()

2
integration/apps/alpine-vite/src/sprite/.gitignore vendored Normal file
View File

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

1
integration/apps/alpine-vite/src/sprite/index.d.ts vendored Normal file
View File

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

1
integration/apps/alpine-vite/src/sprite/index.js Normal file
View File

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

6
integration/apps/alpine-vite/src/sprite/svg-sprite.config.json Normal file
View File

@@ -0,0 +1,6 @@
{
"mode": "alpine@vite",
"name": "icons",
"input": "../../../../fixtures/icons/check.svg",
"generatedNotice": false
}

12
integration/apps/alpine-vite/tsconfig.json Normal file
View File

@@ -0,0 +1,12 @@
{
"compilerOptions": {
"target": "ES2022",
"module": "ESNext",
"moduleResolution": "Bundler",
"lib": ["ES2022", "DOM"],
"strict": true,
"noEmit": true,
"skipLibCheck": true
},
"include": ["src/generated-contract.typecheck.ts"]
}

16
integration/apps/alpine-webpack/index.html Normal file
View File

@@ -0,0 +1,16 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Alpine Webpack sprite fixture</title>
<style>
:root { font-family: system-ui, sans-serif; color: #172033; background: #fff; }
body { margin: 0; padding: 40px; }
gromlab-sprite-viewer { display: block; margin-top: 32px; }
</style>
</head>
<body>
<main id="app"></main>
</body>
</html>

23
integration/apps/alpine-webpack/package.json Normal file
View File

@@ -0,0 +1,23 @@
{
"name": "@svg-sprites-fixtures/alpine-webpack",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"sprites": "svg-sprites src/sprite/svg-sprite.config.json",
"typecheck": "tsc --noEmit",
"build": "npm run sprites && npm run typecheck && webpack --mode production",
"dev": "npm run sprites && webpack serve --mode development"
},
"dependencies": {
"alpinejs": "3.15.12"
},
"devDependencies": {
"@gromlab/svg-sprites": "file:../../..",
"html-webpack-plugin": "5.6.7",
"typescript": "6.0.2",
"webpack": "5.108.4",
"webpack-cli": "7.2.1",
"webpack-dev-server": "5.2.2"
}
}

22
integration/apps/alpine-webpack/src/generated-contract.typecheck.ts Normal file
View File

@@ -0,0 +1,22 @@
import {
iconsAlpinePlugin,
iconsIconDirective,
iconsIconMagic,
iconsIconNames,
type IconsIconName,
} from './sprite/index.js'
declare const Alpine: { plugin(plugin: typeof iconsAlpinePlugin): void }
const iconName: IconsIconName = iconsIconNames[0]
const directive: 'icons-icon' = iconsIconDirective
const magic: 'iconsIconHref' = iconsIconMagic
Alpine.plugin(iconsAlpinePlugin)
void iconName
void directive
void magic
// @ts-expect-error Generated icon names form a literal union.
const missingIcon: IconsIconName = 'missing'
void missingIcon

25
integration/apps/alpine-webpack/src/main.js Normal file
View File

@@ -0,0 +1,25 @@
import '@gromlab/svg-sprites/viewer/element'
import Alpine from 'alpinejs'
import spriteManifest from './sprite/.svg-sprite/svg-sprite.manifest.js'
import { iconsAlpinePlugin } from './sprite/index.js'
Alpine.plugin(iconsAlpinePlugin)
window.Alpine = Alpine
document.querySelector('#app').innerHTML = `
<main x-data>
<h1>Alpine + Webpack</h1>
<svg
data-testid="icon"
data-app="alpine-webpack"
x-icons-icon="'check'"
role="img"
aria-label="Check icon"
style="width:64px;height:64px;color:#16a34a;--icon-color-1:#16a34a"
></svg>
<gromlab-sprite-viewer viewer-title="Alpine Webpack Viewer"></gromlab-sprite-viewer>
</main>
`
document.querySelector('gromlab-sprite-viewer').sources = [spriteManifest]
Alpine.start()

2
integration/apps/alpine-webpack/src/sprite/.gitignore vendored Normal file
View File

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

1
integration/apps/alpine-webpack/src/sprite/index.d.ts vendored Normal file
View File

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

1
integration/apps/alpine-webpack/src/sprite/index.js Normal file
View File

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

6
integration/apps/alpine-webpack/src/sprite/svg-sprite.config.json Normal file
View File

@@ -0,0 +1,6 @@
{
"mode": "alpine@webpack",
"name": "icons",
"input": "../../../../fixtures/icons/check.svg",
"generatedNotice": false
}

12
integration/apps/alpine-webpack/tsconfig.json Normal file
View File

@@ -0,0 +1,12 @@
{
"compilerOptions": {
"target": "ES2022",
"module": "ESNext",
"moduleResolution": "Bundler",
"lib": ["ES2022", "DOM"],
"strict": true,
"noEmit": true,
"skipLibCheck": true
},
"include": ["src/generated-contract.typecheck.ts"]
}

26
integration/apps/alpine-webpack/webpack.config.js Normal file
View File

@@ -0,0 +1,26 @@
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.js',
output: {
path: path.join(root, 'dist'),
filename: 'assets/app.[contenthash].js',
assetModuleFilename: 'assets/[name].[contenthash][ext]',
clean: true,
},
module: {
rules: [
{
test: /\.css$/,
resourceQuery: /inline/,
type: 'asset/source',
},
],
},
plugins: [new HtmlWebpackPlugin({ template: './index.html' })],
}

33
integration/apps/angular-webpack/package.json Normal file
View File

@@ -0,0 +1,33 @@
{
"name": "@svg-sprites-fixtures/angular-webpack",
"private": true,
"version": "0.0.0",
"scripts": {
"sprites": "svg-sprites src/sprite/svg-sprite.config.ts",
"typecheck": "ngc -p tsconfig.json --noEmit",
"build": "npm run sprites && webpack --mode production",
"dev": "npm run sprites && webpack serve --mode development"
},
"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/compiler-cli": "21.2.18",
"@babel/core": "7.28.6",
"@gromlab/svg-sprites": "file:../../..",
"@ngtools/webpack": "21.2.18",
"babel-loader": "10.0.0",
"html-webpack-plugin": "5.6.6",
"raw-loader": "4.0.2",
"typescript": "5.9.3",
"webpack": "5.105.4",
"webpack-cli": "6.0.1",
"webpack-dev-server": "5.2.3"
}
}

11
integration/apps/angular-webpack/src/index.html Normal file
View File

@@ -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 Webpack sprite fixture</title>
</head>
<body>
<app-root></app-root>
</body>
</html>

37
integration/apps/angular-webpack/src/main.ts Normal file
View File

@@ -0,0 +1,37 @@
import '@gromlab/svg-sprites/viewer/element'
import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core'
import { bootstrapApplication } from '@angular/platform-browser'
import { IconsIcon } from './sprite'
import './type-probe'
@Component({
selector: 'app-root',
standalone: true,
imports: [IconsIcon],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
template: `
<main>
<h1>Angular + Webpack</h1>
<icons-icon
data-testid="icon"
data-app="angular-webpack"
icon="check"
aria-label="Check icon"
style="width:64px;height:64px;color:#16a34a;--icon-color-1:#16a34a"
/>
<gromlab-sprite-viewer
[sources]="viewerSources"
viewer-title="Angular Webpack Viewer"
/>
</main>
`,
})
class AppComponent {
readonly viewerSources = [
() => import('./sprite/.svg-sprite/svg-sprite.manifest.js'),
]
}
bootstrapApplication(AppComponent).catch((error: unknown) => console.error(error))

2
integration/apps/angular-webpack/src/sprite/.gitignore vendored Normal file
View File

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

1
integration/apps/angular-webpack/src/sprite/index.ts Normal file
View File

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

6
integration/apps/angular-webpack/src/sprite/svg-sprite.config.ts Normal file
View File

@@ -0,0 +1,6 @@
export default {
mode: 'angular@webpack',
name: 'icons',
input: '../../../../fixtures/icons/check.svg',
generatedNotice: false,
}

8
integration/apps/angular-webpack/src/type-probe.ts Normal file
View File

@@ -0,0 +1,8 @@
import type { IconsIconName } from './sprite'
const validIcon: IconsIconName = 'check'
void validIcon
// @ts-expect-error generated icon names are a closed union
const invalidIcon: IconsIconName = 'missing'
void invalidIcon

17
integration/apps/angular-webpack/tsconfig.json Normal file
View File

@@ -0,0 +1,17 @@
{
"compilerOptions": {
"target": "ES2022",
"module": "ES2022",
"moduleResolution": "bundler",
"lib": ["ES2022", "DOM"],
"strict": true,
"experimentalDecorators": true,
"useDefineForClassFields": false,
"skipLibCheck": true
},
"angularCompilerOptions": {
"strictTemplates": true
},
"files": ["src/main.ts", "src/type-probe.ts"],
"include": ["src/**/*.d.ts"]
}

42
integration/apps/angular-webpack/webpack.config.js Normal file
View File

@@ -0,0 +1,42 @@
import path from 'node:path'
import { fileURLToPath } from 'node:url'
import { AngularWebpackPlugin } from '@ngtools/webpack'
import linkerPlugin from '@angular/compiler-cli/linker/babel'
import HtmlWebpackPlugin from 'html-webpack-plugin'
const rootDir = path.dirname(fileURLToPath(import.meta.url))
export default {
entry: path.join(rootDir, 'src/main.ts'),
output: {
path: path.join(rootDir, 'dist'),
filename: 'app.[contenthash].js',
clean: true,
assetModuleFilename: 'assets/[name].[contenthash][ext]',
},
resolve: { extensions: ['.ts', '.js'] },
module: {
rules: [
{ test: /\.ts$/, loader: '@ngtools/webpack' },
{
test: /\.[cm]?js$/,
exclude: /@babel(?:\/|\\)runtime/,
use: {
loader: 'babel-loader',
options: {
compact: false,
plugins: [linkerPlugin],
},
},
},
{ test: /\.css$/, use: 'raw-loader' },
{ test: /\.svg$/, type: 'asset/resource' },
],
},
plugins: [
new AngularWebpackPlugin({ tsconfig: path.join(rootDir, 'tsconfig.json') }),
new HtmlWebpackPlugin({ template: path.join(rootDir, 'src/index.html') }),
],
devServer: { host: '127.0.0.1', static: path.join(rootDir, 'dist') },
}

3
integration/apps/angular/angular.json
View File

@@ -21,6 +21,9 @@
"input": "public"
}
],
"loader": {
".svg": "file"
},
"styles": ["src/styles.css"],
"outputPath": "dist/angular"
},

2
integration/apps/angular/package.json
View File

@@ -3,7 +3,7 @@
"private": true,
"version": "0.0.0",
"scripts": {
"sprites": "svg-sprites --mode legacy .",
"sprites": "svg-sprites src/sprite/svg-sprite.config.ts",
"typecheck": "ngc -p tsconfig.app.json --noEmit",
"build": "npm run sprites && ng build --configuration production",
"dev": "npm run sprites && ng serve"

29
integration/apps/angular/src/app.component.ts
View File

@@ -1,20 +1,33 @@
import { Component } from '@angular/core'
import '@gromlab/svg-sprites/viewer/element'
import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core'
import { IconsIcon } from './sprite'
@Component({
selector: 'app-root',
standalone: true,
imports: [IconsIcon],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
template: `
<main>
<h1>Angular</h1>
<svg
<h1>Angular application builder</h1>
<icons-icon
data-testid="icon"
data-app="angular"
icon="check"
aria-label="Check icon"
viewBox="0 0 24 24"
>
<use href="/sprites/icons.sprite.svg#check"></use>
</svg>
style="color: #16a34a; --icon-color-1: #16a34a"
/>
<gromlab-sprite-viewer
[sources]="viewerSources"
viewer-title="Angular Application Viewer"
/>
</main>
`,
})
export class AppComponent {}
export class AppComponent {
readonly viewerSources = [
() => import('./sprite/.svg-sprite/svg-sprite.manifest.js'),
]
}

2
integration/apps/angular/src/sprite/.gitignore vendored Normal file
View File

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

1
integration/apps/angular/src/sprite/index.ts Normal file
View File

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

6
integration/apps/angular/src/sprite/svg-sprite.config.ts Normal file
View File

@@ -0,0 +1,6 @@
export default {
mode: 'angular@application',
name: 'icons',
input: '../../../../fixtures/icons/check.svg',
generatedNotice: false,
}

7
integration/apps/angular/src/styles.css
View File

@@ -9,8 +9,13 @@ body {
padding: 40px;
}
[data-testid='icon'] {
icons-icon[data-testid='icon'] {
width: 64px;
height: 64px;
color: #16a34a;
}
gromlab-sprite-viewer {
display: block;
margin-top: 32px;
}

10
integration/apps/angular/src/type-probe.ts Normal file
View File

@@ -0,0 +1,10 @@
import type { IconsIconName } from './sprite'
import type { SpriteManifest } from './sprite/.svg-sprite/svg-sprite.manifest.js'
const icon: IconsIconName = 'check'
const mode: SpriteManifest['mode'] = 'angular@application'
// @ts-expect-error Unknown source file names are rejected by the generated union.
const unknownIcon: IconsIconName = 'missing'
export { icon, mode, unknownIcon }

11
integration/apps/angular/svg-sprites.config.ts
View File

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

2
integration/apps/angular/tsconfig.app.json
View File

@@ -4,6 +4,6 @@
"outDir": "./out-tsc/app",
"types": []
},
"files": ["src/main.ts"],
"files": ["src/main.ts", "src/type-probe.ts"],
"include": ["src/**/*.d.ts"]
}

2
integration/apps/angular/tsconfig.json
View File

@@ -1,6 +1,5 @@
{
"compilerOptions": {
"baseUrl": ".",
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": true,
@@ -10,7 +9,6 @@
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "bundler",
"importHelpers": true,

2
integration/apps/astro/package.json
View File

@@ -4,7 +4,7 @@
"version": "0.0.0",
"type": "module",
"scripts": {
"sprites": "svg-sprites --mode legacy .",
"sprites": "svg-sprites src/sprite/svg-sprite.config.ts",
"typecheck": "astro check",
"build": "npm run sprites && astro check && astro build",
"dev": "npm run sprites && astro dev"

31
integration/apps/astro/src/pages/index.astro
View File

@@ -1,4 +1,6 @@
---
import { IconsIcon } from '../sprite/index.js'
const title = 'Astro sprite fixture'
---
@@ -12,15 +14,29 @@ const title = 'Astro sprite fixture'
<body>
<main>
<h1>Astro</h1>
<svg
<IconsIcon
data-testid="icon"
data-app="astro"
icon="check"
aria-label="Check icon"
viewBox="0 0 24 24"
>
<use href="/sprites/icons.sprite.svg#check"></use>
</svg>
width="64"
height="64"
style="--icon-color-1: #16a34a"
/>
<gromlab-sprite-viewer id="sprite-viewer"></gromlab-sprite-viewer>
</main>
<script>
import '@gromlab/svg-sprites/viewer/element'
const viewer = /** @type {import('@gromlab/svg-sprites/viewer').SpriteViewerElement | null} */ (
document.querySelector('#sprite-viewer')
)
if (!viewer) throw new Error('Sprite Viewer element is missing.')
Object.assign(viewer, {
viewerTitle: 'Astro Vite Viewer',
sources: [() => import('../sprite/.svg-sprite/svg-sprite.manifest.js')],
})
</script>
</body>
</html>
@@ -41,4 +57,9 @@ const title = 'Astro sprite fixture'
height: 64px;
color: #16a34a;
}
gromlab-sprite-viewer {
display: block;
margin-top: 32px;
}
</style>

2
integration/apps/astro/src/sprite/.gitignore vendored Normal file
View File

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

1
integration/apps/astro/src/sprite/index.d.ts vendored Normal file
View File

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

1
integration/apps/astro/src/sprite/index.js Normal file
View File

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

6
integration/apps/astro/src/sprite/svg-sprite.config.ts Normal file
View File

@@ -0,0 +1,6 @@
export default {
mode: 'astro@vite',
name: 'icons',
input: '../../../../fixtures/icons/check.svg',
generatedNotice: false,
}

11
integration/apps/astro/src/type-probe.ts Normal file
View File

@@ -0,0 +1,11 @@
import type { IconsIconName, IconsIconProps } from './sprite/index.js'
import type { SpriteManifest } from './sprite/.svg-sprite/svg-sprite.manifest.js'
const icon: IconsIconName = 'check'
const props: IconsIconProps = { icon, width: 24, 'aria-label': 'Check icon' }
const framework: SpriteManifest['usage']['framework'] = 'astro'
// @ts-expect-error Unknown source file names are rejected by the generated union.
const unknownIcon: IconsIconName = 'missing'
export { framework, icon, props, unknownIcon }

11
integration/apps/astro/svg-sprites.config.ts
View File

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

17
integration/apps/lit-vite/index.html Normal file
View File

@@ -0,0 +1,17 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lit Vite sprite fixture</title>
<style>
:root { font-family: system-ui, sans-serif; color: #172033; background: #fff; }
body { margin: 0; padding: 40px; }
gromlab-sprite-viewer { display: block; margin-top: 32px; }
</style>
</head>
<body>
<main id="app"></main>
<script type="module" src="/src/main.js"></script>
</body>
</html>

20
integration/apps/lit-vite/package.json Normal file
View File

@@ -0,0 +1,20 @@
{
"name": "@svg-sprites-fixtures/lit-vite",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"sprites": "svg-sprites src/sprite/svg-sprite.config.json",
"typecheck": "tsc --noEmit",
"build": "npm run sprites && npm run typecheck && vite build",
"dev": "npm run sprites && vite"
},
"dependencies": {
"lit": "3.3.3"
},
"devDependencies": {
"@gromlab/svg-sprites": "file:../../..",
"typescript": "6.0.2",
"vite": "8.1.4"
}
}

18
integration/apps/lit-vite/src/generated-contract.typecheck.ts Normal file
View File

@@ -0,0 +1,18 @@
import {
defineIconsIcon,
IconsIcon,
iconsIconNames,
iconsIconTagName,
type IconsIconName,
} from './sprite/index.js'
const iconName: IconsIconName = iconsIconNames[0]
const icon = new IconsIcon()
icon.icon = iconName
const registeredIcon = document.createElement(iconsIconTagName)
registeredIcon.icon = 'check'
defineIconsIcon()
// @ts-expect-error Generated icon names form a literal union.
registeredIcon.icon = 'missing'

20
integration/apps/lit-vite/src/main.js Normal file
View File

@@ -0,0 +1,20 @@
import '@gromlab/svg-sprites/viewer/element'
import spriteManifest from './sprite/.svg-sprite/svg-sprite.manifest.js'
import { defineIconsIcon } from './sprite/index.js'
defineIconsIcon()
document.querySelector('#app').innerHTML = `
<h1>Lit + Vite</h1>
<icons-icon
data-testid="icon"
data-app="lit-vite"
icon="check"
role="img"
aria-label="Check icon"
style="width:64px;height:64px;color:#16a34a;--icon-color-1:#16a34a"
></icons-icon>
<gromlab-sprite-viewer viewer-title="Lit Vite Viewer"></gromlab-sprite-viewer>
`
document.querySelector('gromlab-sprite-viewer').sources = [spriteManifest]

2
integration/apps/lit-vite/src/sprite/.gitignore vendored Normal file
View File

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

1
integration/apps/lit-vite/src/sprite/index.d.ts vendored Normal file
View File

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

1
integration/apps/lit-vite/src/sprite/index.js Normal file
View File

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

6
integration/apps/lit-vite/src/sprite/svg-sprite.config.json Normal file
View File

@@ -0,0 +1,6 @@
{
"mode": "lit@vite",
"name": "icons",
"input": "../../../../fixtures/icons/check.svg",
"generatedNotice": false
}

12
integration/apps/lit-vite/tsconfig.json Normal file
View File

@@ -0,0 +1,12 @@
{
"compilerOptions": {
"target": "ES2022",
"module": "ESNext",
"moduleResolution": "Bundler",
"lib": ["ES2022", "DOM"],
"strict": true,
"noEmit": true,
"skipLibCheck": true
},
"include": ["src/generated-contract.typecheck.ts"]
}

16
integration/apps/lit-webpack/index.html Normal file
View File

@@ -0,0 +1,16 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lit Webpack sprite fixture</title>
<style>
:root { font-family: system-ui, sans-serif; color: #172033; background: #fff; }
body { margin: 0; padding: 40px; }
gromlab-sprite-viewer { display: block; margin-top: 32px; }
</style>
</head>
<body>
<main id="app"></main>
</body>
</html>

23
integration/apps/lit-webpack/package.json Normal file
View File

@@ -0,0 +1,23 @@
{
"name": "@svg-sprites-fixtures/lit-webpack",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"sprites": "svg-sprites src/sprite/svg-sprite.config.json",
"typecheck": "tsc --noEmit",
"build": "npm run sprites && npm run typecheck && webpack --mode production",
"dev": "npm run sprites && webpack serve --mode development"
},
"dependencies": {
"lit": "3.3.3"
},
"devDependencies": {
"@gromlab/svg-sprites": "file:../../..",
"html-webpack-plugin": "5.6.7",
"typescript": "6.0.2",
"webpack": "5.108.4",
"webpack-cli": "7.2.1",
"webpack-dev-server": "5.2.2"
}
}

18
integration/apps/lit-webpack/src/generated-contract.typecheck.ts Normal file
View File

@@ -0,0 +1,18 @@
import {
defineIconsIcon,
IconsIcon,
iconsIconNames,
iconsIconTagName,
type IconsIconName,
} from './sprite/index.js'
const iconName: IconsIconName = iconsIconNames[0]
const icon = new IconsIcon()
icon.icon = iconName
const registeredIcon = document.createElement(iconsIconTagName)
registeredIcon.icon = 'check'
defineIconsIcon()
// @ts-expect-error Generated icon names form a literal union.
registeredIcon.icon = 'missing'

20
integration/apps/lit-webpack/src/main.js Normal file
View File

@@ -0,0 +1,20 @@
import '@gromlab/svg-sprites/viewer/element'
import spriteManifest from './sprite/.svg-sprite/svg-sprite.manifest.js'
import { defineIconsIcon } from './sprite/index.js'
defineIconsIcon()
document.querySelector('#app').innerHTML = `
<h1>Lit + Webpack</h1>
<icons-icon
data-testid="icon"
data-app="lit-webpack"
icon="check"
role="img"
aria-label="Check icon"
style="width:64px;height:64px;color:#16a34a;--icon-color-1:#16a34a"
></icons-icon>
<gromlab-sprite-viewer viewer-title="Lit Webpack Viewer"></gromlab-sprite-viewer>
`
document.querySelector('gromlab-sprite-viewer').sources = [spriteManifest]

2
integration/apps/lit-webpack/src/sprite/.gitignore vendored Normal file
View File

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

1
integration/apps/lit-webpack/src/sprite/index.d.ts vendored Normal file
View File

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

1
integration/apps/lit-webpack/src/sprite/index.js Normal file
View File

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

6
integration/apps/lit-webpack/src/sprite/svg-sprite.config.json Normal file
View File

@@ -0,0 +1,6 @@
{
"mode": "lit@webpack",
"name": "icons",
"input": "../../../../fixtures/icons/check.svg",
"generatedNotice": false
}

12
integration/apps/lit-webpack/tsconfig.json Normal file
View File

@@ -0,0 +1,12 @@
{
"compilerOptions": {
"target": "ES2022",
"module": "ESNext",
"moduleResolution": "Bundler",
"lib": ["ES2022", "DOM"],
"strict": true,
"noEmit": true,
"skipLibCheck": true
},
"include": ["src/generated-contract.typecheck.ts"]
}

26
integration/apps/lit-webpack/webpack.config.js Normal file
View File

@@ -0,0 +1,26 @@
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.js',
output: {
path: path.join(root, 'dist'),
filename: 'assets/app.[contenthash].js',
assetModuleFilename: 'assets/[name].[contenthash][ext]',
clean: true,
},
module: {
rules: [
{
test: /\.css$/,
resourceQuery: /inline/,
type: 'asset/source',
},
],
},
plugins: [new HtmlWebpackPlugin({ template: './index.html' })],
}

37
integration/apps/nuxt-vite/app/app.vue Normal file
View File

@@ -0,0 +1,37 @@
<script setup>
import { IconsIcon } from '../src/sprite/index.js'
</script>
<template>
<main>
<h1>Nuxt + Vite</h1>
<IconsIcon
data-testid="icon"
data-app="nuxt-vite"
icon="check"
aria-label="Check icon"
width="64"
height="64"
style="--icon-color-1: #16a34a"
/>
<SpriteViewer />
</main>
</template>
<style>
:root {
font-family: system-ui, sans-serif;
color: #172033;
background: #fff;
}
body {
margin: 0;
padding: 40px;
}
gromlab-sprite-viewer {
display: block;
margin-top: 32px;
}
</style>

16
integration/apps/nuxt-vite/app/components/SpriteViewer.client.vue Normal file
View File

@@ -0,0 +1,16 @@
<script setup>
import { defineSpriteViewerElement } from '@gromlab/svg-sprites/viewer'
defineSpriteViewerElement()
const viewerSources = [
() => import('../../src/sprite/.svg-sprite/svg-sprite.manifest.js'),
]
</script>
<template>
<gromlab-sprite-viewer
:sources="viewerSources"
viewer-title="Nuxt Vite Viewer"
/>
</template>

15
integration/apps/nuxt-vite/app/generated-contract.typecheck.ts Normal file
View File

@@ -0,0 +1,15 @@
import { IconsIcon } from '../src/sprite/.svg-sprite/index.js'
import type { IconsIconName, IconsIconProps } from '../src/sprite/.svg-sprite/index.js'
const iconName: IconsIconName = 'check'
const iconProps: IconsIconProps = {
icon: iconName,
width: 64,
style: { '--icon-color-1': '#16a34a' },
}
void [IconsIcon, iconProps]
// @ts-expect-error Generated icon names form a literal union.
const missingIcon: IconsIconName = 'missing'
void missingIcon

9
integration/apps/nuxt-vite/nuxt.config.ts Normal file
View File

@@ -0,0 +1,9 @@
export default defineNuxtConfig({
compatibilityDate: '2026-07-01',
devtools: { enabled: false },
vue: {
compilerOptions: {
isCustomElement: (tag) => tag === 'gromlab-sprite-viewer',
},
},
})

22
integration/apps/nuxt-vite/package.json Normal file
View File

@@ -0,0 +1,22 @@
{
"name": "@svg-sprites-fixtures/nuxt-vite",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"sprites": "svg-sprites src/sprite/svg-sprite.config.ts",
"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"
}
}

2
integration/apps/nuxt-vite/src/sprite/.gitignore vendored Normal file
View File

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

1
integration/apps/nuxt-vite/src/sprite/index.d.ts vendored Normal file
View File

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

1
integration/apps/nuxt-vite/src/sprite/index.js Normal file
View File

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

8
integration/apps/nuxt-vite/src/sprite/svg-sprite.config.ts Normal file
View File

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

37
integration/apps/nuxt-webpack/app/app.vue Normal file
View File

@@ -0,0 +1,37 @@
<script setup>
import { IconsIcon } from '../src/sprite/index.js'
</script>
<template>
<main>
<h1>Nuxt + Webpack</h1>
<IconsIcon
data-testid="icon"
data-app="nuxt-webpack"
icon="check"
aria-label="Check icon"
width="64"
height="64"
style="--icon-color-1: #16a34a"
/>
<SpriteViewer />
</main>
</template>
<style>
:root {
font-family: system-ui, sans-serif;
color: #172033;
background: #fff;
}
body {
margin: 0;
padding: 40px;
}
gromlab-sprite-viewer {
display: block;
margin-top: 32px;
}
</style>

16
integration/apps/nuxt-webpack/app/components/SpriteViewer.client.vue Normal file
View File

@@ -0,0 +1,16 @@
<script setup>
import { defineSpriteViewerElement } from '@gromlab/svg-sprites/viewer'
defineSpriteViewerElement()
const viewerSources = [
() => import('../../src/sprite/.svg-sprite/svg-sprite.manifest.js'),
]
</script>
<template>
<gromlab-sprite-viewer
:sources="viewerSources"
viewer-title="Nuxt Webpack Viewer"
/>
</template>

15
integration/apps/nuxt-webpack/app/generated-contract.typecheck.ts Normal file
View File

@@ -0,0 +1,15 @@
import { IconsIcon } from '../src/sprite/.svg-sprite/index.js'
import type { IconsIconName, IconsIconProps } from '../src/sprite/.svg-sprite/index.js'
const iconName: IconsIconName = 'check'
const iconProps: IconsIconProps = {
icon: iconName,
width: 64,
style: { '--icon-color-1': '#16a34a' },
}
void [IconsIcon, iconProps]
// @ts-expect-error Generated icon names form a literal union.
const missingIcon: IconsIconName = 'missing'
void missingIcon

28
integration/apps/nuxt-webpack/nuxt.config.ts Normal file
View File

@@ -0,0 +1,28 @@
export default defineNuxtConfig({
compatibilityDate: '2026-07-01',
devtools: { enabled: false },
builder: 'webpack',
nitro: {
externals: {
inline: ['entities'],
},
},
hooks: {
'webpack:config'(configs) {
for (const config of configs) {
const rules = config.module?.rules ?? []
for (const rule of rules) {
if (rule && typeof rule === 'object' && rule.test instanceof RegExp && rule.test.test('icon.svg')) {
rule.exclude = rule.exclude ? [rule.exclude, /\.svg$/i] : /\.svg$/i
}
}
rules.unshift({ test: /\.svg$/i, type: 'asset/resource' })
}
},
},
vue: {
compilerOptions: {
isCustomElement: (tag) => tag === 'gromlab-sprite-viewer',
},
},
})

25
integration/apps/nuxt-webpack/package.json Normal file
View File

@@ -0,0 +1,25 @@
{
"name": "@svg-sprites-fixtures/nuxt-webpack",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"sprites": "svg-sprites src/sprite/svg-sprite.config.ts",
"typecheck": "nuxt typecheck",
"build": "npm run sprites && nuxt build",
"dev": "npm run sprites && nuxt dev",
"start": "node .output/server/index.mjs"
},
"dependencies": {
"entities": "7.0.1",
"nuxt": "4.3.1",
"vue": "3.5.39"
},
"devDependencies": {
"@gromlab/svg-sprites": "file:../../..",
"@nuxt/webpack-builder": "4.3.1",
"postcss-loader": "8.2.1",
"typescript": "6.0.2",
"vue-tsc": "3.3.7"
}
}

2
integration/apps/nuxt-webpack/src/sprite/.gitignore vendored Normal file
View File

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

1
integration/apps/nuxt-webpack/src/sprite/index.d.ts vendored Normal file
View File

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

1
integration/apps/nuxt-webpack/src/sprite/index.js Normal file
View File

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

8
integration/apps/nuxt-webpack/src/sprite/svg-sprite.config.ts Normal file
View File

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

12
integration/apps/preact-vite/index.html Normal file
View File

@@ -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>Preact Vite sprite fixture</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

20
integration/apps/preact-vite/package.json Normal file
View File

@@ -0,0 +1,20 @@
{
"name": "@svg-sprites-fixtures/preact-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 && npm run typecheck && vite build",
"dev": "npm run sprites && vite"
},
"dependencies": {
"preact": "10.27.2"
},
"devDependencies": {
"@gromlab/svg-sprites": "file:../../..",
"typescript": "6.0.2",
"vite": "8.1.4"
}
}

13
integration/apps/preact-vite/src/generated-contract.typecheck.ts Normal file
View File

@@ -0,0 +1,13 @@
import { IconsIcon, iconsIconNames } from './sprite/index.js'
import type { IconsIconName, IconsIconProps } from './sprite/index.js'
const iconName: IconsIconName = 'check'
const props: IconsIconProps = { icon: iconName, width: 24 }
void IconsIcon
void iconsIconNames
void props
// @ts-expect-error Generated icon names form a literal union.
const missingIcon: IconsIconName = 'missing'
void missingIcon

34
integration/apps/preact-vite/src/main.js Normal file
View File

@@ -0,0 +1,34 @@
import { h, render } from 'preact'
import '@gromlab/svg-sprites/viewer/element'
import { IconsIcon } from './sprite/index.js'
import './style.css'
const viewerSources = [
() => import('./sprite/.svg-sprite/svg-sprite.manifest.js'),
]
function App() {
const connectViewer = (viewer) => {
if (viewer) viewer.sources = viewerSources
}
return h('main', null,
h('h1', null, 'Preact + Vite'),
h(IconsIcon, {
'data-testid': 'icon',
'data-app': 'preact-vite',
icon: 'check',
'aria-label': 'Check icon',
width: 64,
height: 64,
style: { '--icon-color-1': '#16a34a' },
}),
h('gromlab-sprite-viewer', {
ref: connectViewer,
'viewer-title': 'Preact Vite Viewer',
}),
)
}
render(h(App), document.getElementById('root'))

2
integration/apps/preact-vite/src/sprite/.gitignore vendored Normal file
View File

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

1
integration/apps/preact-vite/src/sprite/index.d.ts vendored Normal file
View File

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

1
integration/apps/preact-vite/src/sprite/index.js Normal file
View File

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

8
integration/apps/preact-vite/src/sprite/svg-sprite.config.ts Normal file
View File

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

15
integration/apps/preact-vite/src/style.css Normal file
View File

@@ -0,0 +1,15 @@
:root {
font-family: system-ui, sans-serif;
color: #172033;
background: #fff;
}
body {
margin: 0;
padding: 40px;
}
gromlab-sprite-viewer {
display: block;
margin-top: 32px;
}

12
integration/apps/preact-vite/tsconfig.json Normal file
View File

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

3
integration/apps/preact-vite/vite.config.ts Normal file
View File

@@ -0,0 +1,3 @@
import { defineConfig } from 'vite'
export default defineConfig({})

25
integration/apps/preact-webpack/package.json Normal file
View File

@@ -0,0 +1,25 @@
{
"name": "@svg-sprites-fixtures/preact-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 && npm run typecheck && webpack --mode production",
"dev": "npm run sprites && webpack serve --mode development"
},
"dependencies": {
"preact": "10.27.2"
},
"devDependencies": {
"@gromlab/svg-sprites": "file:../../..",
"css-loader": "7.1.4",
"html-webpack-plugin": "5.6.7",
"style-loader": "4.0.0",
"typescript": "6.0.2",
"webpack": "5.108.4",
"webpack-cli": "7.2.1",
"webpack-dev-server": "5.2.2"
}
}

13
integration/apps/preact-webpack/src/generated-contract.typecheck.ts Normal file
View File

@@ -0,0 +1,13 @@
import { IconsIcon, iconsIconNames } from './sprite/index.js'
import type { IconsIconName, IconsIconProps } from './sprite/index.js'
const iconName: IconsIconName = 'check'
const props: IconsIconProps = { icon: iconName, width: 24 }
void IconsIcon
void iconsIconNames
void props
// @ts-expect-error Generated icon names form a literal union.
const missingIcon: IconsIconName = 'missing'
void missingIcon

34
integration/apps/preact-webpack/src/main.js Normal file
View File

@@ -0,0 +1,34 @@
import { h, render } from 'preact'
import '@gromlab/svg-sprites/viewer/element'
import { IconsIcon } from './sprite/index.js'
import './style.css'
const viewerSources = [
() => import('./sprite/.svg-sprite/svg-sprite.manifest.js'),
]
function App() {
const connectViewer = (viewer) => {
if (viewer) viewer.sources = viewerSources
}
return h('main', null,
h('h1', null, 'Preact + Webpack'),
h(IconsIcon, {
'data-testid': 'icon',
'data-app': 'preact-webpack',
icon: 'check',
'aria-label': 'Check icon',
width: 64,
height: 64,
style: { '--icon-color-1': '#16a34a' },
}),
h('gromlab-sprite-viewer', {
ref: connectViewer,
'viewer-title': 'Preact Webpack Viewer',
}),
)
}
render(h(App), document.getElementById('root'))

2
integration/apps/preact-webpack/src/sprite/.gitignore vendored Normal file
View File

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

1
integration/apps/preact-webpack/src/sprite/index.d.ts vendored Normal file
View File

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

Some files were not shown because too many files have changed in this diff Show More