Search 6,000+ CA Community College Courses

Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

egghead.io

Create an SVG Icon System

via egghead.io

Go to class Write review

Overview

In this course, we will dive into a number of different ways we can create, optimize and integrate an SVG icon set. There are pros and cons to each method, so we’ll dissect each approach so you can make an informed decision for your project. We will learn how to use build tools to automate the process of creating, manipulating and optimizing icons. We’ll take a look at how to use CSS to manipulate styles on an SVG and even how to integrate your SVG icons in a React project.

Syllabus

  • Optimize SVGs for Better Performance using svgo
  • Include an SVG with an Image Tag
  • Add an SVG as a Background Image
  • Add an SVG as an Embedded Background Image
  • Combine Multiple SVGs into an SVG Sprite
  • Add an SVG Sprite as a Background Image
  • Automate SVG Sprite Background Image Variations with a SCSS Mixin
  • Embed SVG Directly In Markup with the “Use” Tag
  • Load an External SVG Inside a “Use” Tag
  • Style an SVG Icon with CSS
  • Build an SVG icon component in React

Taught by

Damon Bauer

Reviews

Start your review of Create an SVG Icon System

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.