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: standalone mode

Browse Source
This commit is contained in:
Сергей Громов
2026-07-14 08:34:45 +03:00
parent 3dd385bfda
commit c596f9f1c3
64 changed files with 1341 additions and 2755 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
integration/apps/vanilla-vite/index.html → integration/apps/standalone-vite/index.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vanilla Vite sprite fixture</title>
<title>Standalone Vite sprite fixture</title>
</head>
<body>
<main id="app"></main>

4
integration/apps/vanilla-vite/package.json → integration/apps/standalone-vite/package.json
View File

@@ -1,10 +1,10 @@
{
"name": "@svg-sprites-fixtures/vanilla-vite",
"name": "@svg-sprites-fixtures/standalone-vite",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"sprites": "svg-sprites --mode legacy .",
"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"

20
integration/apps/standalone-vite/src/main.ts Normal file
View File

@@ -0,0 +1,20 @@
import spriteManifest from './sprite/.svg-sprite/svg-sprite.manifest.js'
import { getIconsIconHref, iconsSpriteUrl } from './sprite'
import './style.css'
const check = spriteManifest.icons.find((icon) => icon.name === 'check')
if (!check || spriteManifest.spriteUrl !== iconsSpriteUrl) {
throw new Error('Generated Vite facade and manifest disagree.')
}
document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
<h1>Standalone + Vite</h1>
<svg
data-testid="icon"
data-app="standalone-vite"
viewBox="${check.viewBox ?? '0 0 24 24'}"
aria-label="Check icon"
>
<use href="${getIconsIconHref('check')}"></use>
</svg>
`

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

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

7
integration/apps/standalone-vite/src/sprite/index.ts Normal file
View File

@@ -0,0 +1,7 @@
export {
getIconsIconHref,
iconsIconIds,
iconsIconNames,
iconsSpriteUrl,
} from './.svg-sprite/index.js'
export type { IconsIconName } from './.svg-sprite/index.js'

8
integration/apps/standalone-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: 'standalone@vite',
name: 'icons',
inputFiles: ['../../../../fixtures/icons/check.svg'],
generatedNotice: false,
})

8
integration/apps/vanilla-vite/src/style.css → integration/apps/standalone-vite/src/style.css
View File

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

0
integration/apps/vanilla-vite/src/vite-env.d.ts → integration/apps/standalone-vite/src/vite-env.d.ts vendored
View File

0
integration/apps/vanilla-vite/tsconfig.json → integration/apps/standalone-vite/tsconfig.json
View File

11
integration/apps/standalone-webpack/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>Standalone Webpack sprite fixture</title>
</head>
<body>
<main id="app"></main>
</body>
</html>

21
integration/apps/standalone-webpack/package.json Normal file
View File

@@ -0,0 +1,21 @@
{
"name": "@svg-sprites-fixtures/standalone-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"
},
"devDependencies": {
"@gromlab/svg-sprites": "file:../../..",
"html-webpack-plugin": "5.6.7",
"ts-loader": "9.6.2",
"typescript": "6.0.2",
"webpack": "5.108.4",
"webpack-cli": "7.2.1",
"webpack-dev-server": "5.2.2"
}
}

20
integration/apps/standalone-webpack/src/main.ts Normal file
View File

@@ -0,0 +1,20 @@
import spriteManifest from './sprite/.svg-sprite/svg-sprite.manifest.js'
import { getIconsIconHref, iconsSpriteUrl } from './sprite'
const check = spriteManifest.icons.find((icon) => icon.name === 'check')
if (!check || spriteManifest.spriteUrl !== iconsSpriteUrl) {
throw new Error('Generated Webpack facade and manifest disagree.')
}
document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
<h1>Standalone + Webpack</h1>
<svg
data-testid="icon"
data-app="standalone-webpack"
viewBox="${check.viewBox ?? '0 0 24 24'}"
aria-label="Check icon"
style="width:64px;height:64px;color:#16a34a;--icon-color-1:#16a34a"
>
<use href="${getIconsIconHref('check')}"></use>
</svg>
`

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

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

7
integration/apps/standalone-webpack/src/sprite/index.ts Normal file
View File

@@ -0,0 +1,7 @@
export {
getIconsIconHref,
iconsIconIds,
iconsIconNames,
iconsSpriteUrl,
} from './.svg-sprite/index.js'
export type { IconsIconName } from './.svg-sprite/index.js'

8
integration/apps/standalone-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: 'standalone@webpack',
name: 'icons',
inputFiles: ['../../../../fixtures/icons/check.svg'],
generatedNotice: false,
})

