@onedarnleyroad/vite-plugin-svg-sprite 2.0.0 → 2.1.0

package/README.md

@@ -112,28 +112,32 @@ With Craft CMS + [nystudio107/craft-vite](https://nystudio107.com/docs/vite/):
 
 #### A reusable, accessible macro
 
-Rather than hand-writing the `<svg><use>` wrapper each time, wrap it in a Twig macro. Pass `folder:` for a subfolder sprite — it maps to the `sprite-{folder}.svg` manifest key for you, so templates keep the folder mental model. Icons default to decorative (`aria-hidden="true"`), and switch to a labelled `role="img"` when the icon carries meaning on its own:
+Rather than hand-writing the `<svg><use>` wrapper each time, wrap it in a Twig macro. The two things you set most often — the icon **name** and its **classes** — are positional; the rest (subfolder, accessible label, extra attributes) goes in an `options` hash. Icons default to decorative (`aria-hidden="true"`), and switch to a labelled `role="img"` when the icon carries meaning on its own:
 
 ```twig
-{% macro icon(name, folder = null, label = null, prefix = 'sprite', class = 'icon', extra = {}) %}
-  {% set key  = folder ? "#{prefix}-#{folder}.svg" : "#{prefix}.svg" %}
-  {% set a11y = label
+{% macro icon(name, classList = '', options = {}) %}
+  {% set folder = options.folder ?? null %}
+  {% set label  = options.label ?? null %}
+  {% set file   = folder ? "sprite-#{folder}.svg" : 'sprite.svg' %}
+  {% set a11y   = label
     ? { role: 'img', 'aria-label': label }
     : { 'aria-hidden': 'true', focusable: 'false' } %}
-  <svg{{ attr({ class: class }|merge(a11y)|merge(extra)) }}>
-    <use href="{{ craft.vite.entry(key) }}#svg-{{ name }}"></use>
+  <svg{{ attr({ class: classList }|merge(a11y)|merge(options.attrs ?? {})) }}>
+    <use href="{{ craft.vite.entry(file) }}#svg-{{ name }}"></use>
   </svg>
 {% endmacro %}
 ```
 
 ```twig
-{{ icon('arrow') }}                                   {# root sprite → entry('sprite.svg') #}
-{{ icon('sun', folder: 'light') }}                    {# subfolder → entry('sprite-light.svg') #}
-{{ icon('search', label: 'Search') }}                 {# meaningful → role="img" + aria-label #}
-<button aria-label="Close">{{ icon('x') }}</button>   {# icon-only control: label the button #}
+{{ icon('arrow', 'icon') }}                                  {# root sprite → entry('sprite.svg') #}
+{{ icon('sun', 'icon', { folder: 'light' }) }}               {# subfolder → entry('sprite-light.svg') #}
+{{ icon('search', 'icon', { label: 'Search' }) }}            {# meaningful → role="img" + aria-label #}
+<button aria-label="Close">{{ icon('x', 'icon') }}</button>  {# icon-only control: label the button #}
 ```
 
-Reach for `aria-hidden="true"` only when the icon is decorative — i.e. sitting next to visible text. A standalone, meaning-bearing icon needs an accessible name (via `label`, or on the enclosing control such as a button), or it's invisible to assistive tech. (`attr()` is Craft's built-in attribute renderer.)
+Reach for `aria-hidden="true"` only when the icon is decorative — i.e. sitting next to visible text. A standalone, meaning-bearing icon needs an accessible name (via `options.label`, or on the enclosing control such as a button), or it's invisible to assistive tech. (`'icon'` is a CSS class you define to size the `<svg>` — sprite symbols have no intrinsic dimensions; the walkthrough below covers sizing and colour. `attr()` is Craft's built-in attribute renderer.)
+
+> **Full Craft CMS walkthrough:** [SVG icon sprites in Craft CMS with Vite](https://github.com/onedarnleyroad/craftcms/wiki/SVG-icon-sprites-in-Craft-CMS-with-Vite) — end-to-end setup, the macro, sizing & colour gotchas, and sprites vs. inlining.
 
 ## Development workflow
 
@@ -182,7 +186,7 @@ If you want runtime/HMR injection or a virtual import, one of the others will su
 
 ## FAQ
 
-**Does it work with Craft CMS?** Yes — it's the primary target. With [nystudio107's Craft Vite plugin](https://nystudio107.com/docs/vite/), reference a sprite with `craft.vite.entry('sprite.svg')` (see [Using the sprite](#using-the-sprite)).
+**Does it work with Craft CMS?** Yes — it's the primary target. With [nystudio107's Craft Vite plugin](https://nystudio107.com/docs/vite/), reference a sprite with `craft.vite.entry('sprite.svg')` — see [Using the sprite](#using-the-sprite), or the full [Craft + Vite walkthrough](https://github.com/onedarnleyroad/craftcms/wiki/SVG-icon-sprites-in-Craft-CMS-with-Vite).
 
 **How do I reference an icon in a Twig template?** Use `<use href="{{ craft.vite.entry('sprite.svg') }}#svg-{name}">`, or the reusable [`icon()` macro](#a-reusable-accessible-macro).
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onedarnleyroad/vite-plugin-svg-sprite",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Vite plugin that builds an SVG sprite sheet from a directory of SVG files",
   "type": "module",
   "exports": {
@@ -34,6 +34,6 @@
     "access": "public"
   },
   "peerDependencies": {
-    "vite": ">=4.0.0"
+    "vite": ">=3.0.0"
   }
 }

package/src/index.js

@@ -142,11 +142,15 @@ export default function svgSpritePlugin(options = {}) {
         writeBundle(outputOptions) {
             if (!viteConfig?.build?.manifest) return
 
-            const manifestName = typeof viteConfig.build.manifest === 'string'
-                ? viteConfig.build.manifest
-                : '.vite/manifest.json'
-            const manifestPath = resolve(outputOptions.dir, manifestName)
-            if (!existsSync(manifestPath)) return
+            // Vite 5+ writes the default manifest to .vite/manifest.json; Vite 3/4 write
+            // manifest.json at the outDir root. Try both when no custom path is configured.
+            const manifestNames = typeof viteConfig.build.manifest === 'string'
+                ? [viteConfig.build.manifest]
+                : ['.vite/manifest.json', 'manifest.json']
+            const manifestPath = manifestNames
+                .map(name => resolve(outputOptions.dir, name))
+                .find(path => existsSync(path))
+            if (!manifestPath) return
 
             const manifest = JSON.parse(readFileSync(manifestPath, 'utf-8'))