Automate SVG Sprite Background Image Variations with a SCSS Mixin

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <i class="Icon Icon--plug"></i>
<i class="Icon Icon--star"></i>
<i class="Icon Icon--umbrella"></i>

<br><br><br>

<i class="Icon Icon--small Icon--plug"></i>
<i class="Icon Icon--small Icon--star"></i>
<i class="Icon Icon--small Icon--umbrella"></i>
  </body>

</html>

$icons: plug, star, umbrella;
$defaultSize: 3em;
$smallSize: 2em;

.Icon {
  display: inline-block;
  width: $defaultSize;
  height: $defaultSize;
  background-image: url(http://damonbauer.me/assets/images/implementing-svg/icons_sprite.svg);
  background-repeat: no-repeat;
  background-size: cover;
}

.Icon--small {
  width: $smallSize;
  height: $smallSize;
}

@each $icon in $icons {
  $index: index($icons, $icon) - 1;
  
  .Icon--#{$icon} {
    background-position: 0 #{-$index * $defaultSize};
    
    &.Icon--small {
      background-position: 0 #{-$index * $smallSize};
    }
  }
}



body {
  margin: 20px;
}