11
integration/apps/standalone-webpack/tsconfig.json Normal file
View File

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

31
integration/apps/standalone-webpack/webpack.config.js Normal file
View File

@@ -0,0 +1,31 @@
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.ts',
output: {
path: path.join(root, 'dist'),
filename: 'assets/app.[contenthash].js',
assetModuleFilename: 'assets/[name].[contenthash][ext]',
clean: true,
},
resolve: {
extensions: ['.ts', '.js'],
},
module: {
rules: [
{
test: /\.ts$/,
exclude: /node_modules/,
use: 'ts-loader',
},
],
},
plugins: [
new HtmlWebpackPlugin({ template: './index.html' }),
],
}

13
integration/apps/standalone/build.mjs Normal file
View File

@@ -0,0 +1,13 @@
import fs from 'node:fs'
fs.rmSync(new URL('./dist/', import.meta.url), { recursive: true, force: true })
fs.mkdirSync(new URL('./dist/app-icons/', import.meta.url), { recursive: true })
fs.copyFileSync(new URL('./index.html', import.meta.url), new URL('./dist/index.html', import.meta.url))
fs.copyFileSync(
new URL('./src/sprite/.svg-sprite/sprite.svg', import.meta.url),
new URL('./dist/app-icons/sprite.svg', import.meta.url),
)
fs.copyFileSync(
new URL('./src/sprite/.svg-sprite/svg-sprite.manifest.json', import.meta.url),
new URL('./dist/app-icons/manifest.json', import.meta.url),
)

20
integration/apps/standalone/index.html Normal file
View File

@@ -0,0 +1,20 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Standalone sprite fixture</title>
<style>
body { margin: 0; padding: 40px; font-family: system-ui, sans-serif; }
[data-testid="icon"] { width: 64px; height: 64px; color: #16a34a; --icon-color-1: #16a34a; }
</style>
</head>
<body>
<main>
<h1>Standalone</h1>
<svg data-testid="icon" data-app="standalone" viewBox="0 0 24 24" aria-label="Check icon">
<use href="/app-icons/sprite.svg#check"></use>
</svg>
</main>
</body>
</html>

13
integration/apps/standalone/package.json Normal file
View File

@@ -0,0 +1,13 @@
{
"name": "@svg-sprites-fixtures/standalone",
"private": true,
"version": "0.0.0",
"scripts": {
"sprites": "svg-sprites src/sprite/svg-sprite.config.json",
"build": "npm run sprites && node build.mjs",
"dev": "npm run build && node ../../scripts/serve-static.mjs dist 4173"
},
"devDependencies": {
"@gromlab/svg-sprites": "file:../../.."
}
}

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

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

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

@@ -0,0 +1,6 @@
{
"mode": "standalone",
"name": "app-icons",
"inputFiles": ["../../../../fixtures/icons/check.svg"],
"generatedNotice": false
}

8
integration/apps/vanilla-vite/src/main.ts
View File

@@ -1,8 +0,0 @@
import './style.css'
document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
<h1>Vanilla + Vite</h1>
<svg data-testid="icon" data-app="vanilla-vite" aria-label="Check icon" viewBox="0 0 24 24">
<use href="/sprites/icons.sprite.svg#check"></use>
</svg>
`

11
integration/apps/vanilla-vite/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',
},
],
}