Cyber Monday Sale Save up to 40% off unlimited courses, tutorials and creative assets. Cyber Monday Sale! Save Now
by
Lessons:2Length:12 minutes

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

1.1 Introduction

Creating sprite sheets using a raster format is a thing of the past, and icon fonts (which were once the pinnacle of web development) are no longer as relevant. So what should developers be using now? SVG is a format that many feel will stay relevant for years to come, becoming the one and only format developers choose to implement their icons.

During this brief Coffee Break Course, we’ll take a look at how to create an SVG sprite using Gulp. If you’re a fan of SVG and icons, this will be the perfect break to learn how to create an SVG sprite for your project’s icons.

To follow along, you’ll need a basic understanding of how to use NPM and Gulp. If you’re not yet comfortable with these, get up to speed with Kezz Bracey’s introductions listed below:

Relevant Links

1.How to Build an SVG Sprite Using Gulp
2 lessons, 11:57

Free Lesson
1.1
Introduction
00:35

1.2
How to Build an SVG Sprite Using Gulp
11:22


1.1 Introduction

[SOUND] Hello everyone, and welcome to How to Build an SVG Sprite Using Gulp by Tuts+. My name is Dennis Gaebel, and I'll be walking you through the steps required in order to make an SVG icon system for your next project, utilizing tooling to help speed up your workflow and make the mundane less mundane. In this course, you'll install all the required Gulp plugins and create the entire Gulp task that will take each original SVG file and combine it into one complete SVG Sprite. I hope you enjoy the course and I'll see you in the next lesson where we will begin to build our SVG Sprite with Gulp.

Back to the top