@onedarnleyroad/vite-plugin-svg-sprite 2.0.0-beta.0 → 2.0.0-beta.4

package/README.md

@@ -9,6 +9,7 @@ A Vite plugin that builds SVG sprite sheets from a directory of SVG files — wi
 - **Vite manifest integration** — works out of the box with [nystudio107's Craft Vite plugin](https://nystudio107.com/docs/vite/) and any other manifest consumer
 - **Multiple sprites from subfolders** — organise icons into `light/`, `dark/`, etc. and get one sprite per folder
 - Namespaces internal IDs to prevent conflicts across icons
+- **Preserves outer `<svg>` attributes** on the generated `<symbol>` — `fill="currentColor"`, `stroke`, `class`, `role`, `aria-*`, `data-*`, `style` (including CSS custom properties), etc. Only the truly wrapper-specific attributes are stripped: `xmlns`, `version`, `width`, `height`, and `id` (we set our own).
 - Preserves existing `<title>` elements, or falls back to the filename
 - Strips comments and empty `<defs>` blocks
 - Dev server serves sprites from memory with full-reload on change
@@ -82,28 +83,28 @@ Each SVG becomes a `<symbol>` with `id="svg-{filename}"`. For example, `arrow.sv
 
 ### With Vite manifest (recommended)
 
-With `build.manifest: true` enabled, each sprite is registered in `manifest.json` keyed by its logical name:
+With `build.manifest: true` enabled, each sprite is registered in `manifest.json` keyed by its `inputDir`-relative path:
 
 ```json
 {
-  "sprite.svg":       { "file": "assets/sprite-DAskUDYW.svg",       "src": "sprite.svg",       "isEntry": false },
-  "sprite-light.svg": { "file": "assets/sprite-light-xV7q1sYy.svg", "src": "sprite-light.svg", "isEntry": false }
+  "src/icons/sprite.svg":       { "file": "assets/sprite-DAskUDYW.svg",       "src": "src/icons/sprite.svg",       "isEntry": false },
+  "src/icons/sprite-light.svg": { "file": "assets/sprite-light-xV7q1sYy.svg", "src": "src/icons/sprite-light.svg", "isEntry": false }
 }
 ```
 
-With Craft CMS + [nystudio107/craft-vite](https://nystudio107.com/docs/vite/):
+With Craft CMS + [nystudio107/craft-vite](https://nystudio107.com/docs/vite/), use `craft.vite.asset()` — **not `entry()`**. The `asset()` helper is dev-server-aware; `entry()` always reads the manifest, so in dev it would serve stale built files:
 
 ```twig
 <svg aria-hidden="true">
-  <use href="{{ craft.vite.entry('sprite.svg') }}#svg-arrow"></use>
+  <use href="{{ craft.vite.asset('src/icons/sprite.svg') }}#svg-arrow"></use>
 </svg>
 
 <svg aria-hidden="true">
-  <use href="{{ craft.vite.entry('sprite-light.svg') }}#svg-sun"></use>
+  <use href="{{ craft.vite.asset('src/icons/sprite-light.svg') }}#svg-sun"></use>
 </svg>
 ```
 
-In dev mode, `craft.vite.entry('sprite.svg')` returns the raw path (`/sprite.svg`), which the plugin's dev middleware serves. In production it returns the hashed path from the manifest.
+In dev, `asset()` returns the Vite dev-server URL (e.g. `https://…:3000/src/icons/sprite.svg`), which the plugin's in-memory middleware serves. In production it returns the hashed URL from the manifest.
 
 ### Without manifest
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onedarnleyroad/vite-plugin-svg-sprite",
-  "version": "2.0.0-beta.0",
+  "version": "2.0.0-beta.4",
   "description": "Vite plugin that builds an SVG sprite sheet from a directory of SVG files",
   "type": "module",
   "exports": {

package/src/index.js

@@ -3,7 +3,21 @@ import { resolve, basename, extname, join } from 'path'
 import { createHash } from 'crypto'
 
 function hashContent(content) {
-    return createHash('sha256').update(content).digest('base64url').slice(0, 8)
+    return createHash('sha256').update(content).digest('hex').slice(0, 8)
+}
+
+const STRIP_ATTRS = new Set(['xmlns', 'version', 'width', 'height', 'id'])
+
+function extractOuterAttrs(openTag) {
+    const attrRe = /\s+([a-zA-Z_][a-zA-Z0-9_:-]*)="([^"]*)"/g
+    const kept = []
+    let m
+    while ((m = attrRe.exec(openTag)) !== null) {
+        const [, attr, value] = m
+        if (STRIP_ATTRS.has(attr) || attr.startsWith('xmlns:')) continue
+        kept.push(`${attr}="${value}"`)
+    }
+    return kept.join(' ')
 }
 
 function buildSymbol(svg, name) {
@@ -21,7 +35,8 @@ function buildSymbol(svg, name) {
         .replace(/\bhref="#([^"]+)"/g, `href="#${name}-$1"`)
         .replace(/\bxlink:href="#([^"]+)"/g, `xlink:href="#${name}-$1"`)
 
