feat: coin-icon

nostalgic-css · Feb 9, 2019 · a0aed6a · a0aed6a
1 parent 913487e
commit a0aed6a
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 0 deletions.
diff --git a/docs/icons.stories.js b/docs/icons.stories.js
@@ -32,6 +32,7 @@ stories.add('icon', () => {
     'nes-jp-logo': 'nes-jp-logo',
     'snes-logo': 'snes-logo',
     'snes-jp-logo': 'snes-jp-logo',
+    'nes-coin': 'nes-coin',
   }, 'nes-icon twitter');
   const selectedSize = radios('size', {
     default: '',

diff --git a/scss/pixel-arts/_index.scss b/scss/pixel-arts/_index.scss
@@ -15,3 +15,4 @@
 @import "mario.scss";
 @import "kirby.scss";
 @import "octocat.scss";
+@import "coin.scss";
diff --git a/scss/pixel-arts/coin.scss b/scss/pixel-arts/coin.scss
@@ -0,0 +1,36 @@
+.nes-coin {
+  $coin-colors: (#060606,#ffd700, #daa520);
+  // prettier-ignore
+  $coin: (
+    (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,2,2,1,1,1,1,2,2,1,0,0),
+    (0,1,2,1,1,3,3,3,3,1,2,1,1,0),
+    (0,1,2,1,3,3,3,3,3,3,1,2,1,0),
+    (1,2,1,3,3,3,3,3,3,3,3,1,2,1),
+    (1,2,1,3,3,3,3,3,3,3,3,1,2,1),
+    (1,2,1,3,3,3,3,3,3,3,3,1,2,1),
+    (1,2,1,3,3,3,3,3,3,3,3,1,2,1),
+    (0,1,2,1,3,3,3,3,3,3,1,2,1,0),
+    (0,1,2,1,1,3,3,3,3,1,2,2,1,0),
+    (0,0,1,2,2,1,1,1,1,2,2,1,0,0),
+    (0,0,0,1,1,2,2,2,2,1,1,0,0,0),
+    (0,0,0,0,0,1,1,1,1,0,0,0,0,0),
+  );
+  $size: 6px;
+
+  position: relative;
+  display: inline-block;
+  width: $size * length(nth($coin, 1));
+  height: $size * length($coin);
+
+  &::before {
+    position: absolute;
+    top: -$size;
+    left: -$size;
+    content: "";
+    background: transparent;
+
+    @include pixelize($size, $coin, $coin-colors);
+  }
+}