<svg class="icon icon--heart-item">
<use xlink:href="/assets/icons/icons.svg#heart-item"></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. */
// 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;
}
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:
<g> element, and its
child <path> elements.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,
Object > Path > Outline Stroke menu item,
andPath > Stroke to Path menu item.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.
We prefer to handle SVG color information in CSS wherever possible:
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.
When the icon contains exactly two colors, color information can still be
applied ed via CSS as described in icons.scss.
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.