In the previous video, you learned how to display SVG graphics in multiple places by

referencing one simple element.

It's one of the most useful features of SVG, especially with icons,

because you can render icons without repeating code.

But you can even reference and clone symbols located in other files.

For example, the file sprite.svg contains an SVG with three symbols that,

when cloned, draw a calendar, weather and Twitter icon.

Over in index.html,

I can call any of these icons just like we did earlier with SVG tags and use.

The only difference is that we need to include the SVG's path and

filename before the hash symbol in xlink:href.

In this case, I'm just including the file name.

Now, the biggest advantage of using a method like this compared to,

say, rendering each icon with an image tag or

CSS background, is that it can save you loads of HTTP requests.

Serving your icons from a single SVG file is going to make your sites run faster.

So now you're starting to see the humble beginnings of a robust icon system.

Now, you could keep adding your icons as symbols inside the SVG sprite and

calling them with use, but let's face it.

Do we really want to go through all this manual work of updating that SVG file

every time we need to add or remove an icon?

Probably not.

That's what build tools are for.

One of the best tools out there for

generating SVG sprites is a tool called svg-sprite.

svg-sprite takes your folder of SVG files, optimizes them and

places them into an SVG sprite sheet.

And the best part is that the creator of svg-sprite ported this tool into Gulp,

a popular built tool in front-end development.

Now there's also a Grunt version which you can learn more about in the teachers notes

of this video.

So gulp-svg-sprite does a lot of what svg-sprite does in one simple build step.

You can follow the usage instructions in the documentation

to get started using the default options or custom configurations.

I've posted links to both svg-sprite and Gulp svg-sprite in

the teachers note along with a few other useful build tools for creating sprites.

Recently, I discovered an incredibly handy boilerplate that's based on the svg-sprite

tool and Gulp, created by UI engineer.

You can grab the latest boilerplate from the link posted in the teachers notes.

I've also included a version in the project files, with custom icons.

And once again you'll need node and

NPM installed on your computer before you can begin using the boilerplate.

So I'll bring up my terminal and navigate inside the project folder

with the command cd svg-build-tool/, then run npm install to

install all the necessary dependencies for this boilerplate.

In the project files you downloaded,

I have already included a folder full of custom icons.

And in index.html I've included a few simple

CSS rules to style the icons once they're added to the page.

All right,so now to create your

SVG sprite sheet, run the Gulp command in your terminal or console.

So now the build tool immediately grabs all the SVGs files placed

in the SVG folder and generates an SVG sprite sheet from them.

So in the sprite folder you'll see the minified SVG sprite sheet

containing all the icons as symbols.

And what's awesome is that it even auto-generates a preview page

that lets you see all your icons which helps you keep track of your icon options.

Now to view the icons in the preview page, or to view any external icon in a project,

you'll need to run a local development server.

One of the quickest ways to run a local web server that serves your files

is with Python SimpleHTTPServer.

So over in the terminal, make sure that you're in the project folder and

run the command python -m.

Then SimpleHTTPServer.

And now you can view your project on local host port 8000.

And you can view the preview page at the path sprite/sprite.symbol.html.

So now to display the icons we can call the external icons in our

HTML with the names displayed here in the preview.

So back in index.html, I'll add a set of svg tags.

And inside the svg tag, I'll add a use tag.

And within that, add the xlink:href

attribute and set it to display the calendar icon

with the path sprite/sprite.svg#calendar.

And we'll display the rest by simply copying

the svg we just wrote, pasting a new one right below, and I'll change the path

to #weather.

Let's paste in one more for the favorites icon.

So I'll change it to #favorites.

I'll give my file a save, hit refresh, and there we have our icons, cool.

So now any time you want to add a new icon to your sprite sheet,

simply drop the SVG file in the SVG folder,

run Gulp in your terminal or console, and you're all set.

And as you can see, the new camera icon appears in the preview.

So now I can call it in my HTML by simply copying one of the SVG tags,

pasting a new one right below, and changing the path to #camera.

And I can even give it a class and style it with CSS.

So let's give it the class icon--camera and

up here in my styles I'll target the class icon--camera.

Set the fill color to blue with

the value #38acd0.

And cool, there we have our blue camera icon.

Now, it's important to point out that Internet Explorer up to version 11 does

not support external sprites for use with inline SVG.

But there is a poly fill you can quickly install to make external sprites display

in those browsers.

I've posted the link to the poly fill in the teachers notes of this video.