feat(icons): add phone and smartphone icons (#131)

* feat(icons): add smartphone icon

* docs(icons): add smartphone to storybook

* feat(icons): add phone icon

* docs(icons): add phone to storybook

docs/icons.stories.js

@@ -15,6 +15,8 @@ stories.add('icon', () => {
     'icon youtube': 'icon youtube',
     'icon close': 'icon close',
     pokeball: 'pokeball',
+    smartphone: 'smartphone',
+    phone: 'phone',
     'octocat animate': 'octocat animate',
     'icon trophy': 'icon trophy',
     'nes-logo': 'nes-logo',

index.html

@@ -223,7 +223,7 @@
           <i class="icon twitch"></i>
           <i class="icon twitch is-medium"></i>
           <i class="icon twitch is-large"></i>
-        
+
           <i class="icon reddit"></i>
           <i class="icon reddit is-medium"></i>
           <i class="icon reddit is-large"></i>
@@ -244,6 +244,8 @@
           <i class="icon trophy is-large"></i>
 
           <i class="pokeball"></i>
+          <i class="smartphone"></i>
+          <i class="phone"></i>
         </div>
       </section>
 

scss/icons/icons.scss

@@ -89,12 +89,12 @@
 
     &.medium::before {
       @include pixelize($icon-medium, $icon-medium-colors, $px);
-    }    
+    }
-    
+
     &.twitch::before {
       @include pixelize($icon-twitch, $icon-twitch-colors, $px);
     }
-    
+
     &.reddit::before {
       @include pixelize($icon-reddit, $icon-reddit-colors, $px);
     }

scss/pixel-arts/_index.scss

@@ -7,3 +7,5 @@
 @import "bcrikko.scss";
 @import "octocat.scss";
 @import "pokeball.scss";
+@import "phone.scss";
+@import "smartphone.scss";

scss/pixel-arts/phone.scss

@@ -0,0 +1,43 @@
+.phone {
+  $px: 6px;
+  $phone-colors: (#596985, #3c4665, #000);
+  // prettier-ignore
+  $phone: (
+    (0,0,3,3,3,3,3,3),
+    (0,3,3,2,2,2,1,3),
+    (3,3,2,2,2,2,1,3),
+    (3,2,2,2,2,2,1,3),
+    (3,2,2,2,2,2,1,3),
+    (3,2,2,2,2,2,1,3),
+    (3,2,2,3,3,3,3,3),
+    (3,2,2,3,0,0,0,0),
+    (3,2,2,3,0,0,0,0),
+    (3,2,2,3,0,0,0,0),
+    (3,2,2,3,0,0,0,0),
+    (3,2,2,3,0,0,0,0),
+    (3,2,2,3,0,0,0,0),
+    (3,2,2,3,0,0,0,0),
+    (3,2,2,3,3,3,3,3),
+    (3,2,2,2,2,2,1,3),
+    (3,2,2,2,2,2,1,3),
+    (3,2,2,2,2,2,1,3),
+    (3,3,2,2,2,2,1,3),
+    (0,3,3,2,2,2,1,3),
+    (0,0,3,3,3,3,3,3)
+  );
+
+  position: relative;
+  display: inline-block;
+  width: $px * 8;
+  height: $px * 21;
+
+  &::before {
+    position: absolute;
+    top: $px * -1;
+    left: $px * -1;
+    content: "";
+    background: transparent;
+
+    @include pixelize($phone, $phone-colors, $px);
+  }
+}

scss/pixel-arts/smartphone.scss

@@ -0,0 +1,49 @@
+.smartphone {
+  $px: 6px;
+  $smartphone-colors: (#fff, #060606);
+  // prettier-ignore
+  $smartphone: (
+    (0,2,2,2,2,2,2,2,2,2,2,2,2,2),
+    (2,2,1,1,1,1,1,1,1,1,1,1,1,2,2),
+    (2,1,1,1,2,2,2,2,2,2,2,1,1,1,2),
+    (2,1,1,1,1,1,1,1,1,1,1,1,1,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,1,1,1,1,1,1,1,1,1,1,1,1,2),
+    (2,1,1,1,1,1,1,2,2,1,1,1,1,1,2),
+    (2,1,1,1,1,1,1,2,2,1,1,1,1,1,2),
+    (2,2,1,1,1,1,1,1,1,1,1,1,1,2,2),
+    (0,2,2,2,2,2,2,2,2,2,2,2,2,2)
+  );
+
+  position: relative;
+  display: inline-block;
+  width: $px * 16;
+  height: $px * 27;
+
+  &::before {
+    position: absolute;
+    top: $px * -1;
+    left: $px * -1;
+    content: "";
+    background: transparent;
+
+    @include pixelize($smartphone, $smartphone-colors, $px);
+  }
+}