diff --git a/docs/icons.stories.js b/docs/icons.stories.js index a08438f..1d1daa0 100644 --- a/docs/icons.stories.js +++ b/docs/icons.stories.js @@ -33,6 +33,7 @@ stories.add('icon', () => { 'nes-jp-logo': 'nes-jp-logo', 'snes-logo': 'snes-logo', 'snes-jp-logo': 'snes-jp-logo', + 'nes-psone': 'nes-psone', }, 'nes-icon twitter'); const selectedSize = radios('size', { default: '', diff --git a/index.html b/index.html index 2c91c93..8cec695 100644 --- a/index.html +++ b/index.html @@ -1005,6 +1005,7 @@ + Copied! @@ -1013,7 +1014,8 @@
<i class="nes-logo"></i>
<i class="nes-jp-logo"></i>
<i class="snes-logo"></i>
-<i class="snes-jp-logo"></i>
+<i class="snes-jp-logo"></i>
+<i class="nes-psone"></i>
diff --git a/scss/pixel-arts/_index.scss b/scss/pixel-arts/_index.scss
index 8303885..c94316b 100644
--- a/scss/pixel-arts/_index.scss
+++ b/scss/pixel-arts/_index.scss
@@ -14,4 +14,5 @@
@import "smartphone.scss";
@import "mario.scss";
@import "kirby.scss";
+@import "psone.scss";
@import "octocat.scss";
diff --git a/scss/pixel-arts/psone.scss b/scss/pixel-arts/psone.scss
new file mode 100644
index 0000000..a1c9e90
--- /dev/null
+++ b/scss/pixel-arts/psone.scss
@@ -0,0 +1,34 @@
+.nes-psone {
+ $psone-colors: (#cbcbcb, #b1b1b2, #2a2a2a);
+
+ // prettier-ignore
+ $psone: (
+ (0,0,0,0,0,0,0,3,0,0,0,0,0,0,0,0),
+ (0,0,1,1,1,0,0,3,0,0,0,1,1,1,0,0),
+ (0,1,1,1,1,1,0,0,3,0,1,1,1,1,1,0),
+ (1,1,1,3,1,1,1,1,1,1,1,1,3,1,1,1),
+ (1,1,3,1,3,1,1,1,1,1,1,3,1,3,1,1),
+ (1,1,1,3,1,1,1,1,1,1,1,1,3,1,1,1),
+ (2,1,1,1,1,1,3,1,1,3,1,1,1,1,1,2),
+ (2,2,1,1,1,0,0,0,0,0,0,1,1,1,2,2),
+ (2,2,2,2,0,0,0,0,0,0,0,0,2,2,2,2),
+ (0,2,2,0,0,0,0,0,0,0,0,0,0,2,2,0)
+ );
+
+ $size: 4px;
+
+ position: relative;
+ display: inline-block;
+ width: $size * length(nth($psone, 1));
+ height: $size * length($psone);
+
+ &::before {
+ position: absolute;
+ top: -$size;
+ left: -$size;
+ content: "";
+ background: transparent;
+
+ @include pixelize($size, $psone, $psone-colors);
+ }
+}