In case you’ve been living undersea for the last decade, I wonder how you’re still breathing. Sprites are a very old concept, originating in game engines, which were more performant when they just loaded a single graphic containing all the frames needed to render an animation. Today, spritesheets are a well-known improvement over using a single image for each icon in modern websites, but they are still slower to gain ground than they could be.
Grunt makes this super-easy for us, and in this article I want to demonstrate exactly how I use it to generate spritesheets.
The first thing we’ll want to install is grunt-spritesmith.
npm install --save-dev grunt-spritesmith
Configuring it is kind of tricky to get right, but I’ve put together a function to make it easier for us to set it up.
function sprite (type, short) {
return {
src: 'src/img/sprite/' + type + '/**/*.{png,jpg,gif}',
destImg: 'bin/public/img/sprite/' + type + '.png',
destCSS: 'bin/public/css/sprite/' + type + '.css',
imgPath: '/img/sprite/' + type + '.png',
cssOpts: {
cssClass: function (item) {
var prefix = short ? short + '-' : '';
return '.' + prefix + item.name + ':before';
}
},
engine: 'gm',
imgOpts: {
format: 'png'
}
};
}
Say we want to set up a “tools” spritesheet, with a bunch of tool icons we have. We can simply configure Grunt like below.
grunt.initConfig({
sprite: {
tools: sprite('tools', 'tl')
}
});
Lastly, we’ll need a few extra tweaks to our CSS so that it works in a :before pseudo-element.
.icon:before {
vertical-align: bottom;
display: inline-block;
content: '';
}
That’s it, we’re now able to render sprited icons in our HTML, effortlessly.
<span class="icon tl-screw"></span>
The tremendous upside is that we can drag and drop new icons into our source folder, and immediately build a spritesheet again. Something that used to take pestering the designer, or considerable effort on Paint on our part, is now just a matter of typing grunt sprite into the terminal.
Fully working source code here.
Comments