Fantastic post – your SVG knowledge is amaing. I always look forward to reading your posts as I learn something new every time. Looking forward to being able to use a fragment identifier on an ‘inline’ image – saving even more HTTP requests!
In-house, we use gulp to compile an SVG sprite (with PNG fallback for IE8). This then creates a Scss map with the dimensions and co-ordinates of each icon. Using Mixins we can call the particular icon to be compiled into CSS with the correct dimensions and co-ordinates (in ems for text scaling).
This has the benefit of auto-updating the co-ordinates and dimensions should the icon change – I did do a write up of how we go from individual SVG icons to using the sprite (https://www.liquidlight.co.uk/blog/article/creating-svg-sprites-using-gulp-and-sass/) if you are interested!
Mike Street
Hi Sara,
Fantastic post – your SVG knowledge is amaing. I always look forward to reading your posts as I learn something new every time. Looking forward to being able to use a fragment identifier on an ‘inline’ image – saving even more HTTP requests!
In-house, we use gulp to compile an SVG sprite (with PNG fallback for IE8). This then creates a Scss map with the dimensions and co-ordinates of each icon. Using Mixins we can call the particular icon to be compiled into CSS with the correct dimensions and co-ordinates (in ems for text scaling).
This has the benefit of auto-updating the co-ordinates and dimensions should the icon change – I did do a write up of how we go from individual SVG icons to using the sprite (https://www.liquidlight.co.uk/blog/article/creating-svg-sprites-using-gulp-and-sass/) if you are interested!