Icon

Updated on 05 October 2016

Docs are work in progress, check open issues and see how you can help!

Icon component contains static image or svg loaded from local source. Source sometimes isn’t the same size as container, so it’s always centered inside of it and never scaled or stretched. See Image component for remote content container.

TODO: Add source property explanation and examples

Sizes

Icon component can be several sizes:

  • X-Small - 8px
  • Small — 12px
  • Medium — 16px
  • Default — 24px
  • Large — 32px
  • X-Large — 48px
  • XX-Large — 72px
  • XXX-Large — 96px

Specifications

// Sizes

$icon-sizes: (
  x-small       : unit(2),         // 8
  small         : unit(3),         // 12
  medium        : unit(4),         // 16
  default       : unit(6),         // 24
  large         : unit(8),         // 32
  x-large       : unit(12),        // 48
  xx-large      : unit(18),        // 72
  xxx-large     : unit(24),        // 96
);

API

name type default
size x-small / small / medium / default / large / x-large / xx-large / xxx-large default