Icon

Atoms · Updated on 15 March 2017

Documentation is WIP, check open issues and start improving!

Icon component contains static Image or SVG loaded from local or remote source.

This component also has margin_left and margin_right properties, which specifies the distance between the surrounding components. These margins are always pre-defined based on icon size.

Documentation

Specifications

$icon-sizes: (
  xxx-small     : unit(1),         // 4px
  xx-small      : unit(2),         // 8px
  x-small       : unit(3),         // 12px
  small         : unit(4),         // 16px
  medium        : unit(6),         // 24px
  large         : unit(8),         // 32px
  x-large       : unit(12),        // 48px
  xx-large      : unit(16),        // 64px
);

$icon-margins: (
  xxx-small     : unit(1),         // 4px
  xx-small      : unit(1),         // 4px
  x-small       : unit(1),         // 4px
  small         : unit(2),         // 8px
  medium        : unit(2),         // 8px
  large         : unit(3),         // 12px
  x-large       : unit(3),         // 12px
  xx-large      : unit(3),         // 12px
);

$icon-margin-directions: 'left', 'right';

API

Name	Values	Default
size	xxx-small / xx-small / x-small / small / medium / large / x-large / xx-large	medium
margin_left	true / false	false
margin_right	true / false	false