How to create and use an SVG Sprite
In this video, we explore several different ways to create an SVG Sprite and how to use it within your code.
0:00 Intro and Beginning
0:46 What's a Sprite?
2:16 SVG Sprite Generator
2:41 Sprite code walkthrough
5:26 Cleaning up a sprite with tooling
5:53 Installing svgo
6:56 Setting up the configuration for svgo
8:31 Setting up an alias with Oh My Zsh to run the svgo command
9:38 Generating a Sprite with the svg-sprite-generator tool from the command line
12:05 Putting our SVG code into an external file
13:18 Loading the SVG Sprite with AJAX
🎁 FREE SVG CHEAT SHEET: https://selfteachme.ck.page/ee58f2eb85
7️⃣ Ways to use SVGs
✅ Pros and ❌ Cons for each method
💎 Tips for implementing
🔗 LINKS
SVG Sprite Generator Tool (web interface) - https://svgsprit.es/
On xlink:href being deprecated in SVG - https://css-tricks.com/on-xlinkhref-b...
svgo - https://github.com/svg/svgo
svgo configuration - https://gist.github.com/ahaywood/6604...
Video: Oh My ZSH - • git for Beginners (Part 11): Oh My Zs...
SVG Sprite Generator Command Line tool - https://github.com/frexy/svg-sprite-g...
XMLHttpRequest documentation - https://www.w3schools.com/xml/xml_htt...
Video : Ultimate Icon Component - • Building the Ultimate React Icon Comp...
OTHER VIDEOS IN THIS SERIES
Playlist: • Comprehensive Guide to Getting Starte...
Part 1 - Getting Started with SVGs: • Getting Started with SVGs
Part 2 - SVG in CSS: • SVGs in CSS
Part 3 - Svgs with Base64 - • How to Use SVGs with Base64
Part 4 - How to create and use an SVG Sprite - You are here, THAT'S THIS VIDEO
🤖 CODE
CodePen - Sprite embedded in HTML - https://codepen.io/ahaywood/pen/ZEBERqR
CodePen - Imported with AJAX - https://codepen.io/ahaywood/pen/mdOPbbM
👉🏻 Get Updates and Exclusive content at http://selfteach.me
💥 SelfTeach.me is a Zeal show: http://codingzeal.com
