Manifest support

[jameswragg]

I've been looking for a SVG Sprite plugin for ages that does what I need & this is SO close. Thanks for building it!

I noticed that because the plugin doesn't use Rollup's emitFile method, it can’t support filename hashing & won't ever be added to the manifest.json.

I'd love to be able to use the manifest in production to reference the hashed sprite like so:

{
  "sprite.svg": {
    "file": "assets/sprite.2ffa3d27.svg",
    "src": "sprite.2ffa3d27.svg"
  },

[vshepel]

@jameswragg Have you tried adding build.manifest to vite.config.js ?

export default defineConfig({
  plugins: [
    ViteSvgSpriteWrapper({
      icons: 'svg/*.svg',
      outputDir: '',
    }),
  ],
  build: {
    manifest: true,
  },
})

[jameswragg]

~I’m not near my computer right now but if I remember correctly, the file is in the manifest but as the file name never changes (not hashed) it therefore makes the manifest redundant.~

[jameswragg]

Scratch that - you're right, that works as expected with the sprite reference in the index.html (as per the example).

However — I'm using a non-HTML custom entry via build.rollupOptions.input, so my vite.config.js looks like this:

{
  "build": {
    "manifest": true,
    "rollupOptions": {
      "input": "./src/index.js"
    }
  },
  plugins: [
    ViteSvgSpriteWrapper({
      icons: 'svg/*.svg',
      outputDir: '',
    }),
  ],
 }

Therefore it doesn't have a reference to the sprite.svg file & not included in the manifest. I believe if the plugin used Rollup's emitFile method it would be included but I'm at the limits of my Vite/Rollup knowledge so may be completely wrong.

It would be good if there was an alternative example that had an index.js as the Vite entry 😉

[vshepel]

@jameswragg Hi

Sorry for the delay, a new version 1.3.2 has been released, and you can do this:

export default defineConfig({
  plugins: [
    ViteSvgSpriteWrapper({
      icons: 'svg/*.svg',
      outputDir: './public',
    }),
  ],
  build: {
    manifest: true,
  },
})