packages/styles/scss/utilities/_icons.scss

   1 %icon-base {
   2         display: inline-block;
   3         vertical-align: middle;
   4         fill: currentcolor;
   5 }
   6
   7 /// Use the same sizing taxonomy as the sizing utility framework
   8 /// 'class_name': value_in_pixel
   9 @each $sizingname,
  10         $size
  11                 in (
  12                         '2\\\.5': 10,
  13                         '2\\\.75': 11,
  14                         '3': 12,
  15                         '3\\\.5': 14,
  16                         '4': 16,
  17                         '4\\\.5': 18,
  18                         '5': 20,
  19                         '5\\\.5': 22,
  20                         '6': 24,
  21                         '7': 28,
  22                         '8': 32,
  23                         '9': 36,
  24                         '10': 40,
  25                         '11': 44,
  26                         '12': 48,
  27                         '13': 52,
  28                         '14': 56,
  29                         '15': 60
  30                 )
  31 {
  32         .icon-size-#{$sizingname} {
  33                 @extend %icon-base; // In oder to serialize output in a same rule
  34
  35                 inline-size: rem($size);
  36                 block-size: rem($size);
  37         }
  38 }