Creating Image Sprites

Sprites used to be a real pain to create and code by hand. Slate uses Spritesmith to generate the spritemap complete with retina support and stylesheet generation.

All you need to do is drop single PNG images into src/images/sprites and webpack will do the result. If you need to change the paths for the generation of the sprite map and the stylesheet, just locate the configuration for this in webpack.mix.js

// Generate Sprites
// ================
new SpritesmithPlugin({
src: {
    cwd: path.resolve(__dirname, 'src/images/sprites'),
    glob: '*.png'
},
target: {
    image: path.resolve(__dirname, 'public/assets/images/sprite.png'),
    css: path.resolve(__dirname, 'src/sass/components/sprites.scss')
},
apiOptions: {
    cssImageRef: "/assets/images/sprite.png"
},
retina: "@2x",
})

To create a retina sprite, you need a second sprite twice the size and suffixed with @2x. For example sass.png and sass@2x.png will generate a normal sprite and a retina sprite.

For usage infortation in your stylesheet, refer to the comments inside the genereated sprites.scss file.

For more information on Spritesmith and the options you can use, please refer to the webpack spritesmith documentation.

Built with the Best

Slate was built by Hash&Salt, a company who loves building for the internet. Using the very best in industry leading software and practices honed over the last 20 years in the industry. You're in good hands.