feat(icons): empty trophy + is-small modifier (#128)

docs/icons.stories.js

@@ -26,6 +26,7 @@ stories.add('icon', () => {
   }, 'icon twitter');
   const selectedSize = radios('size', {
     default: '',
+    'is-small': 'is-small',
     'is-medium': 'is-medium',
     'is-large': 'is-large',
   }, '');

index.html

@@ -177,16 +177,19 @@ <h2 class="title">Icons</h2>
       <section class="container with-title">
         <h3 class="title">Reaction</h3>
         <div>
+          <i class="icon heart is-small"></i>
           <i class="icon heart"></i>
           <i class="icon heart is-medium"></i>
           <i class="icon heart is-large"></i>
           <i class="icon heart is-empty"></i>
 
+          <i class="icon star is-small"></i>
           <i class="icon star"></i>
           <i class="icon star is-medium"></i>
           <i class="icon star is-large"></i>
           <i class="icon star is-empty"></i>
 
+          <i class="icon like is-small"></i>
           <i class="icon like"></i>
           <i class="icon like is-medium"></i>
           <i class="icon like is-large"></i>
@@ -196,34 +199,42 @@ <h3 class="title">Reaction</h3>
       <section class="container with-title">
         <h3 class="title">SNS</h3>
         <div>
+            <i class="icon twitter is-small"></i>
           <i class="icon twitter"></i>
           <i class="icon twitter is-medium"></i>
           <i class="icon twitter is-large"></i>
 
+          <i class="icon facebook is-small"></i>
           <i class="icon facebook"></i>
           <i class="icon facebook is-medium"></i>
           <i class="icon facebook is-large"></i>
 
+          <i class="icon github is-small"></i>
           <i class="icon github"></i>
           <i class="icon github is-medium"></i>
           <i class="icon github is-large"></i>
 
+          <i class="icon youtube is-small"></i>
           <i class="icon youtube"></i>
           <i class="icon youtube is-medium"></i>
           <i class="icon youtube is-large"></i>
 
+          <i class="icon google is-small"></i>
           <i class="icon google"></i>
           <i class="icon google is-medium"></i>
           <i class="icon google is-large"></i>
 
+          <i class="icon medium is-small"></i>
           <i class="icon medium"></i>
           <i class="icon medium is-medium"></i>
           <i class="icon medium is-large"></i>
 
+          <i class="icon twitch is-small"></i>
           <i class="icon twitch"></i>
           <i class="icon twitch is-medium"></i>
           <i class="icon twitch is-large"></i>
 
+          <i class="icon reddit is-small"></i>
           <i class="icon reddit"></i>
           <i class="icon reddit is-medium"></i>
           <i class="icon reddit is-large"></i>
@@ -233,12 +244,14 @@ <h3 class="title">SNS</h3>
       <section class="container with-title">
         <h3 class="title">Others</h3>
         <div>
+            <i class="icon close is-small"></i>
           <i class="icon close"></i>
           <i class="icon close is-medium"></i>
           <i class="icon close is-large"></i>
 
           <i class="octocat animate"></i>
 
+          <i class="icon trophy is-small"></i>
           <i class="icon trophy"></i>
           <i class="icon trophy is-medium"></i>
           <i class="icon trophy is-large"></i>

scss/icons/icons.scss

@@ -55,6 +55,9 @@
     &.trophy::before {
       @include pixelize($icon-trophy, $icon-trophy-colors, $px);
     }
+    &.trophy.is-empty::before {
+      @include pixelize($icon-trophy-empty, $icon-trophy-empty-colors, $px);
+    }
 
     &.like::before {
       @include pixelize($icon-like, $icon-like-colors, $px);
@@ -103,6 +106,10 @@
   // default
   @include setup(2px);
 
+  &.is-small {
+    @include setup(1px);
+  }
+
   &.is-medium {
     @include setup(3px);
   }

scss/icons/trophy.scss

@@ -16,10 +16,26 @@ $icon-trophy: (
   (0,0,0,0,0,0,2,3,2,0,0,0,0,0,0,0),
   (0,0,0,0,0,2,2,3,2,2,0,0,0,0,0,0),
   (0,0,0,0,2,3,3,3,3,4,2,0,0,0,0,0),
-  (0,0,0,0,2,2,2,2,2,2,2,0,0,0,0,0),
+  (0,0,0,0,2,2,2,2,2,2,2,0,0,0,0,0)
 );
 
-// 2 black
-// 3 yellow
-// 1 white
-// 4 orange
+$icon-trophy-empty-colors: (#adafbb);
+// prettier-ignore
+$icon-trophy-empty: (
+  (0,0,1,1,1,1,1,1,1,1,1,1,1,0,0,0),
+  (0,0,1,0,0,0,0,0,0,0,0,0,1,0,0,0),
+  (1,1,1,0,0,0,0,0,0,0,0,0,1,1,1,0),
+  (1,0,1,0,0,0,0,0,0,0,0,0,1,0,1,0),
+  (1,0,1,0,0,0,0,0,0,0,0,0,1,0,1,0),
+  (0,1,1,0,0,0,0,0,0,0,0,0,1,1,0,0),
+  (0,0,1,0,0,0,0,0,0,0,0,0,1,0,0,0),
+  (0,0,1,0,0,0,0,0,0,0,0,0,1,0,0,0),
+  (0,0,0,1,0,0,0,0,0,0,0,1,0,0,0,0),
+  (0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0),
+  (0,0,0,0,0,1,0,0,0,1,0,0,0,0,0,0),
+  (0,0,0,0,0,0,1,0,1,0,0,0,0,0,0,0),
+  (0,0,0,0,0,0,1,0,1,0,0,0,0,0,0,0),
+  (0,0,0,0,0,1,1,0,1,1,0,0,0,0,0,0),
+  (0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0),
+  (0,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0)
+);