We'll use the postcss-svg plugin (from https://github.com/Pavliko/postcss-svg), to manipulate some icons from the Evil Icon package (available from https://github.com/outpunk/gulp-evil-icons), as part of the next demo:

Although this is a simple demo, we've covered some useful tips and tricks within; it's worth taking some time to explore how the demo was put together in more detail.

There are several key elements to this exercise that are worthy of attention, the use of a CDN link and Node to provide the style sheet and icons for Evil Icons, the compiled HTML file and the references to use within our custom style sheet. We will cover all of these, but first let's explore the gulp file in more detail.

We begin with these two lines:

var evilIcons = require("gulp-evil-icons");
var postcssSVG = require('postcss-svg')

You should not be surprised to see the latter, but the former is present as the Evil Icons library can be installed using the gulp-evil-icons package. There are a number of different options available for installing, but as we're already using Gulp, it makes sense to continue using the task runner.

Next, we spread our work over two tasks—the first compiles the HTML code to assign the relevant icon image to our <icon> statements within our markup:

gulp.task('icons', function () {
  return gulp.src('src/index.html')
.pipe(evilIcons())
    .pipe(gulp.dest('dest/'));
});

To change the colors requires the use of the postcss-svg plugin, here referenced by postcssSVG:

gulp.task('changecolor', ['icons'], function() {
  gulp.src('src/style.css')
  .pipe(postcss([ postcssSVG() ]))
    .pipe(gulp.dest('dest/'));
});

We of course had to update our default task, if we simply call gulp at the command line, then it will know to run all of these tasks in turn:

gulp.task('default', ['icons', 'changecolor', 'lint-styles' , 'rename', 'sourcemap' ]);

The last step also applies a similar update to our watch facility:

var watcher = gulp.watch('src/*.*', ['default', 'icons', 'changecolor', 'lint-styles', 'rename', 'sourcemap']);

If we then take a look within the HTML markup, we can see a link to the Evil Icons library that was installed using Node.js:

<link rel="stylesheet" href="../node_modules/gulp-evil-icons/node_modules/evil-icons/assets/evil-icons.css">

We then put our customizations into a separate style sheet:

<link rel="stylesheet" type="text/css" href="css/style.css">

These look something like this:

At this stage, the CSS styles may look simple, but the HTML markup is anything but; the postcss-svg plugin has added an in-line version of our icons to the HTML markup, with the appropriate edits made from our custom style sheet:

Sometimes, it is easy to wonder if using SVG is worth the extra markup, the main benefit being that if it is added in-line, then we reduce the number of calls to external resources; any content that requires altering can be done, without sacrificing the quality of our images.

We concentrated on using the postcss-svg plugin throughout our exercise, as a start to manipulating SVG images within the PostCSS system; there are some more options available, which may be of interest:

If you have a need to provide a fall-back position for SVG files, then you can try the postcss-svg-fallback plugin, available from https://github.com/justim/postcss-svg-fallback— we will use this plugin later, in Chapter 8, Creating PostCSS Plugins.

Okay, let's change tack: using SVG images can be a little heavy handed if all we need is a straightforward format for displaying images, right? Well, we could use standard formats, or one which has superior quality while maintaining smaller sizes. I'm talking about the lesser-known WebP format from Google—let's dig in and find out more about this format, and why it deserves more attention.