Icon System

This page demonstrates how to use an svg icon system that starts with a collection of svg icons that are compiled into a single svg sprite. We encourage you to study the Gulp file in order to understand the actual build system.

Inline SVG with
External Source

Icons are compiled into a single svg sprite using gulp-svg-sprite. While we will predominantly use the svg sprite, we'll also want access to individual svgs - they are also optimized and putted near sprite file.

Using an external svg sprite gives us caching and the ability to use inline svg. For additional information and caveats, see Chris Coyier's great explanation. A polyfill is necessary for IE 9-11. If you hate the idea of a polyfill, it's okay. This system will still work for you. Simply include the svg sprite on every page and change the use xlink:href reference to ONLY be the hashtag and filename.

<!-- Just use the name of icon in dev -->
<svg class="o-ic o-ic--sprite">
  <use xlink:href="icons/sprite.svg#name_of_icon">

Now that you understand the basics, let's add some color. Just add a contextual color class to the icon class. Btw, you can use nunjucks macros:

//mod, class, attr
{ icon('name_of_icon', 'u-desired-color', '') }

What's the point, doc?

  • Ony one tiny optimized svg for whole project..
  • Easy to use in html
  • All svgs in one place, you don't need to base64 all icons or fonts.
  • Don't have any shit with svg css sprites
  • Works like a font: font-size, color, etc...
  • Automatically generated icon map for project.

Remove SVG Fills for Single-Color Icons! For single-color icons, all fill definitions should be removed from each svg icon before being compiled into a sprite so that the icons can inherit the body color and be colored using CSS.

Just open up each svg in your favorite text editor and remove any "fill=" that you see and save the file. For multi-colored icons, the fill definitions may remain.

URL-encoder for SVG

Perhaps you've heard of data URIs. It's a really nice way of including a resource that would have otherwise been a separate HTTP request. The format that you use in a data URI can vary. Yes, now we can simple base our svg icon with:

.o-ic--modifier {
    background-image: inline-svg("heart-test", green);

Yes, you can add color and yes you don't need to add path o something else. Just add desired icon to dev/icons/inline. After optimization it will be ready to use.

Just generated sprite:

This page is generated automatically by C.U.M.O.
Use the force of utility classes, Luke...