feat(icons): add mario icon (#116)

* feat(icons): add mario icon

* feat(icons): add mario to storybook

docs/icons.stories.js

@@ -21,6 +21,7 @@ stories.add('icon', () => {
     'octocat animate': 'octocat animate',
     ash: 'ash',
     'icon trophy': 'icon trophy',
+    mario: 'mario',
     'nes-logo': 'nes-logo',
     'nes-jp-logo': 'nes-jp-logo',
     'snes-logo': 'snes-logo',

index.html

@@ -266,6 +266,7 @@ <h3 class="title">Others</h3>
           <i class="icon trophy is-medium"></i>
           <i class="icon trophy is-large"></i>
 
+          <i class="mario"></i>
           <i class="ash"></i>
           <i class="pokeball"></i>
           <i class="smartphone"></i>

scss/pixel-arts/_index.scss

@@ -7,6 +7,7 @@
 @import "bcrikko.scss";
 @import "ash.scss";
 @import "octocat.scss";
+@import "mario.scss";
 @import "pokeball.scss";
 @import "phone.scss";
 @import "smartphone.scss";

scss/pixel-arts/mario.scss

@@ -0,0 +1,40 @@
+.mario {
+  $px: 6px;
+  // prettier-ignore
+  $mario-colors: (#f81c2f, #65352b, #ffbb8e, #000,
+    #1560ad, #aeaeac, #fef102);
+  // prettier-ignore
+  $mario: (
+    (0,0,0,0,1,1,1,1,1,0,0,0,0,0),
+    (0,0,0,1,1,1,1,1,1,1,1,1,0,0),
+    (0,0,0,2,2,2,3,3,4,3,0,0,0,0),
+    (0,0,2,3,2,3,3,3,4,3,3,3,0,0),
+    (0,0,2,3,2,2,3,3,3,4,3,3,3,0),
+    (0,0,2,2,3,3,3,3,4,4,4,4,0,0),
+    (0,0,0,0,3,3,3,3,3,3,3,0,0,0),
+    (0,0,0,0,1,5,1,1,5,0,0,0,0,0),
+    (0,0,1,1,1,5,1,1,5,1,1,1,0,0),
+    (0,1,1,1,1,5,5,5,5,1,1,1,1,0),
+    (0,6,6,1,5,7,5,5,7,5,1,6,6,0),
+    (0,6,6,6,5,5,5,5,5,5,6,6,6,0),
+    (0,6,6,5,5,5,5,5,5,5,5,6,6,0),
+    (0,0,0,5,5,5,0,0,5,5,5,0,0,0),
+    (0,0,2,2,2,0,0,0,0,2,2,2,0,0),
+    (0,2,2,2,2,0,0,0,0,2,2,2,2,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($mario, $mario-colors, $px);
+  }
+}