How to make a retina sprite using gulp.spritesmith?

Question

css

I can not find a normal instruction for creating such a sprite.
On the gulp.spritesmith plugin page, there is something similar to an instruction, but this is not an instruction at all, but nonsense.
I would like a working example or tutorial on creating and using such a sprite, but I can’t find it.
Has anyone done and can show how to create and use retina sprites?

Answer 1

You need to create two sets of images of different sizes (set small icons manually to the desired size in some graphic editor or automate using gulp-sharp , for example).
Then use the retinaSrcFilter, retinaImgPath and retinaImgName parameters in gulp.spritesmith.
Here is a guide in which everything is chewed - link .