<svg class="icon icon--snowflake">
  <use xlink:href="/assets/icons/icons.svg#snowflake"></use>
</svg>
<svg class="icon icon--{{_self.name}}">
  <use xlink:href="/assets/icons/icons.svg#{{_self.name}}"></use>
</svg>
/* No context defined for this component. */
  • Content:
    // Icons should be colored (using `fill`) and otherwise styled within the
    // component that is using it. For example:
    //
    // ```
    // .component-name {
    //   .icon--example {
    //     fill: $color-primary;
    //   }
    // }
    // ```
    //
    // Due to the limitations of the `use` tag, `fill` only works on the entire icon
    // and individual parts of the icon can't be individually colored. There is a
    // trick, however, to use two colors. To do so, add a `fill="currentColor"`
    // attribute value on the path that should receive the second color within the
    // SVG file. Any SVG path without that can now be colored with `fill`, and the
    // path with that attribute is colored with `color`. For example:
    //
    // ```
    // .component-name {
    //   .icon--example {
    //     color: $color-error;
    //     fill: $color-primary;
    //   }
    // }
    // ```
    //
    // @see https://codepen.io/FWeinb/post/quick-tip-svg-use-style-two-colors
    //
    // Icons with 3+ colors that don't need to change per brand should have the
    // colors embedded within the SVG file (using the `fill` attribute).
    
    // Prevents a common reset rule of * { box-sizing: border-box; } from breaking
    // the displayed size of icons.
    .icon {
      box-sizing: content-box;
    }
    
    // Alters the circle's fill in the item icons per brand. Requires the
    // `fill="currentColor"` attribute value on the path within the SVG file.
    .icon--cart-item,
    .icon--heart-item {
      color: $color-primary;
    }
    
  • URL: /components/raw/icons/icons.scss
  • Filesystem Path: src/components/01-elements/icons/icons.scss
  • Size: 1.4 KB

SVG icons produced by Sketch (and other applications) contain a lot of excess markup and attributes. All icons in the library should be cleaned up for use.

In most situations, there are two requirements for the cleanup:

  1. SVG files should contain only one attribute-free <g> element, and its child <path> elements.
  2. All strokes in the SVG should be converted to paths.

Convert Strokes to Paths

This needs to be done with a vector illustration program such as Illustrator or Inkscape. Generally these programs will include an explicit command for this. For example,

  • in Illustrator, use the Object > Path > Outline Stroke menu item, and
  • in Inkscape, use the Path > Stroke to Path menu item.

Cleanup unneeded elements and attributes.

This can be done either manually or via the command-line, though even command-line tools will require some manual cleanup.

The npm package svgo is one of the library’s dependencies, so the basic cleanup can be accomplished with the following command:

svgo --pretty icon-name.svg

Any remaining attributes on the <g> element should be removed manually.

Color in SVG Icons

We prefer to handle SVG color information in CSS wherever possible:

Single-color Icons

When the icon contains only one color, all color information should be removed from the SVG (as described above) and colors should be applied via CSS, as described in icons.scss.

Two-color Icons

When the icon contains exactly two colors, color information can still be applied ed via CSS as described in icons.scss.

Multiple-color Icons

When the icon has multiple/complex colors, it’s easiest to leave that information in the SVG file itself. Note that this means the icon’s colors can’t be changed with CSS.