webpack-dev-server doesn't build sprite correct

[danfri86]

Webpack 2.3.2 webpack-dev-server 2.4.2 webpack-svg-store plugin 4.0.0 Framework: Angular 4.0.0

In my app I'm creating my sprite with:

var __svg__ = { path: './../assets/icons/**/*.svg', name: 'assets/br-icons.svg' };
require('webpack-svgstore-plugin/src/helpers/svgxhr')(__svg__);

In webpack.config.js:

const SvgStore = require('webpack-svgstore-plugin');

and in the plugins section:

new SvgStore({
    svgoOptions: {
        plugins: [
            { removeDoctype: true },
            { removeTitle: true },
            { removeMetadata: true },
            { removeComments: true },
            { cleanupIDs: true },
           { removeDimensions: true }
        ]
    }
}),

When I'm building my app the sprite is built correct. The file is created with all my icons. When using webpack-dev-server I can see in my network request that the file is created in memory and loaded in my page, but it only has two icons, when it should have +20. And the two that's created has wrong id. The id is appended with -a or -b.

Anyone experiencing the same issue, or have a solution?

[JakeHenshall]

@danfri86 I have something similar where I only have one image but -a -b etc.. gets applied throughout the one image. Not sure how to fix it as I cant seem to get it to display the sprite.

This is what I'm getting:

/svg/1491343785950.sprite.svg Failed to load resource: the server responded with a status of 404 (Not Found)

main.d72535d8b64b43c5de18.js:135 Uncaught Error: Invalid SVG Response at XMLHttpRequest._ajax.onload (main.d72535d8b64b43c5de18.js:135)

[danfri86]

@mrsum Got any suggestion/fix for devServer?

[pafnuty]

+1

[danfri86]

I managed to solve this by adding prefix: ''to my plugin settings in webpack. I can't explain why but i made it work also on devServer.

In my webpack.config.js and the plugins section I now have this:

new SvgStore({
    svgoOptions: {
        plugins: [
            { removeDoctype: true },
            { removeTitle: true },
            { removeMetadata: true },
            { removeComments: true },
            { cleanupIDs: true },
            { removeDimensions: true }
        ]
    },
    prefix: ''
})

[sra]

This fix only works the first time for me - basically changing anything works the first time and the svg is generated, but if you start the dev server again, the svg item is no longer in the emitted asset list and 404s again.

[murali-ally]

+1

Any solution for this issue?

[abahrisd]

Same problem, any solution?

[pafnuty]

We migrated build to vite and sprite assembly implementation to a small JS function https://gist.github.com/pafnuty/3070e4e25e5f52839c836882672434f6