search

2createStudio / postcss-sprites

Generate sprites from stylesheets.
MIT License
413 stars 50 forks source link

Issue with Spritesmith & incorrect output #100

Open pewuel opened 6 years ago

pewuel commented 6 years ago

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- commented 6 years ago

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 commented 6 years ago

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 ?