Learn Axios, Ngrx and Svgo

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.

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999. SVG images and their behaviors are defined in XML text files.

svgo

Create an SVG Icon System

Just like a bitmap image, you can compress an SVG by removing various pieces of code that aren’t necessary to it rendering properly. This reduces file size & download time, ultimately leading to a faster page load speed. You’ll learn how to automate the process of compressing your SVGs using `svgo` in the command line.

For a full list of options and plugins available to use with `svgo`, [check out their documentation](https://github.com/svg/svgo).

Note: This lesson assumes you have `npm` installed.

Optimize SVGs for Better Performance using svgo

In this lesson, we’ll explore the process of combining all of your SVG icons into one SVG sprite, to be included directly into markup. We’ll use the command line, along with the `svgo` and `svg-sprite-generator` npm packages to automate the process of compressing the SVGs and creating the sprite.

_Note:_ This lesson assumes you have `npm` installed.

Combine Multiple SVGs into an SVG Sprite

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Let's see how to use the `vue-axios` NPM package to make a request to an API, and make use of the data returned.

Make a request to an API with Axios in Vue

This lesson will focus on creating the checkbox styles for both the default and checked state. We'll make sure our styles are accessible and able to use our theme system.

We'll get started by adding an inline SVG to our input which we can style. I'll give you a tour of what is happening with the SVG and show you how to display it in the checkbox by providing a width. From there we will set the default state of the SVG to a `scale(0)` and set up a transition so when the checkbox is clicked to scale the SVG to 1.

Search

Search Results

Create an SVG Icon System

Optimize SVGs for Better Performance using svgo

Combine Multiple SVGs into an SVG Sprite

Make a request to an API with Axios in Vue

Create Custom Checkbox CSS Styles with SVG