-    const viewBox = namespaced.match(/viewBox="([^"]+)"/)?.[1] ?? '0 0 24 24'
+    const openTag = namespaced.match(/<svg\b[^>]*>/i)?.[0] ?? ''
+    const outerAttrs = extractOuterAttrs(openTag)
 
     const inner = namespaced
         .replace(/<svg[^>]*>/i, '')
@@ -30,7 +45,8 @@ function buildSymbol(svg, name) {
         .replace(/>\s+</g, '><')
         .trim()
 
-    return `<symbol id="svg-${name}" viewBox="${viewBox}"><title>${title}</title>${inner}</symbol>`
+    const attrs = `id="svg-${name}"${outerAttrs ? ' ' + outerAttrs : ''}`
+    return `<symbol ${attrs}><title>${title}</title>${inner}</symbol>`
 }
 
 function buildSpriteSvg(dir, files) {
@@ -98,8 +114,9 @@ export default function svgSpritePlugin(options = {}) {
                 const source = buildSpriteSvg(group.dir, group.files)
                 const base = group.logicalName.replace(/\.svg$/, '')
                 const hashedFileName = join(outputDir, `${base}-${hashContent(source)}.svg`)
+                const key = join(inputDir, group.logicalName)
                 this.emitFile({ type: 'asset', fileName: hashedFileName, source })
-                emitted.push({ logicalName: group.logicalName, fileName: hashedFileName })
+                emitted.push({ key, fileName: hashedFileName })
             }
         },
 
@@ -114,10 +131,10 @@ export default function svgSpritePlugin(options = {}) {
 
             const manifest = JSON.parse(readFileSync(manifestPath, 'utf-8'))
 
-            for (const { logicalName, fileName } of emitted) {
-                manifest[logicalName] = {
+            for (const { key, fileName } of emitted) {
+                manifest[key] = {
                     file: fileName,
-                    src: logicalName,
+                    src: key,
                     isEntry: false,
                 }
             }
@@ -131,7 +148,8 @@ export default function svgSpritePlugin(options = {}) {
             const rebuild = () => {
                 sprites.clear()
                 for (const group of collectSpriteGroups(inputDir, prefix)) {
-                    sprites.set(group.logicalName, buildSpriteSvg(group.dir, group.files))
+                    const key = join(inputDir, group.logicalName)
+                    sprites.set(key, buildSpriteSvg(group.dir, group.files))
                 }
             }
             rebuild()
@@ -143,6 +161,7 @@ export default function svgSpritePlugin(options = {}) {
                 if (!match) return next()
                 res.setHeader('Content-Type', 'image/svg+xml')
                 res.setHeader('Cache-Control', 'no-cache')
+                res.setHeader('Access-Control-Allow-Origin', '*')
                 res.end(match)
             })