diff --git a/docs/icons.stories.js b/docs/icons.stories.js index e6ab5d7..c9e4a57 100644 --- a/docs/icons.stories.js +++ b/docs/icons.stories.js @@ -19,6 +19,7 @@ stories.add('icon', () => { smartphone: 'smartphone', phone: 'phone', 'octocat animate': 'octocat animate', + ash: 'ash', 'icon trophy': 'icon trophy', 'nes-logo': 'nes-logo', 'nes-jp-logo': 'nes-jp-logo', diff --git a/index.html b/index.html index bfdccc0..bec4ece 100644 --- a/index.html +++ b/index.html @@ -266,6 +266,7 @@ + diff --git a/scss/pixel-arts/_index.scss b/scss/pixel-arts/_index.scss index 8c74223..5317fc4 100644 --- a/scss/pixel-arts/_index.scss +++ b/scss/pixel-arts/_index.scss @@ -5,6 +5,7 @@ @import "snes-icon.scss"; @import "snes-jp-icon.scss"; @import "bcrikko.scss"; +@import "ash.scss"; @import "octocat.scss"; @import "pokeball.scss"; @import "phone.scss"; diff --git a/scss/pixel-arts/ash.scss b/scss/pixel-arts/ash.scss new file mode 100644 index 0000000..9d974c9 --- /dev/null +++ b/scss/pixel-arts/ash.scss @@ -0,0 +1,39 @@ +.ash { + $px: 6px; + // prettier-ignore + $ash-colors: (#f8f8ff, #ff614e, #007f7f, + #181818, #ffe3c5, #426adb, #4169e1); + // prettier-ignore + $ash: ( + (0,0,0,0,4,4,4,4,4,4,0,0,0,0), + (0,0,0,4,2,2,2,1,1,3,4,0,0,0), + (0,0,4,2,2,2,2,1,1,1,1,4,1,0), + (0,0,4,2,2,2,2,1,1,3,3,4,4,0), + (0,4,4,4,2,2,2,2,2,2,2,2,2,4), + (0,4,4,4,4,4,4,4,2,2,2,4,4,1), + (4,4,4,4,4,4,4,5,5,4,5,4,1,1), + (0,4,4,5,5,5,4,5,5,4,5,4,1,1), + (0,0,4,5,5,5,5,5,5,5,5,4,0,0), + (0,4,7,4,4,5,5,5,5,5,4,0,0,0), + (0,4,7,4,4,4,4,4,4,4,0,0,0,0), + (0,4,4,5,5,4,7,7,4,4,4,0,0,0), + (4,3,4,5,5,4,7,4,4,3,3,4,0,0), + (4,3,3,4,4,4,4,4,3,3,4,0,0,0), + (0,4,4,0,0,0,0,0,4,4,0,0,0,0) + ); + + position: relative; + display: inline-block; + width: $px * 15; + height: $px * 15; + + &::before { + position: absolute; + top: $px * -1; + left: $px * -1; + content: ""; + background: transparent; + + @include pixelize($ash, $ash-colors, $px); + } +}