In this video, you'll learn tools for generating SVG sprites, then build an SVG icon system using a handy Gulp-based boilerplate.
because you can render icons without repeating code.
But you can even reference and clone symbols located in other files.
when cloned, draw a calendar, weather and Twitter icon.
I can call any of these icons just like we did earlier with SVG tags and use.
filename before the hash symbol in xlink:href.
In this case, I'm just including the file name.
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.
calling them with use, but let's face it.
every time we need to add or remove an icon?
That's what build tools are for.
generating SVG sprites is a tool called svg-sprite.
places them into an SVG sprite sheet.
a popular built tool in front-end development.
So gulp-svg-sprite does a lot of what svg-sprite does in one simple build step.
to get started using the default options or custom configurations.
the teachers note along with a few other useful build tools for creating sprites.
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.
NPM installed on your computer before you can begin using the boilerplate.
install all the necessary dependencies for this boilerplate.
I have already included a folder full of custom icons.
CSS rules to style the icons once they're added to the page.
SVG sprite sheet, run the Gulp command in your terminal or console.
in the SVG folder and generates an SVG sprite sheet from them.
containing all the icons as symbols.
that lets you see all your icons which helps you keep track of your icon options.
you'll need to run a local development server.
run the command python -m.
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.
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.
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.
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.
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.
up here in my styles I'll target the class icon--camera.
And cool, there we have our blue camera icon.
not support external sprites for use with inline SVG.
I've posted the link to the poly fill in the teachers notes of this video.