cascornelissen / svg-spritemap-webpack-plugin

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

uncorrect ids for <view> element #153

Closed Veron116 closed 3 years ago

Veron116 commented 3 years ago

I'm trying to use generated sprite for css background and I found this bug: If I want to use svg like a background-image I have to enable options view and use for sprite

new SVGSpritemapPlugin([
            './src/common/components/VSvgSprite/icons/illustration/**/*.svg',
            './src/common/components/VSvgSprite/icons/decor/**/*.svg'
        ],{
            output: {
                filename: 'img/graphics-sprite.svg',
                svg4everybody: true,
                svgo: true,
            },
            sprite: {
                prefix: false,
                generate: {
                    title: false,
                    use: true,
                    view: true,
                }
            },
        }),

After that I need to use svg in my css like this

.my-block {
  width: 100%;
  height: 300px;
  background: url(#{$path-to-sprite} + '#wave-view') top left no-repeat;
}

But this way not working because plugin is adding identical ids for <symbol>, <use> and <view> elements.

For example:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920" height="345">
    <symbol id="wave" viewBox="0 0 1920 195">
        <path fill="#0b9a8" d="M1920 195H0V76.744C178.587 27.184 366.14."/>
    </symbol>
    <use xlink:href="#wave" y="150" width="1920" height="195"/>
    <view id="wave" viewBox="0 150 1920 195"/>
</svg>

For correct render of svg like a background-image I need to add uniq id for <view> element into svg sprite.

PS: and it will be perfect if your documentation have more examples with different configuration of your plugin.

Veron116 commented 3 years ago

Sorry, I've found that option sprite.generate.view can accept a string and generate postfix for id.