Merge pull request #151 from guastallaigor/add-kirby-icon

feat(icons): add kirby icon

docs/icons.stories.js

@@ -20,6 +20,7 @@ stories.add('icon', () => {
     'nes-charmander': 'nes-charmander',
     'nes-squirtle': 'nes-squirtle',
     'nes-smartphone': 'nes-smartphone',
+    'nes-kirby': 'nes-kirby',
     'nes-phone': 'nes-phone',
     'nes-octocat animate': 'nes-octocat animate',
     'nes-ash': 'nes-ash',

index.html

@@ -308,6 +308,7 @@
 
           <i class="nes-smartphone"></i>
           <i class="nes-phone"></i>
+          <i class="nes-kirby"></i>
         </div>
       </section>
 

scss/pixel-arts/_index.scss

@@ -14,3 +14,4 @@
 @import "squirtle.scss";
 @import "phone.scss";
 @import "smartphone.scss";
+@import "kirby.scss";

scss/pixel-arts/ash.scss

@@ -24,7 +24,7 @@
 
   position: relative;
   display: inline-block;
-  width: $px * 15;
+  width: $px * 14;
   height: $px * 15;
 
   &::before {

scss/pixel-arts/kirby.scss

@@ -0,0 +1,38 @@
+.nes-kirby {
+  $px: 6px;
+  $kirby-colors: (#000, #ffaccc, #ff5478);
+  // prettier-ignore
+  $kirby: (
+    (0,0,1,1,0,1,1,1,1,1,0,0,0,0),
+    (0,1,2,2,1,2,2,2,2,2,1,1,0,0),
+    (1,2,2,1,2,2,2,2,2,2,2,2,1,0),
+    (1,2,2,2,2,2,1,2,1,2,2,2,2,1),
+    (1,2,2,2,2,2,1,2,1,2,2,2,2,1,),
+    (1,2,2,2,2,2,1,2,1,2,2,2,2,2,1),
+    (1,2,2,2,3,3,2,2,2,3,3,2,2,2,2,1),
+    (1,2,2,2,2,2,2,1,2,2,2,2,2,2,2,1),
+    (0,1,2,2,2,2,2,1,2,2,2,2,2,2,2,1),
+    (0,1,2,2,2,2,2,2,2,2,2,2,1,1,1,0),
+    (0,1,2,2,2,2,2,2,2,2,2,1,3,3,3,1),
+    (0,0,1,2,2,2,2,2,2,2,1,3,3,3,3,1),
+    (0,0,1,1,2,2,2,2,2,2,1,3,3,3,3,1),
+    (0,1,3,3,1,1,2,2,2,1,3,3,3,3,1),
+    (1,3,3,3,3,3,1,1,1,1,1,3,3,1),
+    (0,1,1,1,1,1,1,0,0,0,1,1,1,0)
+  );
+
+  position: relative;
+  display: inline-block;
+  width: $px * 16;
+  height: $px * 16;
+
+  &::before {
+    position: absolute;
+    top: $px * -1;
+    left: $px * -1;
+    content: "";
+    background: transparent;
+
+    @include pixelize($kirby, $kirby-colors, $px);
+  }
+}

scss/pixel-arts/mario.scss

@@ -25,7 +25,7 @@
 
   position: relative;
   display: inline-block;
-  width: $px * 16;
+  width: $px * 14;
   height: $px * 16;
 
   &::before {