shuqi/pixel-icon-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: shuqi:c225bc738d2c7fc1408202d72f8a3de81c9fc2b7
Branches Tags
shuqi:main
...
compare: shuqi:81824164d490930f984b3c6ab40d307135c5ec38
Branches Tags
shuqi:main

6 Commits
c225bc738d ... 81824164d4

Author SHA1 Message Date
Shuqi
81824164d4 (Cont'd) Improved headers for icon detail page 2024-09-03 12:46:21 +08:00
Shuqi
3c513ad9bc Improved headers for icon detail page 2024-09-03 12:45:58 +08:00
Shuqi
78543add56 Added kiwifruit icon 2024-09-03 12:45:37 +08:00
Shuqi
6dd9361ac9 Added LinkedIn logo 2024-09-03 12:45:16 +08:00
Shuqi
fab7c81128 Improved teapot icon 2024-09-03 12:44:53 +08:00
Shuqi
2b214038d8 Added Pacman and the ghosts 2024-09-03 12:44:36 +08:00
11 changed files with 80 additions and 16 deletions
Show Stats Expand all files Collapse all files

7
php/icon.php
View File

@ -69,8 +69,9 @@ $tags = $icon_json[$icon_name . ".svg"];
<body> <body>
<div id="wrapper"> <div id="wrapper">
<header> <header>
<h1 id="site-title"><?= $icon_name ?></h1> <a href="https://sqkhor.com/pixel-icons/" id="site-title-link">
<!-- <svg id="site-title" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 490 60"><path d="M40 30H10V10h30V0H0v60h10V40h40V10H40zM60 0h10v10H60zM60 20h10v40H60zM90 40h10v10H90zM90 20h10v10H90zM100 30h10v10h-10zM110 40h10v10h-10zM120 50h10v10h-10zM110 20h10v10h-10zM120 10h10v10h-10zM80 10h10v10H80zM80 50h10v10H80zM150 50h30v10h-30zM150 10h30v10h-30zM180 30h-30V20h-10v30h10V40h40V20h-10zM200 0h10v50h-10zM210 50h10v10h-10zM270 0h10v60h-10zM290 20h10v30h-10zM300 10h30v10h-30zM300 50h30v10h-30zM340 20h10v30h-10zM380 20h10v30h-10zM350 10h30v10h-30zM350 50h30v10h-30zM400 20h10v40h-10zM430 20h10v40h-10zM410 10h20v10h-20zM460 30h20v10h-20zM450 20h10v10h-10zM480 40h10v10h-10zM460 10h30v10h-30zM450 50h30v10h-30z"/></svg> --> <svg id="site-title" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 490 60"><path d="M40 30H10V10h30V0H0v60h10V40h40V10H40zM60 0h10v10H60zM60 20h10v40H60zM90 40h10v10H90zM90 20h10v10H90zM100 30h10v10h-10zM110 40h10v10h-10zM120 50h10v10h-10zM110 20h10v10h-10zM120 10h10v10h-10zM80 10h10v10H80zM80 50h10v10H80zM150 50h30v10h-30zM150 10h30v10h-30zM180 30h-30V20h-10v30h10V40h40V20h-10zM200 0h10v50h-10zM210 50h10v10h-10zM270 0h10v60h-10zM290 20h10v30h-10zM300 10h30v10h-30zM300 50h30v10h-30zM340 20h10v30h-10zM380 20h10v30h-10zM350 10h30v10h-30zM350 50h30v10h-30zM400 20h10v40h-10zM430 20h10v40h-10zM410 10h20v10h-20zM460 30h20v10h-20zM450 20h10v10h-10zM480 40h10v10h-10zM460 10h30v10h-30zM450 50h30v10h-30z"/></svg>
</a>
<div class="buttons"> <div class="buttons">
<div class="pill"><a class="button" href="./download.php?icon=all" target="_blank">Download All</a></div> <div class="pill"><a class="button" href="./download.php?icon=all" target="_blank">Download All</a></div>
<div class="pill"><a class="button" href="https://github.com/shuqikhor/pixel-icons" target="_blank">GitHub</a></div> <div class="pill"><a class="button" href="https://github.com/shuqikhor/pixel-icons" target="_blank">GitHub</a></div>
@ -83,6 +84,8 @@ $tags = $icon_json[$icon_name . ".svg"];
</div> </div>
</header> </header>
<div id="icon-details"> <div id="icon-details">
<h2 id="icon-title"><?= $icon_name ?></h2>
<a href="https://sqkhor.com/pixel-icons/download.php?icon=<?= $icon_name ?>.svg" target="_blank"><img id="icon-preview" src="https://sqkhor.com/pixel-icons/icons/<?= $icon_name ?>.svg"></a> <a href="https://sqkhor.com/pixel-icons/download.php?icon=<?= $icon_name ?>.svg" target="_blank"><img id="icon-preview" src="https://sqkhor.com/pixel-icons/icons/<?= $icon_name ?>.svg"></a>
<div id="icon-actions"> <div id="icon-actions">
<div class="pill"><a class="button" href="https://sqkhor.com/pixel-icons/download.php?icon=<?= $icon_name ?>.svg" target="_blank">Download</a></div> <div class="pill"><a class="button" href="https://sqkhor.com/pixel-icons/download.php?icon=<?= $icon_name ?>.svg" target="_blank">Download</a></div>

23
public/icons.json
View File

@ -107,6 +107,10 @@
"game-controller.svg": [ "game-controller", "play-station", "x-box", "nintendo", "buttons", "ui-icon", "purple" ], "game-controller.svg": [ "game-controller", "play-station", "x-box", "nintendo", "buttons", "ui-icon", "purple" ],
"gear.svg": [ "gear", "settings", "preferences", "ui-icon", "black" ], "gear.svg": [ "gear", "settings", "preferences", "ui-icon", "black" ],
"ghost.svg": [ "ghost", "white", "halloween", "spooky", "festive" ], "ghost.svg": [ "ghost", "white", "halloween", "spooky", "festive" ],
"ghost-blue.svg": [ "ghost-blue", "blue", "halloween", "spooky", "festive", "pacman", "game" ],
"ghost-orange.svg": [ "ghost-orange", "orange", "halloween", "spooky", "festive", "pacman", "game" ],
"ghost-pink.svg": [ "ghost-pink", "pink", "halloween", "spooky", "festive", "pacman", "game" ],
"ghost-red.svg": [ "ghost-red", "red", "halloween", "spooky", "festive", "pacman", "game" ],
"gift.svg": [ "gift", "red", "christmas", "xmas", "birthday", "bday", "present", "festive" ], "gift.svg": [ "gift", "red", "christmas", "xmas", "birthday", "bday", "present", "festive" ],
"gingerbread-man.svg": [ "gingerbread-man", "xmas", "christmas", "festive", "brown" ], "gingerbread-man.svg": [ "gingerbread-man", "xmas", "christmas", "festive", "brown" ],
"github.svg": [ "github", "logo", "black" ], "github.svg": [ "github", "logo", "black" ],
@ -125,12 +129,14 @@
"internet-explorer.svg": [ "internet-explorer", "browser", "logo", "blue" ], "internet-explorer.svg": [ "internet-explorer", "browser", "logo", "blue" ],
"jigglypuff.svg": [ "jigglypuff", "pokemon", "purin", "balloon", "pink" ], "jigglypuff.svg": [ "jigglypuff", "pokemon", "purin", "balloon", "pink" ],
"key.svg": [ "key", "ui-icon", "yellow" ], "key.svg": [ "key", "ui-icon", "yellow" ],
"kiwifruit.svg": [ "kiwifruit", "fruit", "brown", "green" ],
"koala.svg": [ "koala", "animal", "bear", "face", "grey-gray" ], "koala.svg": [ "koala", "animal", "bear", "face", "grey-gray" ],
"koala-hug.svg": [ "koala-hug", "animal", "bear", "full-body", "hugging-tree", "grey-gray" ], "koala-hug.svg": [ "koala-hug", "animal", "bear", "full-body", "hugging-tree", "grey-gray" ],
"light-bulb.svg": [ "light-bulb", "yellow", "lamp" ], "light-bulb.svg": [ "light-bulb", "yellow", "lamp" ],
"light-bulb-off.svg": [ "light-bulb-off", "ui-icon", "grey", "bright" ], "light-bulb-off.svg": [ "light-bulb-off", "ui-icon", "grey", "bright" ],
"light-bulb-on.svg": [ "light-bulb-on", "ui-icon", "yellow", "dark" ], "light-bulb-on.svg": [ "light-bulb-on", "ui-icon", "yellow", "dark" ],
"lion.svg": [ "lion", "animal", "full-body", "orange" ], "lion.svg": [ "lion", "animal", "full-body", "orange" ],
"linkedin.svg": [ "linkedin", "logo", "blue" ],
"lock.svg": [ "lock", "ui-icon", "yellow", "orange" ], "lock.svg": [ "lock", "ui-icon", "yellow", "orange" ],
"lu-rou-fan.svg": [ "lu-rou-fan", "food", "rice", "bowl", "taiwan", "brown" ], "lu-rou-fan.svg": [ "lu-rou-fan", "food", "rice", "bowl", "taiwan", "brown" ],
"luggage.svg": [ "luggage", "bag", "travel", "pink" ], "luggage.svg": [ "luggage", "bag", "travel", "pink" ],
@ -155,8 +161,8 @@
"monkey-love.svg": [ "monkey-love", "monkey", "face", "animal", "brown" ], "monkey-love.svg": [ "monkey-love", "monkey", "face", "animal", "brown" ],
"monkey-walk.svg": [ "monkey-walk", "monkey", "animal", "full-body", "brown" ], "monkey-walk.svg": [ "monkey-walk", "monkey", "animal", "full-body", "brown" ],
"moon.svg": [ "moon", "ui-icon", "yellow", "dark" ], "moon.svg": [ "moon", "ui-icon", "yellow", "dark" ],
"mooncake-slice.svg": [ "mooncake-slice", "mid-autumn", "midautumn", "festival", "food", "salted-egg", "brown" ], "mooncake-slice.svg": [ "mooncake-slice", "mooncake", "mid-autumn", "midautumn", "festival", "food", "salted-egg", "brown" ],
"mooncake-whole.svg": [ "mooncake-whole", "mid-autumn", "midautumn", "festival", "food", "salted-egg", "brown" ], "mooncake-whole.svg": [ "mooncake-whole", "mooncake", "mid-autumn", "midautumn", "festival", "food", "salted-egg", "brown" ],
"mount-fuji.svg": [ "mount-fuji", "mountain", "hills", "japan", "snow", "travel", "blue" ], "mount-fuji.svg": [ "mount-fuji", "mountain", "hills", "japan", "snow", "travel", "blue" ],
"mushroom.svg": [ "mushroom", "vegetable", "food", "red" ], "mushroom.svg": [ "mushroom", "vegetable", "food", "red" ],
"music.svg": [ "music", "ui-icon", "quaver", "eight-note", "black" ], "music.svg": [ "music", "ui-icon", "quaver", "eight-note", "black" ],
@ -165,6 +171,7 @@
"nyan-cat.svg": [ "nyan-cat", "cat", "animal", "space", "rainbow", "meme", "grey-gray", "pink" ], "nyan-cat.svg": [ "nyan-cat", "cat", "animal", "space", "rainbow", "meme", "grey-gray", "pink" ],
"onigiri.svg" : [ "onigiri", "food", "japan", "rice", "white", "green" ], "onigiri.svg" : [ "onigiri", "food", "japan", "rice", "white", "green" ],
"outbox.svg": [ "outbox", "arrow", "email", "e-mail", "ui-icon", "blue", "orange" ], "outbox.svg": [ "outbox", "arrow", "email", "e-mail", "ui-icon", "blue", "orange" ],
"pacman.svg" : [ "pacman", "game", "yellow" ],
"pancakes.svg" : [ "pancakes", "food", "dessert", "honey", "butter", "orange" ], "pancakes.svg" : [ "pancakes", "food", "dessert", "honey", "butter", "orange" ],
"panda.svg": [ "panda", "animal", "bear", "full-body", "black", "white" ], "panda.svg": [ "panda", "animal", "bear", "full-body", "black", "white" ],
"paper-bag.svg": [ "paper-bag", "ui-icon", "pink" ], "paper-bag.svg": [ "paper-bag", "ui-icon", "pink" ],
@ -243,12 +250,12 @@
"tang-yuan.svg": [ "tang-yuan", "food", "bowl", "glutinous-rice-balls", "winter-solstice", "chinese", "red" ], "tang-yuan.svg": [ "tang-yuan", "food", "bowl", "glutinous-rice-balls", "winter-solstice", "chinese", "red" ],
"tapir-baby.svg": [ "tapir-baby", "tapir", "baby", "animal", "full-body", "brown" ], "tapir-baby.svg": [ "tapir-baby", "tapir", "baby", "animal", "full-body", "brown" ],
"tapir.svg": [ "tapir", "animal", "full-body", "black-white" ], "tapir.svg": [ "tapir", "animal", "full-body", "black-white" ],
"teacup-chinese.svg": [ "teacup-chinese", "beverage", "white" ], "teacup-chinese.svg": [ "teacup-chinese", "teacup", "beverage", "white" ],
"teacup-white-gold.svg": [ "teacup-white-gold", "beverage", "white" ], "teacup-white-gold.svg": [ "teacup-white-gold", "teacup", "beverage", "white" ],
"teacup-yixing.svg": [ "teacup-yixing", "beverage", "brown" ], "teacup-yixing.svg": [ "teacup-yixing", "teacup", "beverage", "brown" ],
"teapot-japanese.svg": [ "teapot-japanese", "beverage", "white" ], "teapot-japanese.svg": [ "teapot-japanese", "teapot", "beverage", "white" ],
"teapot-white-gold.svg": [ "teapot-white-gold", "beverage", "white" ], "teapot-white-gold.svg": [ "teapot-white-gold", "teapot", "beverage", "white" ],
"teapot-yixing.svg": [ "teapot-yixing", "beverage", "brown" ], "teapot-yixing.svg": [ "teapot-yixing", "teapot", "beverage", "brown" ],
"tehtarik.svg": [ "tehtarik", "teh-tarik","drink", "beverage", "malaysia", "brown" ], "tehtarik.svg": [ "tehtarik", "teh-tarik","drink", "beverage", "malaysia", "brown" ],
"this-is-fine.svg": [ "this-is-fine", "meme", "dog", "yellow", "orange" ], "this-is-fine.svg": [ "this-is-fine", "meme", "dog", "yellow", "orange" ],
"thumb-down.svg": [ "thumb-down", "thumb ", "ui-icon", "pink", "good", "upvote" ], "thumb-down.svg": [ "thumb-down", "thumb ", "ui-icon", "pink", "good", "upvote" ],

7
public/icons/ghost-blue.svg Normal file
View File

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="pixelicon-ghost-blue">
<path fill="#99CCFF" d="M2,0V1H1V8H2V7H3V8H4V7H5V8H6V7H7V8H8V1H7V0z M2,4V2H4V4z M5,2H7V4H5z"/>
<path fill="#ECEBF7" d="M2,2V3H3V4H4V2z"/>
<path fill="#ECEBF7" d="M5,2V3H6V4H7V2z"/>
<rect fill="#4236F7" x="2" y="3" width="1" height="1"/>
<rect fill="#4236F7" x="5" y="3" width="1" height="1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 392 B

7
public/icons/ghost-orange.svg Normal file
View File

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="pixelicon-ghost-orange">
<path fill="#FFB600" d="M2,0V1H1V8H2V7H3V8H4V7H5V8H6V7H7V8H8V1H7V0z M2,4V2H4V4z M5,2H7V4H5z"/>
<rect fill="#4236F7" x="2" y="2" width="1" height="1"/>
<rect fill="#4236F7" x="5" y="2" width="1" height="1"/>
<path fill="#ECEBF7" d="M2,4H4V2H3V3H2z"/>
<path fill="#ECEBF7" d="M5,4H7V2H6V3H5z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 394 B

7
public/icons/ghost-pink.svg Normal file
View File

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="pixelicon-ghost-pink">
<path fill="#FFB3B3" d="M2,0V1H1V8H2V7H3V8H4V7H5V8H6V7H7V8H8V1H7V0z M2,4V2H4V4z M5,2H7V4H5z"/>
<path fill="#ECEBF7" d="M2,4H4V3H3V2H2z"/>
<path fill="#ECEBF7" d="M5,4H7V3H6V2H5z"/>
<rect fill="#4236F7" x="3" y="2" width="1" height="1"/>
<rect fill="#4236F7" x="6" y="2" width="1" height="1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 392 B

7
public/icons/ghost-red.svg Normal file
View File

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="pixelicon-icons/ghost-red">
<path fill="#E64545" d="M2,0V1H1V8H2V7H3V8H4V7H5V8H6V7H7V8H8V1H7V0z M2,4V2H4V4z M5,2H7V4H5z"/>
<path fill="#ECEBF7" d="M4,3V2H2V4H3V3z"/>
<path fill="#ECEBF7" d="M7,3V2H5V4H6V3z"/>
<rect fill="#4236F7" x="3" y="3" width="1" height="1"/>
<rect fill="#4236F7" x="6" y="3" width="1" height="1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 397 B

5
public/icons/kiwifruit.svg Normal file
View File

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="pixelicon-kiwifruit">
<path fill="#B67100" d="M2,7H3V8H6V7H7V4H6V5H3V4H2z"/>
<path fill="#73E030" d="M6,5V4H7V3H6V2H3V3H2V4H3V5z M4,3H5V4H4z"/>
<rect fill="#E5E3D1" x="4" y="3" width="1" height="1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 274 B

6
public/icons/linkedin.svg Normal file
View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="pixelicon-linkedin">
<path fill="#0B66C1" d="M1,1V8H8V1z M3,4V7H2V4z M3,2V3H2V2z M7,4V7H6V5H5V7H4V4z"/>
<rect fill="#FFFFFF" x="2" y="2" width="1" height="1"/>
<rect fill="#FFFFFF" x="2" y="4" width="1" height="3"/>
<path fill="#FFFFFF" d="M4,7H5V5H6V7H7V4H4z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 338 B

3
public/icons/pacman.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="pixelicon-pacman">
<path fill="#FFEA00" d="M3,2H2V3H1V6H2V7H3V8H7V7H8V6H6V5H5V4H6V3H8V2H7V1H3z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 170 B

12
public/icons/teapot-white-gold.svg
View File

@ -1,9 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="pixelicon-teapot-white-gold"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="pixelicon-teapot-white-gold">
<path fill="#ECEBF7" d="M6,7V6H7V3H6V2H3V3H2V4H1V5H2V6H3V7z"/> <path fill="#ECEBF7" d="M3,3V4H2V5H1V6H2V7H7V4H6V3z"/>
<rect fill="#ECEBF7" x="0" y="3" width="1" height="1"/> <rect fill="#ECEBF7" x="0" y="4" width="1" height="1"/>
<rect fill="#FFCC00" x="4" y="1" width="1" height="1"/> <rect fill="#FFCC00" x="4" y="2" width="1" height="1"/>
<rect fill="#FFCC00" x="7" y="3" width="1" height="1"/> <rect fill="#FFCC00" x="7" y="4" width="1" height="1"/>
<rect fill="#FFCC00" x="8" y="4" width="1" height="1"/> <rect fill="#FFCC00" x="8" y="5" width="1" height="1"/>
<rect fill="#FFCC00" x="7" y="5" width="1" height="1"/> <rect fill="#FFCC00" x="7" y="6" width="1" height="1"/>
<rect fill="#FFCC00" x="3" y="7" width="3" height="1"/> <rect fill="#FFCC00" x="3" y="7" width="3" height="1"/>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 507 B

After

Width:  |  Height:  |  Size: 499 B

12
src/index.css
View File

@ -185,6 +185,18 @@ img#site-title {
height: 30px; height: 30px;
} }
a#site-title-link,
a#site-title-link:hover {
margin-right: auto;
color: inherit;
}
#icon-title {
font-size: 3.2em;
line-height: 1;
margin: 0 auto;
text-align: center;
}
a.button, a.button,