diff --git a/docs/icons.stories.js b/docs/icons.stories.js index 699682a..ff41eb5 100644 --- 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 index 8303885..5f3af20 100644 --- 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 new file mode 100644 index 0000000..1ddad3d --- /dev/null +++ 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); + } +}