1

I used to SVG Spritemap Webpack Plugin for autocompilation of svg sprite.

My plugin config is looks like this

 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 compilation I have a sprite file with svg

<svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="test" viewBox="0 0 400 150"><path d="M1920 195H0V76.744C178.587 27.184 366.14.536 559.586.008L565.45 71.556l5.414 1.455c126.25 32.248 252.57 49.53 378.958 51.845 139.624 2.559 279.453-13.125 419.497-47.09l4.244-1.035V195z"/></symbol>
    <view id="test" viewBox="0 0 400 150"/>
    <symbol id="wave" viewBox="0 0 1920 195"><path fill="#0b9a8" d="M1920 195H0V76.744C178.587 27.184 366.14.536 559.586.008L565.45 0l5.716.008c186.645.496 367.807 25.308 540.722 71.556l5.414 1.455c126.25 32.248 252.57 49.53 378.958 51.845 139.624 2.559 279.453-13.125 419.497-47.09l4.244-1.035V195z"/></symbol>
    <view id="wave" viewBox="0 150 1920 195"/>
</svg>

Here I'm trying to use fragment wave into .scss file in a Vue component component.scss

.block {
  height: 500px;
  width: 100%;
  background: url($path-to-sprite + '#wave') no-repeat;
  background-size: cover;
}

But on the web page fragment is not rendered, because rendered all fragments from sprite. If I use background styles like this

.block {
  height: 500px;
  width: 100%;
  background: url($path-to-decor-sprite + "#svgView(viewBox(0, 150, 1920, 195))");
  background-size: cover;
}

Everything is good. But it's not usefull way for my project.

0 Answers0