feat(icons): add pokeball icon (#117)

* feat(icons): add pokeball icon

* docs(icons): add pokeball to storybook

docs/icons.stories.js

@@ -14,6 +14,7 @@ stories.add('icon', () => {
     'icon google': 'icon google',
     'icon youtube': 'icon youtube',
     'icon close': 'icon close',
+    pokeball: 'pokeball',
     'octocat animate': 'octocat animate',
     'icon trophy': 'icon trophy',
     'nes-logo': 'nes-logo',

index.html

@@ -242,6 +242,8 @@ <h3 class="title">Others</h3>
           <i class="icon trophy"></i>
           <i class="icon trophy is-medium"></i>
           <i class="icon trophy is-large"></i>
+
+          <i class="pokeball"></i>
         </div>
       </section>
 

scss/pixel-arts/_index.scss

@@ -6,3 +6,4 @@
 @import "snes-jp-icon.scss";
 @import "bcrikko.scss";
 @import "octocat.scss";
+@import "pokeball.scss";

scss/pixel-arts/pokeball.scss

@@ -0,0 +1,38 @@
+.pokeball {
+  $px: 6px;
+  $pokeball-colors: (#060606, #ff001d, #fff, #9fa1a1);
+  // prettier-ignore
+  $pokeball: (
+    (0,0,0,0,0,1,1,1,1,0,0,0,0,0),
+    (0,0,0,1,1,2,2,2,2,1,1,0,0,0),
+    (0,0,1,3,3,2,2,2,2,2,2,1,0,0),
+    (0,1,3,3,2,2,2,2,2,2,2,1,1,0),
+    (0,1,3,2,2,2,2,2,2,2,2,2,1,0),
+    (1,3,2,2,2,2,2,2,2,2,2,2,2,1),
+    (1,1,1,2,2,2,2,1,1,1,2,2,2,1),
+    (1,1,1,1,2,2,1,3,3,3,1,2,2,1),
+    (1,4,3,1,1,1,1,3,3,3,1,1,1,1),
+    (0,1,3,3,3,1,1,3,3,3,1,3,1,0),
+    (0,1,3,3,3,3,3,1,1,1,3,3,1,0),
+    (0,0,1,4,4,3,3,3,3,3,3,1,0,0),
+    (0,0,0,1,1,4,4,4,4,1,1,0,0,0),
+    (0,0,0,0,0,1,1,1,1,0,0,0,0,0),
+    (0,0,0,0,0,0,0,0,0,0,0,0,0,0),
+    (0,0,0,0,0,0,0,0,0,0,0,0,0,0),
+  );
+
+  position: relative;
+  display: inline-block;
+  width: $px * 14;
+  height: $px * 14;
+
+  &::before {
+    position: absolute;
+    top: $px * -1;
+    left: $px * -1;
+    content: "";
+    background: transparent;
+
+    @include pixelize($pokeball, $pokeball-colors, $px);
+  }
+}