When making a layout from PSD, icons are often inserted in SVG format, and if not, we ask them from the designer. Earlier we used icon fonts, but recently saw the advantages of sprites and decided to try to play with them to place them into the development process. We like icon fonts, but they have a number of disadvantages (you can read CSSTricks on this topic CSSTricks). The experiment was successful, and that’s how we have organized the system.
What we need from sprites:
Flexible management of the size, colour and behaviour (hover, focus, etc) of an icon
Automation, minimum of manual work
Loading only the necessary icons on the page
Easy insertion of icons into page layout (we use pug for templating html)
You can read and learn more about how our build works in the repository. To create a sprite, use gulp, namely:
gulp-svg-sprite - sprite creation
gulp-svgmin - SVG minification
gulp-cheerio - removal of unnecessary attributes from svg
gulp-replace - fixing some bugs, about it we will tell below
Install the plugins (we do this globally and then link):
Unveil the plugins in the gulpfile::
Create an svg-file with the tags symbol.
Let’s see what is happening here in parts.
We point where we need to get the icons and minify them. The variable assetsDir is for convenience.
Remove the style, fill and stroke attributes from the icons so that they do not interrupt the styles specified via css.
However, this plugin has one bug - sometimes it converts the symbol '>' to the encoding '& gt;'.
This problem is solved by the following piece of task:
Now we will make a sprite from the one we have got and put it in a folder:
dest:”../../../sass/_sprite.scss” - we announced where to generate styles for the sprite.
template: assetsDir + “sass/templates/_sprite_template.scss” - template code on the basis of which styles for the sprite will be generated.
sprite.svg - is our sprite. Inside it will contain the following (a couple of icons are shown for simplicity):
The template code for generating styles is presented on a github.
We get the _sprite.scss of the following content:
The compiled css will be like this:
Please note that the sizes of the icons are expressed in em, which will allow us to further manage them through font-size.
Make the final task, and run it:
Attach to the page
So we have got an svg-file with icons and a scss-file with a design. Insert the icons through the pug mixin as it is fast and convenient:
Now, in order to embed an icon we fetch a mixin with its name:
Open the page in the browser:
The size of the icon is still full size and they have a standard colour. Let’s change this (not in the generated file, but in the main file):
We connect the icon referring to the external svg-file, unfortunately, not all browsers support such a request. To solve this problem, there is the svg4everybody library. We connect it and initialize it:
That’s it, we have got a working system for connecting icons via sprites, but there is still one more thing.
Unfortunately, not all designers make icons on a pixel grid. In this case, the icons will be “blurred”. If you export icons from Illustrator, you need to enable the pixel grid and adjust the size and location of the icon to the pixel grid. If you work in ready-made svg-files, use the iconmoon service to properly adjust them. It is also important to convert the stroke for icons. You can read how to do this in the iconmoon documentation.