cascornelissen / svg-spritemap-webpack-plugin

SVG spritemap plugin for webpack
MIT License
207 stars 49 forks source link

Empty output file when the style attribute contains either "visibility: hidden" or "display: none" #209

Closed rku4er closed 1 year ago

rku4er commented 1 year ago

When I set either "visibility: hidden" or "display: none" as a style attribute, the plugin produces an empty SVG sprite. While I'm not entirely sure if this is a bug or not, I consider it to be incorrect behavior. It's often necessary to hide the SVG sprite visually when inserting it on a page. Am I missing anything in the settings?

My config is pretty simple:

    plugins: [
        ...defaultConfig.plugins,
        new SVGSpritemapPlugin(
            'src/icons/*.svg',
            {
                output: {
                    filename: 'symbols/svg-icons.php',
                    svg: {
                        attributes: {
                            style: 'position: absolute; visibility: hidden;'
                        }
                    }
                },
                sprite: {
                    prefix: 'svg-icon-',
                    generate: {
                        title: false
                    }
                }
            }
        )
    ]
rku4er commented 1 year ago

It has been fixed by setting svgo: false :)

cascornelissen commented 1 year ago

Great that you figured out it's SVGO doing this, if I had to guess it's the removeHiddenElemens plugin. If you do want to use the other features that SVGO has, you can also specifically disable that plugin by passing an object to the svgo option as well.

rku4er commented 1 year ago

Thanks for the hint! If anyone else needs this, I used these settings:

    svgo: {
        plugins: [
            {
                name: 'removeHiddenElems',
                active: false
            }
        ]
    }