Issue with Spritesmith & incorrect output

[pewuel]

I'm using postcss-sprites with Laravel Mix.

Currently I have 2 issues:

1. Generated images contain elements of other icons, so I decided to add spritesmith.padding, but it doesn't works. Sprite image output hasn't padding between images.

2. I still got incorrect sprite output. For example icon--exit = icon--ring

Code sources, below:

webpack.mix.js:
Code on PasteBin

SCSS with icons:

.icon--exit { width: 18px; height: 18px; background: url('../images/sprites/icon-exit.svg') no-repeat 0 0; }
.icon--lock { width: 21px; height: 25px; background: url('../images/sprites/icon-ring.svg') no-repeat 0 0; }
.icon--ring { width: 12px; height: 12px; background: url('../images/sprites/icon-ring.svg') no-repeat 0 0; }

Have you similar problems?

[vvasilev-]

Hi @pewuel,

Generated images contain elements of other icons, so I decided to add spritesmith.padding, but it doesn't works. Sprite image output hasn't padding between images.

The padding option doesn't work because you're using SVG instead of raster images like PNG, GIF.
You need to use the svgsprite option because SVG files are processed by a different engine.

I still got incorrect sprite output. For example icon--exit = icon--ring

In PasteBin I can see that you're using a custom onUpdateRule hook. Can you confirm that the problem still exists if default logic is used?

[pewuel]

In PasteBin I can see that you're using a custom onUpdateRule hook. Can you confirm that the problem still exists if default logic is used?

I think SVG is useless in default logic. I'm using responsive spritesheets, because I wanna put custom width & height (SVG is pretty flexible). It looked good until I started adding more icons and noticed that they are mixed up...

How I can do it ?