rspack-plugin-svg-sprite 1.2.0 → 1.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +1 -1
- package/README.md +233 -2
- package/client.d.ts +13 -0
- package/dist/loader.d.ts +1 -0
- package/dist/loader.d.ts.map +1 -1
- package/dist/loader.js +38 -5
- package/dist/loader.js.map +1 -1
- package/dist/plugin.d.ts.map +1 -1
- package/dist/plugin.js +37 -5
- package/dist/plugin.js.map +1 -1
- package/dist/rsbuild.d.ts +16 -0
- package/dist/rsbuild.d.ts.map +1 -0
- package/dist/rsbuild.js +98 -0
- package/dist/rsbuild.js.map +1 -0
- package/dist/runtime/browser-sprite.d.ts.map +1 -1
- package/dist/runtime/browser-sprite.js +4 -2
- package/dist/runtime/browser-sprite.js.map +1 -1
- package/package.json +24 -3
package/LICENSE
CHANGED
package/README.md
CHANGED
|
@@ -7,16 +7,25 @@
|
|
|
7
7
|
[](https://www.npmjs.com/package/rspack-plugin-svg-sprite)
|
|
8
8
|
[](https://www.npmjs.com/package/rspack-plugin-svg-sprite)
|
|
9
9
|
[](https://github.com/yichenzhu1337/rspack-plugin-svg-sprite/blob/main/LICENSE)
|
|
10
|
+
[](https://bundlephobia.com/package/rspack-plugin-svg-sprite)
|
|
10
11
|
|
|
11
|
-
**[Live Demo](https://yichenzhu1337.github.io/rspack-plugin-svg-sprite/)**
|
|
12
|
+
**[Live Demo](https://yichenzhu1337.github.io/rspack-plugin-svg-sprite/)** | **[npm](https://www.npmjs.com/package/rspack-plugin-svg-sprite)** | **[npm trends](https://npmtrends.com/rspack-plugin-svg-sprite-vs-svg-sprite-loader)**
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
npm install rspack-plugin-svg-sprite -D
|
|
16
|
+
```
|
|
12
17
|
|
|
13
18
|
---
|
|
14
19
|
|
|
20
|
+
## Why SVG sprites?
|
|
21
|
+
|
|
22
|
+
Individual SVG files mean one HTTP request per icon — 50 icons = 50 requests. Inlining SVGs directly into JSX bloats your bundle with duplicated markup. SVG sprites solve both problems: all icons are combined into a single file (or a single hidden DOM element), and each icon is referenced by `<use href="#id" />` — one request, zero duplication, full CSS styling support, and resolution-independent rendering at any size.
|
|
23
|
+
|
|
15
24
|
## What is this?
|
|
16
25
|
|
|
17
26
|
`rspack-plugin-svg-sprite` lets you import `.svg` files in your Rspack (or Webpack 5) project and automatically combine them into an SVG sprite sheet — either inlined in the DOM or extracted as an external `.svg` file.
|
|
18
27
|
|
|
19
|
-
It was created because the popular [`svg-sprite-loader`](https://github.com/JetBrains/svg-sprite-loader) depends on internal Webpack APIs (`NormalModule.getCompilationHooks`, `compilation.hooks.additionalAssets`, etc.) that do not exist in Rspack. This package reimplements the same functionality using Rspack-compatible APIs while keeping the exact same exported symbol shape (`id`, `viewBox`, `url`, `content`), so your existing component code works without changes.
|
|
28
|
+
It was created because the popular [`svg-sprite-loader`](https://github.com/JetBrains/svg-sprite-loader) depends on internal Webpack APIs (`NormalModule.getCompilationHooks`, `compilation.hooks.additionalAssets`, etc.) that do not exist in Rspack ([rspack#11609](https://github.com/web-infra-dev/rspack/issues/11609)). This package reimplements the same functionality using Rspack-compatible APIs while keeping the exact same exported symbol shape (`id`, `viewBox`, `url`, `content`), so your existing component code works without changes.
|
|
20
29
|
|
|
21
30
|
## Features
|
|
22
31
|
|
|
@@ -34,6 +43,10 @@ It was created because the popular [`svg-sprite-loader`](https://github.com/JetB
|
|
|
34
43
|
|
|
35
44
|
```bash
|
|
36
45
|
npm install rspack-plugin-svg-sprite -D
|
|
46
|
+
# or
|
|
47
|
+
pnpm add rspack-plugin-svg-sprite -D
|
|
48
|
+
# or
|
|
49
|
+
yarn add rspack-plugin-svg-sprite -D
|
|
37
50
|
```
|
|
38
51
|
|
|
39
52
|
### Configure (inline mode)
|
|
@@ -45,6 +58,7 @@ module.exports = {
|
|
|
45
58
|
rules: [
|
|
46
59
|
{
|
|
47
60
|
test: /\.svg$/,
|
|
61
|
+
type: 'javascript/auto',
|
|
48
62
|
loader: 'rspack-plugin-svg-sprite/loader',
|
|
49
63
|
options: {
|
|
50
64
|
symbolId: '[name]',
|
|
@@ -55,6 +69,8 @@ module.exports = {
|
|
|
55
69
|
};
|
|
56
70
|
```
|
|
57
71
|
|
|
72
|
+
> **Important:** The `type: 'javascript/auto'` is required to prevent rspack/webpack's built-in asset module handling from intercepting `.svg` files before the loader runs. Without it, the loader may silently fail to process your SVGs.
|
|
73
|
+
|
|
58
74
|
### Use in your components
|
|
59
75
|
|
|
60
76
|
```jsx
|
|
@@ -71,6 +87,42 @@ import logo from './logo.svg';
|
|
|
71
87
|
|
|
72
88
|
That's it. Every imported SVG is automatically registered as a `<symbol>` in a hidden sprite and referenced by `#id`.
|
|
73
89
|
|
|
90
|
+
### TypeScript
|
|
91
|
+
|
|
92
|
+
This package ships with a client type declaration. Add it to your `tsconfig.json` so `import icon from './icon.svg'` is fully typed:
|
|
93
|
+
|
|
94
|
+
```jsonc
|
|
95
|
+
// tsconfig.json
|
|
96
|
+
{
|
|
97
|
+
"compilerOptions": {
|
|
98
|
+
"types": ["rspack-plugin-svg-sprite/client"],
|
|
99
|
+
},
|
|
100
|
+
}
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
This gives you autocompletion for `id`, `viewBox`, `url`, and `content` on every SVG import.
|
|
104
|
+
|
|
105
|
+
<details>
|
|
106
|
+
<summary>Alternative: manual declaration file</summary>
|
|
107
|
+
|
|
108
|
+
If you prefer, create a `svg.d.ts` file instead:
|
|
109
|
+
|
|
110
|
+
```ts
|
|
111
|
+
declare module '*.svg' {
|
|
112
|
+
const symbol: {
|
|
113
|
+
id: string;
|
|
114
|
+
viewBox: string;
|
|
115
|
+
url: string;
|
|
116
|
+
content: string;
|
|
117
|
+
};
|
|
118
|
+
export default symbol;
|
|
119
|
+
}
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
Make sure this file is included by your `tsconfig.json` (e.g., in the `include` array or alongside your source files).
|
|
123
|
+
|
|
124
|
+
</details>
|
|
125
|
+
|
|
74
126
|
## Extract Mode
|
|
75
127
|
|
|
76
128
|
To emit SVGs as an external `.svg` sprite file instead of inlining them, enable extract mode and add the plugin:
|
|
@@ -84,6 +136,7 @@ module.exports = {
|
|
|
84
136
|
rules: [
|
|
85
137
|
{
|
|
86
138
|
test: /\.svg$/,
|
|
139
|
+
type: 'javascript/auto',
|
|
87
140
|
loader: 'rspack-plugin-svg-sprite/loader',
|
|
88
141
|
options: {
|
|
89
142
|
extract: true,
|
|
@@ -147,6 +200,86 @@ Every `import icon from './icon.svg'` returns an object with:
|
|
|
147
200
|
|
|
148
201
|
This matches `svg-sprite-loader`'s export shape exactly, so migrating requires no component changes.
|
|
149
202
|
|
|
203
|
+
## Rsbuild Integration
|
|
204
|
+
|
|
205
|
+
If you're using [Rsbuild](https://rsbuild.dev/), use the built-in Rsbuild plugin for one-line setup:
|
|
206
|
+
|
|
207
|
+
```js
|
|
208
|
+
// rsbuild.config.js
|
|
209
|
+
const { pluginSvgSprite } = require('rspack-plugin-svg-sprite/rsbuild');
|
|
210
|
+
|
|
211
|
+
module.exports = {
|
|
212
|
+
plugins: [
|
|
213
|
+
pluginSvgSprite({
|
|
214
|
+
symbolId: 'icon-[name]',
|
|
215
|
+
extract: true,
|
|
216
|
+
spriteFilename: 'sprites/icons.svg',
|
|
217
|
+
}),
|
|
218
|
+
],
|
|
219
|
+
};
|
|
220
|
+
```
|
|
221
|
+
|
|
222
|
+
The Rsbuild plugin handles the loader rule, `type: 'javascript/auto'`, and the `SvgSpritePlugin` automatically.
|
|
223
|
+
|
|
224
|
+
## Framework Recipes
|
|
225
|
+
|
|
226
|
+
### Next.js (with next-rspack)
|
|
227
|
+
|
|
228
|
+
```js
|
|
229
|
+
// next.config.js
|
|
230
|
+
const { SvgSpritePlugin } = require('rspack-plugin-svg-sprite');
|
|
231
|
+
|
|
232
|
+
module.exports = {
|
|
233
|
+
webpack(config) {
|
|
234
|
+
// Remove Next.js default SVG handling
|
|
235
|
+
const fileLoaderRule = config.module.rules.find((rule) => rule.test?.test?.('.svg'));
|
|
236
|
+
if (fileLoaderRule) fileLoaderRule.exclude = /\.svg$/;
|
|
237
|
+
|
|
238
|
+
config.module.rules.push({
|
|
239
|
+
test: /\.svg$/,
|
|
240
|
+
type: 'javascript/auto',
|
|
241
|
+
loader: 'rspack-plugin-svg-sprite/loader',
|
|
242
|
+
options: { symbolId: 'icon-[name]', extract: true },
|
|
243
|
+
});
|
|
244
|
+
|
|
245
|
+
config.plugins.push(new SvgSpritePlugin({ plainSprite: true }));
|
|
246
|
+
return config;
|
|
247
|
+
},
|
|
248
|
+
};
|
|
249
|
+
```
|
|
250
|
+
|
|
251
|
+
### Vue + Rspack
|
|
252
|
+
|
|
253
|
+
```js
|
|
254
|
+
// rspack.config.js
|
|
255
|
+
const { SvgSpritePlugin } = require('rspack-plugin-svg-sprite');
|
|
256
|
+
|
|
257
|
+
module.exports = {
|
|
258
|
+
module: {
|
|
259
|
+
rules: [
|
|
260
|
+
{
|
|
261
|
+
test: /\.svg$/,
|
|
262
|
+
type: 'javascript/auto',
|
|
263
|
+
loader: 'rspack-plugin-svg-sprite/loader',
|
|
264
|
+
options: { symbolId: '[name]' },
|
|
265
|
+
},
|
|
266
|
+
],
|
|
267
|
+
},
|
|
268
|
+
};
|
|
269
|
+
```
|
|
270
|
+
|
|
271
|
+
```vue
|
|
272
|
+
<template>
|
|
273
|
+
<svg :viewBox="icon.viewBox">
|
|
274
|
+
<use :href="icon.url" />
|
|
275
|
+
</svg>
|
|
276
|
+
</template>
|
|
277
|
+
|
|
278
|
+
<script setup>
|
|
279
|
+
import icon from './icon.svg';
|
|
280
|
+
</script>
|
|
281
|
+
```
|
|
282
|
+
|
|
150
283
|
## Migrating from svg-sprite-loader
|
|
151
284
|
|
|
152
285
|
```diff
|
|
@@ -159,6 +292,7 @@ module.exports = {
|
|
|
159
292
|
rules: [
|
|
160
293
|
{
|
|
161
294
|
test: /\.svg$/,
|
|
295
|
+
+ type: 'javascript/auto',
|
|
162
296
|
- loader: 'svg-sprite-loader',
|
|
163
297
|
+ loader: 'rspack-plugin-svg-sprite/loader',
|
|
164
298
|
options: {
|
|
@@ -177,6 +311,45 @@ module.exports = {
|
|
|
177
311
|
|
|
178
312
|
Your component code stays the same — the exported symbol object has the identical shape (`id`, `viewBox`, `url`, `content`).
|
|
179
313
|
|
|
314
|
+
## Migrating from `asset/resource`
|
|
315
|
+
|
|
316
|
+
If you're currently using rspack/webpack's built-in `asset/resource` type to handle SVGs (common in webpack 5+ / rspack projects), you can replace it with this plugin to get proper SVG sprite support:
|
|
317
|
+
|
|
318
|
+
```diff
|
|
319
|
+
// rspack.config.js
|
|
320
|
+
+const { SvgSpritePlugin } = require('rspack-plugin-svg-sprite');
|
|
321
|
+
|
|
322
|
+
module.exports = {
|
|
323
|
+
module: {
|
|
324
|
+
rules: [
|
|
325
|
+
{
|
|
326
|
+
test: /\.svg$/,
|
|
327
|
+
- type: 'asset/resource',
|
|
328
|
+
- generator: {
|
|
329
|
+
- filename: 'images/icons/[name].[contenthash][ext]',
|
|
330
|
+
- },
|
|
331
|
+
+ type: 'javascript/auto',
|
|
332
|
+
+ loader: 'rspack-plugin-svg-sprite/loader',
|
|
333
|
+
+ options: {
|
|
334
|
+
+ extract: true,
|
|
335
|
+
+ symbolId: '[name]',
|
|
336
|
+
+ spriteFilename: 'sprite.svg',
|
|
337
|
+
+ },
|
|
338
|
+
},
|
|
339
|
+
],
|
|
340
|
+
},
|
|
341
|
+
+ plugins: [
|
|
342
|
+
+ new SvgSpritePlugin({ plainSprite: true }),
|
|
343
|
+
+ ],
|
|
344
|
+
};
|
|
345
|
+
```
|
|
346
|
+
|
|
347
|
+
**Key points:**
|
|
348
|
+
|
|
349
|
+
- `type: 'javascript/auto'` is **required** — it overrides the previous `asset/resource` handling and lets the loader process SVGs as JavaScript modules.
|
|
350
|
+
- The sprite file is emitted to your output directory (e.g., `dist/sprite.svg`).
|
|
351
|
+
- If you were using a separate CLI tool (like `svg-sprite`) to generate sprites as a post-build step, you can remove that — the plugin handles everything inside the rspack build pipeline.
|
|
352
|
+
|
|
180
353
|
## How It Works
|
|
181
354
|
|
|
182
355
|
### Inline Mode
|
|
@@ -192,6 +365,25 @@ Your component code stays the same — the exported symbol object has the identi
|
|
|
192
365
|
2. During Rspack's `processAssets` stage, the plugin collects all registered symbols and emits a combined `.svg` sprite file.
|
|
193
366
|
3. The exported JS module contains the external file URL (e.g., `/sprites/icons.svg#symbolId`).
|
|
194
367
|
|
|
368
|
+
## Alternatives & Comparison
|
|
369
|
+
|
|
370
|
+
Looking for the right SVG solution for Rspack? Here's how the options compare:
|
|
371
|
+
|
|
372
|
+
| Feature | rspack-plugin-svg-sprite | svg-sprite-loader | @svgr/webpack | @rsbuild/plugin-svgr | vite-plugin-svg-icons |
|
|
373
|
+
| --------------------- | ------------------------ | --------------------------- | ---------------- | -------------------- | --------------------- |
|
|
374
|
+
| **Rspack support** | Native | No (uses Webpack internals) | Via config | Rsbuild only | No (Vite only) |
|
|
375
|
+
| **Approach** | SVG sprites (`<use>`) | SVG sprites (`<use>`) | React components | React components | SVG sprites |
|
|
376
|
+
| **Inline mode** | Yes | Yes | N/A | N/A | Yes |
|
|
377
|
+
| **Extract mode** | Yes | Yes | N/A | N/A | No |
|
|
378
|
+
| **Webpack 5 support** | Yes | Yes | Yes | No | No |
|
|
379
|
+
| **Runtime deps** | Zero | 1 | Several | Several | Several |
|
|
380
|
+
| **Maintained** | Yes | No (archived) | Yes | Yes | Yes |
|
|
381
|
+
| **Drop-in migration** | — | Yes (same API) | Different API | Different API | Different API |
|
|
382
|
+
|
|
383
|
+
**When to use SVG sprites** (this plugin): You want icons combined into a single file with `<use href="#id">` references — optimal for large icon sets, full CSS styling control, and caching. Best when migrating from `svg-sprite-loader`.
|
|
384
|
+
|
|
385
|
+
**When to use SVGR**: You want each SVG as a React component with props for color, size, etc. Better for SVGs that need dynamic manipulation via React props rather than CSS.
|
|
386
|
+
|
|
195
387
|
## Compatibility
|
|
196
388
|
|
|
197
389
|
| Bundler | Version | Status |
|
|
@@ -218,6 +410,45 @@ pnpm dev:rspack # http://localhost:3000
|
|
|
218
410
|
pnpm dev:webpack # http://localhost:4000
|
|
219
411
|
```
|
|
220
412
|
|
|
413
|
+
## Troubleshooting
|
|
414
|
+
|
|
415
|
+
### Sprite file not emitted / icons not rendering
|
|
416
|
+
|
|
417
|
+
**Symptom:** The build succeeds with no errors, but `sprite.svg` is not in the output directory and SVG icons don't render.
|
|
418
|
+
|
|
419
|
+
**Cause:** rspack/webpack's built-in asset module handling is intercepting `.svg` files before the loader runs.
|
|
420
|
+
|
|
421
|
+
**Fix:** Add `type: 'javascript/auto'` to your SVG rule:
|
|
422
|
+
|
|
423
|
+
```js
|
|
424
|
+
{
|
|
425
|
+
test: /\.svg$/,
|
|
426
|
+
type: 'javascript/auto', // ← Add this
|
|
427
|
+
loader: 'rspack-plugin-svg-sprite/loader',
|
|
428
|
+
options: { extract: true, symbolId: '[name]' },
|
|
429
|
+
}
|
|
430
|
+
```
|
|
431
|
+
|
|
432
|
+
### Warning: "SvgSpritePlugin is registered but no SVG symbols were collected"
|
|
433
|
+
|
|
434
|
+
This means the plugin is in your `plugins` array but no SVGs went through the loader. Common causes:
|
|
435
|
+
|
|
436
|
+
1. **Missing `type: 'javascript/auto'`** on the loader rule (see above).
|
|
437
|
+
2. **`include`/`exclude` filters** on the rule don't match your SVG file paths.
|
|
438
|
+
3. **No SVG imports** in your code — at least one `.svg` file must be imported for the loader to process it.
|
|
439
|
+
|
|
440
|
+
### Warning: "Extract mode is enabled but SvgSpritePlugin was not found"
|
|
441
|
+
|
|
442
|
+
This means the loader is running in extract mode (`extract: true`) but `SvgSpritePlugin` isn't in the `plugins` array. Add it:
|
|
443
|
+
|
|
444
|
+
```js
|
|
445
|
+
const { SvgSpritePlugin } = require('rspack-plugin-svg-sprite');
|
|
446
|
+
|
|
447
|
+
module.exports = {
|
|
448
|
+
plugins: [new SvgSpritePlugin()],
|
|
449
|
+
};
|
|
450
|
+
```
|
|
451
|
+
|
|
221
452
|
## Contributing
|
|
222
453
|
|
|
223
454
|
Contributions are welcome! See [CONTRIBUTING.md](CONTRIBUTING.md) for development setup, project structure, and guidelines.
|
package/client.d.ts
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
declare module '*.svg' {
|
|
2
|
+
const symbol: {
|
|
3
|
+
/** The symbol ID inside the sprite (e.g., "icon-home") */
|
|
4
|
+
id: string;
|
|
5
|
+
/** The original SVG viewBox attribute (e.g., "0 0 24 24") */
|
|
6
|
+
viewBox: string;
|
|
7
|
+
/** Fragment reference (inline: "#icon-home") or full URL (extract: "/sprites/icons.svg#icon-home") */
|
|
8
|
+
url: string;
|
|
9
|
+
/** Raw `<symbol>` markup */
|
|
10
|
+
content: string;
|
|
11
|
+
};
|
|
12
|
+
export default symbol;
|
|
13
|
+
}
|
package/dist/loader.d.ts
CHANGED
|
@@ -11,6 +11,7 @@ interface LoaderContext {
|
|
|
11
11
|
resourcePath: string;
|
|
12
12
|
getOptions?: () => LoaderOptions;
|
|
13
13
|
_compilation?: any;
|
|
14
|
+
_compiler?: any;
|
|
14
15
|
}
|
|
15
16
|
export declare function parseViewBox(svgContent: string): string;
|
|
16
17
|
export declare function extractSvgInner(svgContent: string): string;
|
package/dist/loader.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"loader.d.ts","sourceRoot":"","sources":["../src/loader.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,6BAA6B,CAAC;AAEpD,UAAU,aAAa;IACrB,QAAQ,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,YAAY,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;IACvD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,UAAU,aAAa;IACrB,SAAS,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,aAAa,CAAC;IACjC,YAAY,CAAC,EAAE,GAAG,CAAC;
|
|
1
|
+
{"version":3,"file":"loader.d.ts","sourceRoot":"","sources":["../src/loader.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,6BAA6B,CAAC;AAEpD,UAAU,aAAa;IACrB,QAAQ,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,YAAY,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;IACvD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,UAAU,aAAa;IACrB,SAAS,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,aAAa,CAAC;IACjC,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,SAAS,CAAC,EAAE,GAAG,CAAC;CACjB;AAED,wBAAgB,YAAY,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAgBvD;AAED,wBAAgB,eAAe,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAG1D;AAED,wBAAgB,eAAe,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAmB1E;AAED,wBAAgB,gBAAgB,CAAC,YAAY,EAAE,MAAM,EAAE,OAAO,EAAE,aAAa,GAAG,MAAM,CAerF;AAmBD,iBAAS,eAAe,CAAC,IAAI,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,CAyFrE;AAED,QAAA,MAAM,MAAM;;CAAgD,CAAC;AAC7D,eAAe,MAAM,CAAC"}
|
package/dist/loader.js
CHANGED
|
@@ -41,8 +41,19 @@ exports.generateSymbolId = generateSymbolId;
|
|
|
41
41
|
const path = __importStar(require("path"));
|
|
42
42
|
exports.NAMESPACE = 'rspack-plugin-svg-sprite';
|
|
43
43
|
function parseViewBox(svgContent) {
|
|
44
|
-
|
|
45
|
-
|
|
44
|
+
// Extract the root <svg> opening tag to avoid matching attributes on child elements
|
|
45
|
+
const svgTagMatch = svgContent.match(/<svg([^>]*)>/i);
|
|
46
|
+
const svgTag = svgTagMatch ? svgTagMatch[1] : '';
|
|
47
|
+
const match = svgTag.match(/viewBox=["']([^"']+)["']/);
|
|
48
|
+
if (match)
|
|
49
|
+
return match[1];
|
|
50
|
+
// Derive viewBox from width/height attributes on the root <svg> tag only
|
|
51
|
+
const widthMatch = svgTag.match(/\bwidth=["'](\d+(?:\.\d+)?)(?:px)?["']/);
|
|
52
|
+
const heightMatch = svgTag.match(/\bheight=["'](\d+(?:\.\d+)?)(?:px)?["']/);
|
|
53
|
+
if (widthMatch && heightMatch) {
|
|
54
|
+
return '0 0 ' + widthMatch[1] + ' ' + heightMatch[1];
|
|
55
|
+
}
|
|
56
|
+
return '0 0 24 24';
|
|
46
57
|
}
|
|
47
58
|
function extractSvgInner(svgContent) {
|
|
48
59
|
const innerMatch = svgContent.match(/<svg[^>]*>([\s\S]*)<\/svg>/i);
|
|
@@ -54,10 +65,15 @@ function extractSvgAttrs(svgContent) {
|
|
|
54
65
|
if (!svgTagMatch)
|
|
55
66
|
return attrs;
|
|
56
67
|
const attrString = svgTagMatch[1];
|
|
57
|
-
|
|
68
|
+
// Match simple attributes but also capture any namespace prefix (e.g. xml:space, xmlns:xlink)
|
|
69
|
+
const attrRegex = /([\w:-]+)=["']([^"']*?)["']/g;
|
|
58
70
|
let match;
|
|
59
71
|
while ((match = attrRegex.exec(attrString)) !== null) {
|
|
60
|
-
const
|
|
72
|
+
const raw = match[1];
|
|
73
|
+
// Skip namespaced attributes (xml:space, xmlns:xlink) and known non-visual attrs
|
|
74
|
+
if (raw.includes(':'))
|
|
75
|
+
continue;
|
|
76
|
+
const name = raw.toLowerCase();
|
|
61
77
|
if (name !== 'xmlns' && name !== 'version' && name !== 'class' && name !== 'style') {
|
|
62
78
|
attrs[name] = match[2];
|
|
63
79
|
}
|
|
@@ -119,7 +135,16 @@ function svgSpriteLoader(content) {
|
|
|
119
135
|
const spriteModulePath = path.join(runtimeDir, 'browser-sprite').replace(/\\/g, '\\\\');
|
|
120
136
|
if (extract) {
|
|
121
137
|
const spriteFilename = options.spriteFilename || 'sprite.svg';
|
|
122
|
-
|
|
138
|
+
let publicPath = options.publicPath || '';
|
|
139
|
+
if (!publicPath && this._compiler && this._compiler.options && this._compiler.options.output) {
|
|
140
|
+
const outputPublicPath = this._compiler.options.output.publicPath;
|
|
141
|
+
if (typeof outputPublicPath === 'string' && outputPublicPath !== 'auto') {
|
|
142
|
+
publicPath = outputPublicPath;
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
if (publicPath && !publicPath.endsWith('/')) {
|
|
146
|
+
publicPath += '/';
|
|
147
|
+
}
|
|
123
148
|
const symbolData = {
|
|
124
149
|
id: symbolId,
|
|
125
150
|
viewBox: viewBox,
|
|
@@ -130,6 +155,14 @@ function svgSpriteLoader(content) {
|
|
|
130
155
|
if (this._compilation && this._compilation[exports.NAMESPACE]) {
|
|
131
156
|
this._compilation[exports.NAMESPACE].addSymbol(symbolData);
|
|
132
157
|
}
|
|
158
|
+
else {
|
|
159
|
+
console.warn('[rspack-plugin-svg-sprite] Extract mode is enabled but SvgSpritePlugin was not found' +
|
|
160
|
+
' on the compilation.\n' +
|
|
161
|
+
'Add `new SvgSpritePlugin()` to your plugins array for extract mode to work.\n' +
|
|
162
|
+
'Example:\n' +
|
|
163
|
+
" const { SvgSpritePlugin } = require('rspack-plugin-svg-sprite');\n" +
|
|
164
|
+
' plugins: [new SvgSpritePlugin()]');
|
|
165
|
+
}
|
|
133
166
|
const url = publicPath + spriteFilename + '#' + symbolId;
|
|
134
167
|
let runtime = interopRequire('SpriteSymbol', symbolModulePath);
|
|
135
168
|
runtime +=
|
package/dist/loader.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"loader.js","sourceRoot":"","sources":["../src/loader.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"loader.js","sourceRoot":"","sources":["../src/loader.ts"],"names":[],"mappings":"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"}
|
package/dist/plugin.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAe,MAAM,cAAc,CAAC;AAI1D,UAAU,YAAY;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACtC;AAED,UAAU,UAAU;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAcD,cAAM,eAAe;IACZ,MAAM,EAAE,QAAQ,CAAC,YAAY,CAAC,CAAC;IAC/B,OAAO,EAAE,UAAU,EAAE,CAAC;gBAEjB,GAAG,CAAC,EAAE,YAAY;IAK9B,IAAI,SAAS,IAAI,MAAM,CAEtB;IAED,SAAS,CAAC,UAAU,EAAE,UAAU,GAAG,IAAI;
|
|
1
|
+
{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAe,MAAM,cAAc,CAAC;AAI1D,UAAU,YAAY;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACtC;AAED,UAAU,UAAU;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAcD,cAAM,eAAe;IACZ,MAAM,EAAE,QAAQ,CAAC,YAAY,CAAC,CAAC;IAC/B,OAAO,EAAE,UAAU,EAAE,CAAC;gBAEjB,GAAG,CAAC,EAAE,YAAY;IAK9B,IAAI,SAAS,IAAI,MAAM,CAEtB;IAED,SAAS,CAAC,UAAU,EAAE,UAAU,GAAG,IAAI;IA6BvC,cAAc,CAAC,OAAO,EAAE,UAAU,EAAE,GAAG,MAAM;IA2C7C,KAAK,GAAI,UAAU,QAAQ,KAAG,IAAI,CA6ChC;CACH;AAED,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,QAOvD;AAED,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE,SAAS,GAAE,CAAC,EAAE,EAAE,MAAM,KAAK,GAAa,GAAG,GAAG,CAS7F;AAED,eAAe,eAAe,CAAC"}
|
package/dist/plugin.js
CHANGED
|
@@ -19,6 +19,7 @@ class SvgSpritePlugin {
|
|
|
19
19
|
constructor(cfg) {
|
|
20
20
|
this.apply = (compiler) => {
|
|
21
21
|
compiler.hooks.thisCompilation.tap(NAMESPACE, (compilation) => {
|
|
22
|
+
this.symbols = [];
|
|
22
23
|
compilation[NAMESPACE] = this;
|
|
23
24
|
compilation.hooks.processAssets.tap({
|
|
24
25
|
name: NAMESPACE,
|
|
@@ -26,8 +27,20 @@ class SvgSpritePlugin {
|
|
|
26
27
|
? compiler.rspack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL
|
|
27
28
|
: 0,
|
|
28
29
|
}, () => {
|
|
29
|
-
if (this.symbols.length === 0)
|
|
30
|
+
if (this.symbols.length === 0) {
|
|
31
|
+
console.warn('[rspack-plugin-svg-sprite] SvgSpritePlugin is registered but no SVG symbols were' +
|
|
32
|
+
' collected during compilation.\n' +
|
|
33
|
+
'Ensure your SVG loader rule includes `type: "javascript/auto"` to prevent' +
|
|
34
|
+
" rspack/webpack's built-in asset modules from intercepting .svg files.\n" +
|
|
35
|
+
'Example:\n' +
|
|
36
|
+
' {\n' +
|
|
37
|
+
' test: /\\.svg$/,\n' +
|
|
38
|
+
' type: "javascript/auto",\n' +
|
|
39
|
+
" loader: 'rspack-plugin-svg-sprite/loader',\n" +
|
|
40
|
+
' options: { extract: true },\n' +
|
|
41
|
+
' }');
|
|
30
42
|
return;
|
|
43
|
+
}
|
|
31
44
|
const symbolsByFile = {};
|
|
32
45
|
this.symbols.forEach((sym) => {
|
|
33
46
|
const filename = sym.spriteFilename || 'sprite.svg';
|
|
@@ -52,6 +65,22 @@ class SvgSpritePlugin {
|
|
|
52
65
|
addSymbol(symbolData) {
|
|
53
66
|
const existing = this.symbols.findIndex((s) => s.id === symbolData.id);
|
|
54
67
|
if (existing >= 0) {
|
|
68
|
+
const prev = this.symbols[existing];
|
|
69
|
+
if (prev.resourcePath &&
|
|
70
|
+
symbolData.resourcePath &&
|
|
71
|
+
prev.resourcePath !== symbolData.resourcePath) {
|
|
72
|
+
console.warn('[rspack-plugin-svg-sprite] Duplicate symbol ID "' +
|
|
73
|
+
symbolData.id +
|
|
74
|
+
'" from:\n' +
|
|
75
|
+
' - ' +
|
|
76
|
+
prev.resourcePath +
|
|
77
|
+
'\n' +
|
|
78
|
+
' - ' +
|
|
79
|
+
symbolData.resourcePath +
|
|
80
|
+
'\n' +
|
|
81
|
+
'The second file will overwrite the first. Use a symbolId pattern like ' +
|
|
82
|
+
'"[folder]-[name]" to avoid collisions.');
|
|
83
|
+
}
|
|
55
84
|
this.symbols[existing] = symbolData;
|
|
56
85
|
}
|
|
57
86
|
else {
|
|
@@ -59,19 +88,22 @@ class SvgSpritePlugin {
|
|
|
59
88
|
}
|
|
60
89
|
}
|
|
61
90
|
generateSprite(symbols) {
|
|
62
|
-
let attrs = 'xmlns="http://www.w3.org/2000/svg"
|
|
91
|
+
let attrs = 'xmlns="http://www.w3.org/2000/svg"';
|
|
63
92
|
Object.keys(this.config.spriteAttrs).forEach((key) => {
|
|
64
93
|
attrs += ' ' + key + '="' + this.config.spriteAttrs[key] + '"';
|
|
65
94
|
});
|
|
95
|
+
const symbolsContent = symbols.map((s) => s.content).join('\n');
|
|
96
|
+
if (this.config.plainSprite) {
|
|
97
|
+
return '<svg ' + attrs + '>\n' + symbolsContent + '\n</svg>';
|
|
98
|
+
}
|
|
66
99
|
const styles = '<style>\n' +
|
|
67
100
|
' .sprite-symbol-usage {display: none;}\n' +
|
|
68
101
|
' .sprite-symbol-usage:target {display: inline;}\n' +
|
|
69
102
|
' </style>';
|
|
70
|
-
const symbolsContent = symbols.map((s) => s.content).join('\n');
|
|
71
103
|
const usages = symbols
|
|
72
104
|
.map((s) => '<use id="' +
|
|
73
105
|
s.id +
|
|
74
|
-
'-usage"
|
|
106
|
+
'-usage" href="#' +
|
|
75
107
|
s.id +
|
|
76
108
|
'" width="100%" height="100%" class="sprite-symbol-usage" />')
|
|
77
109
|
.join('\n');
|
|
@@ -89,7 +121,7 @@ class SvgSpritePlugin {
|
|
|
89
121
|
function FallbackRawSource(str) {
|
|
90
122
|
this._value = str;
|
|
91
123
|
this.source = () => str;
|
|
92
|
-
this.size = () => str
|
|
124
|
+
this.size = () => Buffer.byteLength(str, 'utf8');
|
|
93
125
|
this.buffer = () => Buffer.from(str);
|
|
94
126
|
this.map = () => null;
|
|
95
127
|
this.sourceAndMap = () => ({ source: str, map: null });
|
package/dist/plugin.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"plugin.js","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"plugin.js","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import type { RsbuildPlugin } from '@rsbuild/core';
|
|
2
|
+
export interface SvgSpritePluginOptions {
|
|
3
|
+
symbolId?: string | ((resourcePath: string) => string);
|
|
4
|
+
extract?: boolean;
|
|
5
|
+
esModule?: boolean;
|
|
6
|
+
spriteFilename?: string;
|
|
7
|
+
publicPath?: string;
|
|
8
|
+
plainSprite?: boolean;
|
|
9
|
+
spriteAttrs?: Record<string, string>;
|
|
10
|
+
include?: RegExp | string;
|
|
11
|
+
exclude?: RegExp | string;
|
|
12
|
+
}
|
|
13
|
+
/** Returns true when a RegExp targets only .svg files (not a compound pattern). */
|
|
14
|
+
export declare function isSvgOnlyPattern(re: RegExp): boolean;
|
|
15
|
+
export declare function pluginSvgSprite(options?: SvgSpritePluginOptions): RsbuildPlugin;
|
|
16
|
+
//# sourceMappingURL=rsbuild.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rsbuild.d.ts","sourceRoot":"","sources":["../src/rsbuild.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAGnD,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,YAAY,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;IACvD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC3B;AAED,mFAAmF;AACnF,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAIpD;AAED,wBAAgB,eAAe,CAAC,OAAO,GAAE,sBAA2B,GAAG,aAAa,CAkDnF"}
|
package/dist/rsbuild.js
ADDED
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
35
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
36
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
37
|
+
};
|
|
38
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
39
|
+
exports.isSvgOnlyPattern = isSvgOnlyPattern;
|
|
40
|
+
exports.pluginSvgSprite = pluginSvgSprite;
|
|
41
|
+
const path = __importStar(require("path"));
|
|
42
|
+
const plugin_1 = __importDefault(require("./plugin"));
|
|
43
|
+
/** Returns true when a RegExp targets only .svg files (not a compound pattern). */
|
|
44
|
+
function isSvgOnlyPattern(re) {
|
|
45
|
+
// Compound patterns use | for alternation (e.g. /\.(svg|png)$/).
|
|
46
|
+
// If the source contains |, it matches more than just SVG — keep the rule.
|
|
47
|
+
return !re.source.includes('|');
|
|
48
|
+
}
|
|
49
|
+
function pluginSvgSprite(options = {}) {
|
|
50
|
+
const { plainSprite, spriteAttrs, include, exclude, ...loaderOptions } = options;
|
|
51
|
+
return {
|
|
52
|
+
name: 'rsbuild-plugin-svg-sprite',
|
|
53
|
+
setup(api) {
|
|
54
|
+
api.modifyRspackConfig((config) => {
|
|
55
|
+
config.module = config.module || {};
|
|
56
|
+
config.module.rules = config.module.rules || [];
|
|
57
|
+
// Remove existing SVG-only rules to avoid conflicts.
|
|
58
|
+
// Rules with compound patterns (e.g. /\.(svg|png)$/) are kept to avoid
|
|
59
|
+
// breaking non-SVG file handling — users should use include/exclude instead.
|
|
60
|
+
config.module.rules = config.module.rules.filter((rule) => {
|
|
61
|
+
if (!rule || typeof rule !== 'object')
|
|
62
|
+
return true;
|
|
63
|
+
const test = rule.test;
|
|
64
|
+
if (typeof test === 'string')
|
|
65
|
+
return test !== '.svg';
|
|
66
|
+
if (test instanceof RegExp && test.test('.svg')) {
|
|
67
|
+
// Only remove rules that exclusively target SVG files.
|
|
68
|
+
// Compound patterns like /\.(svg|png|jpg)$/ are kept intact.
|
|
69
|
+
return !isSvgOnlyPattern(test);
|
|
70
|
+
}
|
|
71
|
+
return true;
|
|
72
|
+
});
|
|
73
|
+
const svgRule = {
|
|
74
|
+
test: /\.svg$/,
|
|
75
|
+
type: 'javascript/auto',
|
|
76
|
+
loader: path.join(__dirname, 'loader.js'),
|
|
77
|
+
options: {
|
|
78
|
+
symbolId: loaderOptions.symbolId || '[name]',
|
|
79
|
+
extract: loaderOptions.extract || false,
|
|
80
|
+
esModule: loaderOptions.esModule !== false,
|
|
81
|
+
spriteFilename: loaderOptions.spriteFilename || 'sprite.svg',
|
|
82
|
+
publicPath: loaderOptions.publicPath || '',
|
|
83
|
+
},
|
|
84
|
+
};
|
|
85
|
+
if (include)
|
|
86
|
+
svgRule.include = include;
|
|
87
|
+
if (exclude)
|
|
88
|
+
svgRule.exclude = exclude;
|
|
89
|
+
config.module.rules.push(svgRule);
|
|
90
|
+
if (loaderOptions.extract) {
|
|
91
|
+
config.plugins = config.plugins || [];
|
|
92
|
+
config.plugins.push(new plugin_1.default({ plainSprite, spriteAttrs }));
|
|
93
|
+
}
|
|
94
|
+
});
|
|
95
|
+
},
|
|
96
|
+
};
|
|
97
|
+
}
|
|
98
|
+
//# sourceMappingURL=rsbuild.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rsbuild.js","sourceRoot":"","sources":["../src/rsbuild.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,4CAIC;AAED,0CAkDC;AAzED,2CAA6B;AAE7B,sDAAuC;AAcvC,mFAAmF;AACnF,SAAgB,gBAAgB,CAAC,EAAU;IACzC,iEAAiE;IACjE,2EAA2E;IAC3E,OAAO,CAAC,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;AAClC,CAAC;AAED,SAAgB,eAAe,CAAC,UAAkC,EAAE;IAClE,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,aAAa,EAAE,GAAG,OAAO,CAAC;IAEjF,OAAO;QACL,IAAI,EAAE,2BAA2B;QACjC,KAAK,CAAC,GAAG;YACP,GAAG,CAAC,kBAAkB,CAAC,CAAC,MAAM,EAAE,EAAE;gBAChC,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,IAAI,EAAE,CAAC;gBACpC,MAAM,CAAC,MAAM,CAAC,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,IAAI,EAAE,CAAC;gBAEhD,qDAAqD;gBACrD,uEAAuE;gBACvE,6EAA6E;gBAC7E,MAAM,CAAC,MAAM,CAAC,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAS,EAAE,EAAE;oBAC7D,IAAI,CAAC,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ;wBAAE,OAAO,IAAI,CAAC;oBACnD,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;oBACvB,IAAI,OAAO,IAAI,KAAK,QAAQ;wBAAE,OAAO,IAAI,KAAK,MAAM,CAAC;oBACrD,IAAI,IAAI,YAAY,MAAM,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC;wBAChD,uDAAuD;wBACvD,6DAA6D;wBAC7D,OAAO,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;oBACjC,CAAC;oBACD,OAAO,IAAI,CAAC;gBACd,CAAC,CAAC,CAAC;gBAEH,MAAM,OAAO,GAAQ;oBACnB,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,iBAA0B;oBAChC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,WAAW,CAAC;oBACzC,OAAO,EAAE;wBACP,QAAQ,EAAE,aAAa,CAAC,QAAQ,IAAI,QAAQ;wBAC5C,OAAO,EAAE,aAAa,CAAC,OAAO,IAAI,KAAK;wBACvC,QAAQ,EAAE,aAAa,CAAC,QAAQ,KAAK,KAAK;wBAC1C,cAAc,EAAE,aAAa,CAAC,cAAc,IAAI,YAAY;wBAC5D,UAAU,EAAE,aAAa,CAAC,UAAU,IAAI,EAAE;qBAC3C;iBACF,CAAC;gBAEF,IAAI,OAAO;oBAAE,OAAO,CAAC,OAAO,GAAG,OAAO,CAAC;gBACvC,IAAI,OAAO;oBAAE,OAAO,CAAC,OAAO,GAAG,OAAO,CAAC;gBAEvC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;gBAElC,IAAI,aAAa,CAAC,OAAO,EAAE,CAAC;oBAC1B,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,IAAI,EAAE,CAAC;oBACtC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,gBAAe,CAAC,EAAE,WAAW,EAAE,WAAW,EAAE,CAAC,CAAC,CAAC;gBACzE,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;KACF,CAAC;AACJ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"browser-sprite.d.ts","sourceRoot":"","sources":["../../src/runtime/browser-sprite.ts"],"names":[],"mappings":"AAAA,UAAU,WAAW;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;CACjB;
|
|
1
|
+
{"version":3,"file":"browser-sprite.d.ts","sourceRoot":"","sources":["../../src/runtime/browser-sprite.ts"],"names":[],"mappings":"AAAA,UAAU,WAAW;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;CACjB;AAiBD,iBAAS,KAAK,IAAI,IAAI,CASrB;AAWD,iBAAS,GAAG,CAAC,UAAU,EAAE,WAAW,GAAG,IAAI,CAO1C;AAED,oDAAoD;AACpD,iBAAS,MAAM,IAAI,IAAI,CAItB;AAED,gEAAgE;AAChE,iBAAS,SAAS,IAAI,IAAI,CAQzB;;;;;;;AAID,wBAAiD"}
|
|
@@ -6,7 +6,6 @@ let isMounted = false;
|
|
|
6
6
|
function createSpriteElement() {
|
|
7
7
|
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
|
8
8
|
svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
|
|
9
|
-
svg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
|
|
10
9
|
svg.style.position = 'absolute';
|
|
11
10
|
svg.style.width = '0';
|
|
12
11
|
svg.style.height = '0';
|
|
@@ -25,7 +24,7 @@ function mount() {
|
|
|
25
24
|
});
|
|
26
25
|
}
|
|
27
26
|
function appendSymbolToSprite(symbolData) {
|
|
28
|
-
const existing = sprite.
|
|
27
|
+
const existing = sprite.getElementById(symbolData.id);
|
|
29
28
|
if (existing) {
|
|
30
29
|
existing.outerHTML = symbolData.content;
|
|
31
30
|
}
|
|
@@ -34,6 +33,9 @@ function appendSymbolToSprite(symbolData) {
|
|
|
34
33
|
}
|
|
35
34
|
}
|
|
36
35
|
function add(symbolData) {
|
|
36
|
+
// Skip in SSR/Node.js to prevent memory leaks across requests
|
|
37
|
+
if (typeof document === 'undefined')
|
|
38
|
+
return;
|
|
37
39
|
symbols[symbolData.id] = symbolData;
|
|
38
40
|
if (isMounted) {
|
|
39
41
|
appendSymbolToSprite(symbolData);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"browser-sprite.js","sourceRoot":"","sources":["../../src/runtime/browser-sprite.ts"],"names":[],"mappings":";;AAKA,IAAI,OAAO,GAAgC,EAAE,CAAC;AAC9C,IAAI,MAAM,GAAyB,IAAI,CAAC;AACxC,IAAI,SAAS,GAAG,KAAK,CAAC;AAEtB,SAAS,mBAAmB;IAC1B,MAAM,GAAG,GAAG,QAAQ,CAAC,eAAe,CAAC,4BAA4B,EAAE,KAAK,CAAC,CAAC;IAC1E,GAAG,CAAC,YAAY,CAAC,OAAO,EAAE,4BAA4B,CAAC,CAAC;IACxD,GAAG,CAAC,
|
|
1
|
+
{"version":3,"file":"browser-sprite.js","sourceRoot":"","sources":["../../src/runtime/browser-sprite.ts"],"names":[],"mappings":";;AAKA,IAAI,OAAO,GAAgC,EAAE,CAAC;AAC9C,IAAI,MAAM,GAAyB,IAAI,CAAC;AACxC,IAAI,SAAS,GAAG,KAAK,CAAC;AAEtB,SAAS,mBAAmB;IAC1B,MAAM,GAAG,GAAG,QAAQ,CAAC,eAAe,CAAC,4BAA4B,EAAE,KAAK,CAAC,CAAC;IAC1E,GAAG,CAAC,YAAY,CAAC,OAAO,EAAE,4BAA4B,CAAC,CAAC;IACxD,GAAG,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;IAChC,GAAG,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,CAAC;IACtB,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC;IACvB,GAAG,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAC9B,GAAG,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IACxC,OAAO,GAAG,CAAC;AACb,CAAC;AAED,SAAS,KAAK;IACZ,IAAI,SAAS;QAAE,OAAO;IACtB,MAAM,GAAG,mBAAmB,EAAE,CAAC;IAC/B,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAC7D,SAAS,GAAG,IAAI,CAAC;IAEjB,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE;QAClC,oBAAoB,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC;IACpC,CAAC,CAAC,CAAC;AACL,CAAC;AAED,SAAS,oBAAoB,CAAC,UAAuB;IACnD,MAAM,QAAQ,GAAG,MAAO,CAAC,cAAc,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;IACvD,IAAI,QAAQ,EAAE,CAAC;QACb,QAAQ,CAAC,SAAS,GAAG,UAAU,CAAC,OAAO,CAAC;IAC1C,CAAC;SAAM,CAAC;QACN,MAAO,CAAC,kBAAkB,CAAC,WAAW,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC9D,CAAC;AACH,CAAC;AAED,SAAS,GAAG,CAAC,UAAuB;IAClC,8DAA8D;IAC9D,IAAI,OAAO,QAAQ,KAAK,WAAW;QAAE,OAAO;IAC5C,OAAO,CAAC,UAAU,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC;IACpC,IAAI,SAAS,EAAE,CAAC;QACd,oBAAoB,CAAC,UAAU,CAAC,CAAC;IACnC,CAAC;AACH,CAAC;AAED,oDAAoD;AACpD,SAAS,MAAM;IACb,OAAO,GAAG,EAAE,CAAC;IACb,MAAM,GAAG,IAAI,CAAC;IACd,SAAS,GAAG,KAAK,CAAC;AACpB,CAAC;AAED,gEAAgE;AAChE,SAAS,SAAS;IAChB,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;QACpC,IAAI,QAAQ,CAAC,UAAU,KAAK,SAAS,EAAE,CAAC;YACtC,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAC;QACvD,CAAC;aAAM,CAAC;YACN,KAAK,EAAE,CAAC;QACV,CAAC;IACH,CAAC;AACH,CAAC;AAED,SAAS,EAAE,CAAC;AAEZ,kBAAe,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "rspack-plugin-svg-sprite",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.3.1",
|
|
4
4
|
"description": "SVG sprite loader and plugin for Rspack — drop-in replacement for svg-sprite-loader with inline and extract mode support",
|
|
5
5
|
"author": "Yichen Zhu",
|
|
6
6
|
"license": "MIT",
|
|
@@ -16,20 +16,29 @@
|
|
|
16
16
|
"rspack",
|
|
17
17
|
"rspack-plugin",
|
|
18
18
|
"rspack-loader",
|
|
19
|
+
"rsbuild",
|
|
20
|
+
"rsbuild-plugin",
|
|
19
21
|
"svg",
|
|
20
22
|
"svg-sprite",
|
|
21
23
|
"svg-sprite-loader",
|
|
22
24
|
"svg-icon",
|
|
25
|
+
"svg-icons",
|
|
23
26
|
"sprite",
|
|
24
27
|
"sprite-sheet",
|
|
25
28
|
"icon",
|
|
29
|
+
"icon-system",
|
|
26
30
|
"loader",
|
|
27
31
|
"plugin",
|
|
32
|
+
"bundler-plugin",
|
|
28
33
|
"webpack",
|
|
29
34
|
"webpack5",
|
|
30
35
|
"extract",
|
|
31
36
|
"inline",
|
|
32
|
-
"symbol"
|
|
37
|
+
"symbol",
|
|
38
|
+
"react",
|
|
39
|
+
"vue",
|
|
40
|
+
"migration",
|
|
41
|
+
"drop-in"
|
|
33
42
|
],
|
|
34
43
|
"main": "dist/index.js",
|
|
35
44
|
"types": "dist/index.d.ts",
|
|
@@ -53,10 +62,18 @@
|
|
|
53
62
|
"./runtime/symbol": {
|
|
54
63
|
"types": "./dist/runtime/symbol.d.ts",
|
|
55
64
|
"default": "./dist/runtime/symbol.js"
|
|
65
|
+
},
|
|
66
|
+
"./rsbuild": {
|
|
67
|
+
"types": "./dist/rsbuild.d.ts",
|
|
68
|
+
"default": "./dist/rsbuild.js"
|
|
69
|
+
},
|
|
70
|
+
"./client": {
|
|
71
|
+
"types": "./client.d.ts"
|
|
56
72
|
}
|
|
57
73
|
},
|
|
58
74
|
"files": [
|
|
59
75
|
"dist/",
|
|
76
|
+
"client.d.ts",
|
|
60
77
|
"README.md",
|
|
61
78
|
"LICENSE"
|
|
62
79
|
],
|
|
@@ -75,11 +92,15 @@
|
|
|
75
92
|
"prepare": "husky"
|
|
76
93
|
},
|
|
77
94
|
"peerDependencies": {
|
|
78
|
-
"@rspack/core": ">=0.5.0"
|
|
95
|
+
"@rspack/core": ">=0.5.0",
|
|
96
|
+
"@rsbuild/core": ">=1.0.0"
|
|
79
97
|
},
|
|
80
98
|
"peerDependenciesMeta": {
|
|
81
99
|
"@rspack/core": {
|
|
82
100
|
"optional": true
|
|
101
|
+
},
|
|
102
|
+
"@rsbuild/core": {
|
|
103
|
+
"optional": true
|
|
83
104
|
}
|
|
84
105
|
},
|
|
85
106
|
"devDependencies": {
|