Icons with SVG’s minified and layered using gulp

This post is about a quick POC implementing SVG Icons and a quick Angular directive for generating SVG icons.

Task Runner : Gulp

UI Framework : Angular

Gulp Modules : gulp-svgstore, gulp-svgmin, gulp-rename

I have broken down the process as below

  • All SVGs are in a folder, I used 5 svgs(weather icons) under svgs folder.
  • Minify each SVG using gulp-svgmin.
  • Combine SVGs into one, generate <Symbol> with filename of each SVGs as the id using gulp-svgstore
  • Move the generated single SVG to assets folder.
  • Use the SVG directly using the SVG tag or Angular Component as below.

Gulp Process

var gulp = require(‘gulp’);
var svgmin = require(‘gulp-svgmin’);
var svgstore = require(‘gulp-svgstore’);
var rename = require(‘gulp-rename’);
gulp.task(‘svg-icon-generator’, function() {
return gulp.src(‘./svgs/**/*.svg’)
.pipe(svgmin())
.pipe(svgstore())
.pipe(rename(‘icons.svg’))
.pipe(gulp.dest(‘./assets’));
});

The gulp task is named ‘svg-icon-generator’. The task picks all files under svgs folder with extension .svg and pipes to svgmin, then to svgstore,then rename the concatenated file to icons.svg and stores it under /assets.

Below is the command to trigger the gulp task

$: gulp svg-icon-generator

For adding the icon on to the page using SVG tag, the href attribute in the <use> tag will reference to concatenated file icons.svg, the particular symbol id is referenced using #id in this case ‘icons.svg#cloudy’

<svg class=”icon”xmlns=http://www.w3.org/2000/svg role=”img” >
<title>cloudy</title>
<use xlink:href=”assets/icons.svg#cloudy”></use>
</svg>
Screenshot of generated icon

Angular directive

The directive is written for a POC (quick and dirty) and might not cover all the scenarios.


Directive is <my-icon></my-icon>. I am using a provider to set the base path for the icon folder ‘assets’ in the config phase of the application.

The directive has 4 attributes passed in,

  • file : filename of the svg file (in our case icons)
  • icon : the symbol id which equals to individual file (cloudy)
  • class : optional parameter for passing in a class for the svg. By default ‘icon’ class is added
  • alt : For screen readers (accessibility)

Directive markup for usage,

<my-icon file=”icons” 
icon=”cloudy”
class=”icon-24”
alt=”cloudy”>
</my-icon>
// Organized each attribute in individual line for readability

The above directive generates the below markup

<svg class=”icon icon-24” xmlns=http://www.w3.org/2000/svg role=”img”>
<title>cloudy</title>
<use xlink:href=”assets/icons.svg#cloudy”></use>
</svg>

You can change the fill color of the svgs by passing in the class with fill property with desired color.

//css 
.icon-red{
fill : red;
}
<my-icon file=”icons” 
icon=”cloudy”
class=”icon-24 icon-red”
alt=”cloudy”>
</my-icon>

The POC was intended to be quick and dirty for determining feasibility and any implementation issue. I liked this approach and would be using this in a production app.

Link to Github : https://github.com/ashwin-sureshkumar/SVG-Icons-POC

Screenshot of the icons generated by the code in the repo

There is a really good post from Github Engineering about their move to SVGs https://github.com/blog/2112-delivering-octicons-with-svg

For IE Support, there is a great polyfill for the SVG maps https://github.com/jonathantneal/svg4everybody