@onedarnleyroad/vite-plugin-svg-sprite 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 One Darnley Road
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,66 @@
+# @onedarnleyroad/vite-plugin-svg-sprite
+
+A Vite plugin that builds an SVG sprite sheet from a directory of SVG files.
+
+## Features
+
+- Combines individual SVGs into a single `<svg>` sprite with `<symbol>` elements
+- Namespaces internal IDs to prevent conflicts across icons
+- Preserves existing `<title>` elements, or falls back to the filename
+- Strips comments and empty `<defs>` blocks
+- Rebuilds automatically in watch mode (HMR-aware)
+
+## Installation
+
+```bash
+npm install -D @onedarnleyroad/vite-plugin-svg-sprite
+```
+
+## Usage
+
+```js
+// vite.config.js
+import { defineConfig } from 'vite'
+import svgSprite from '@onedarnleyroad/vite-plugin-svg-sprite'
+
+export default defineConfig({
+  plugins: [
+    svgSprite({
+      inputDir: 'src/icons',
+      outputFile: 'web/dist/sprite.svg',
+    }),
+  ],
+})
+```
+
+### Options
+
+| Option | Type | Description |
+|--------|------|-------------|
+| `inputDir` | `string` | Directory containing the source `.svg` files |
+| `outputFile` | `string` | Path for the generated sprite sheet |
+
+Both paths are resolved relative to the project root (where `vite.config.js` lives).
+
+## Output
+
+Each SVG becomes a `<symbol>` with an `id` prefixed with `svg-`. For example, `arrow.svg` becomes:
+
+```html
+<symbol id="svg-arrow" viewBox="0 0 24 24">
+  <title>arrow icon</title>
+  <!-- ... -->
+</symbol>
+```
+
+Use it in your HTML with `<use>`:
+
+```html
+<svg aria-hidden="true">
+  <use href="/dist/sprite.svg#svg-arrow" />
+</svg>
+```
+
+## License
+
+MIT © [One Darnley Road](https://onedarnleyroad.com)

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@onedarnleyroad/vite-plugin-svg-sprite",
+  "version": "1.0.0",
+  "description": "Vite plugin that builds an SVG sprite sheet from a directory of SVG files",
+  "type": "module",
+  "exports": {
+    ".": "./src/index.js"
+  },
+  "files": [
+    "src"
+  ],
+  "keywords": [
+    "vite",
+    "vite-plugin",
+    "svg",
+    "sprite",
+    "svg-sprite"
+  ],
+  "author": "One Darnley Road <hello@onedarnleyroad.com>",
+  "license": "MIT",
+  "peerDependencies": {
+    "vite": ">=4.0.0"
+  }
+}

package/src/index.js

@@ -0,0 +1,59 @@
+import { readdirSync, readFileSync, writeFileSync, mkdirSync } from 'fs'
+import { resolve, basename, extname, dirname } from 'path'
+
+export default function svgSpritePlugin({ inputDir, outputFile }) {
+    const input = resolve(inputDir)
+    const output = resolve(outputFile)
+
+    function build() {
+        const symbols = readdirSync(input)
+            .filter(f => f.endsWith('.svg'))
+            .sort()
+            .map(file => {
+                const name = basename(file, extname(file))
+                const svg = readFileSync(resolve(input, file), 'utf-8')
+
+                // Preserve existing <title> if present, otherwise use filename
+                const existingTitle = svg.match(/<title[^>]*>([\s\S]*?)<\/title>/i)?.[1]?.trim()
+                const title = existingTitle ?? `${name} icon`
+
+                // Strip comments, existing <title> tags, and empty <defs> blocks
+                const cleaned = svg
+                    .replace(/<!--[\s\S]*?-->/g, '')
+                    .replace(/<title[^>]*>[\s\S]*?<\/title>/gi, '')
+                    .replace(/<defs[^>]*>\s*<\/defs>/gi, '')
+
+                // Namespace internal IDs to avoid conflicts when sprites are merged
+                const namespaced = cleaned
+                    .replace(/\bid="([^"]+)"/g, `id="${name}-$1"`)
+                    .replace(/\burl\(#([^)]+)\)/g, `url(#${name}-$1)`)
+                    .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 inner = namespaced
+                    .replace(/<svg[^>]*>/i, '')
+                    .replace(/<\/svg>/i, '')
+                    .replace(/\s*\n\s*/g, ' ')
+                    .replace(/>\s+</g, '><')
+                    .trim()
+
+                return `<symbol id="svg-${name}" viewBox="${viewBox}"><title>${title}</title>${inner}</symbol>`
+            })
+
+        mkdirSync(dirname(output), { recursive: true })
+        writeFileSync(output, `<svg xmlns="http://www.w3.org/2000/svg">\n${symbols.join('\n')}\n</svg>`)
+    }
+
+    return {
+        name: 'svg-sprite',
+        buildStart() {
+            if (this.meta.watchMode) build()
+        },
+        writeBundle: build,
+        handleHotUpdate({ file }) {
+            if (file.startsWith(input)) build()
+        },
+    }
+}