Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Introduction to PostCSS

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Create SVG Sprites

5:10 with Guil Hernandez

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.

Note: PostCSS SVG now integrates all the functionalities of PostCSS SVG Fragements, and the old repo has been retired! Try following along with the GitHub link below.

Resources

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    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

      You need to sign up for Treehouse in order to set up Workspace

      Sign up