Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
The SVG Fragments PostCSS plugin makes the creation and use of icons in your projects faster. You'll learn how to use fragment identifiers in your CSS to load SVG graphics from a single file.
The SVG fragments plugin is a simple
tool that lets you use fragment
0:00
identifiers in your CSS to load
all your SVG files from one file.
0:04
With fragment identifiers you display only
a part or a fragment of an SVG image.
0:09
Normally to display SVGs
as CSS background images,
0:15
you'll have individual as SVG files for
each graphic.
0:19
And the browser has to load
each SVG file separately.
0:22
Well, with post CSS SVG fragments,
you load your graphics from a single file.
0:27
So your SVG acts as a sprite sheet that
optimizes the delivery of your graphics.
0:33
In this video I'll show you how the SVG
fragments plugin makes the creation and
0:39
use of icons in your projects much faster.
0:44
In the project files you'll
see a folder named SVG.
0:48
The folder contains a simple
SVG file called icons.svg.
0:52
The SVG consists of three G elements
0:57
each G element draws a different graphic,
for example a heart.
1:01
Hammer.
1:06
And gear.
1:07
And you'll notice that
each G tag has an ID.
1:09
These ID's are the portions or
1:12
the fragments of the SVG
file we'll target with CSS.
1:15
In my terminal,
I'll install the SVG fragments
1:21
plugin by writing npm install --save-dev
1:27
followed by postcss-svg-fragments.
1:32
I'll require the new
plugin in my Gulp file.
1:42
Then I'll add the SVG fragment
variable to the processors array.
2:00
Then run Gulp in my terminal to apply the
latest changes and restart the watcher.
2:07
In the project files I've added
three div elements to index.html
2:15
with the classes icon gear,
icon hammer and icon heart.
2:20
So that you're able to see
the icons in the browser.
2:25
First in style.css or
target the class icon gear
2:29
to display the gear icon
as a background image.
2:34
You display different parts of NSVG by
specifying the URL to the SVG file.
2:40
As you normally do with
CSS background images.
2:46
Then you define the part of
the SVG file you want to display,
2:56
by appending an ID to the URL.
3:00
I know that the gear graphic
has an ID of gear, so
3:03
to display the gear icon,
I'll simply add #gear.
3:07
To the end of a URL.
3:13
The ID in the URL
identifies the fragment or
3:15
the portion of the SVG
file you want to display.
3:19
In the CSS output you'll
see how the plugin
3:23
embeds the SVG data for
the gear icon only.
3:28
Directly into the CSS with a data URI.
3:32
So when the browser reads the data URL it
decodes the data and displays the graphic.
3:36
This reduces the number of HTTP requests
made to the server which means that your
3:42
page will load faster because the browser
doesn't have to load multiple SVG files.
3:47
Now to display the icons on the page I'll
quickly go back to the source CSS and
3:52
give each icon a width and height.
3:58
Now they each share the class icn or icon.
4:01
So I'll create a new
rule with that class and
4:05
apply a width of 150 pixels and
a height of 150 pixels.
4:08
So now if I open up
the index.HTML.file in the browser
4:14
we're able to see
the light blue gear icon.
4:19
Cool.
So to display the hammer and heart,
4:22
icons I'll simply copy and
paste this icon gear rule.
4:26
And change the classes and identifiers.
4:30
So for this one, we'll say icon-hammer and
4:33
we'll change the URL to #hammer,
paste another rule and
4:37
change it to icon-heart and
change the ID to heart.
4:42
And there we have our colorful icons.
4:52
So if you need a fast and
flexible way of displaying your SVG icons
4:54
be sure to add SVG fragments
to your post CSS workflow.
4:58
For resources on plugins that
create sprite sheets with P and
5:03
G images check the teacher's notes for
this video.
5:06
You need to sign up for Treehouse in order to download course files.
Sign up