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); + } +}