@onedarnleyroad/vite-plugin-svg-sprite 2.0.0-beta.1 → 2.0.0-beta.5

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onedarnleyroad/vite-plugin-svg-sprite",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.5",
   "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) {
@@ -145,6 +161,8 @@ 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.setHeader('Cross-Origin-Resource-Policy', 'cross-origin')
                 res.end(match)
             })