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

Added dedicated pages for each icon, and monkey icons

Browse Source
This commit is contained in:
Shuqi 2024-04-29 17:29:20 +08:00
parent 5bb6a74fc6
commit 8607c11f94
9 changed files with 400 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

164
php/icon.php Normal file
View File

@ -0,0 +1,164 @@
<?php
if (empty($_GET['icon']) || !preg_match("/^[\w\-]+$/", $_GET['icon'])) {
http_response_code(400);
exit;
}
$icon_name = strtolower($_GET['icon']);
$icon_dir = __DIR__."/icons";
$icon_path = "$icon_dir/$icon_name.svg";
$preview_dir = __DIR__."/preview";
$preview_path = "$preview_dir/$icon_name.png";
if (!is_file($icon_path)) {
http_response_code(404);
exit;
}
// generate facebook preview
if (!is_file($preview_path)) {
$image = new Imagick();
$image->setBackgroundColor(new ImagickPixel('#ffffff'));
$image->readImageBlob(file_get_contents($icon_path));
$image->setImageFormat("png24");
$image->setImageInterpolateMethod('Integer');
$image->resizeImage(180, 180, Imagick::FILTER_POINT, 1);
$image->borderImage('#ffffff', 510, 225);
$image->writeImage($preview_path);
}
// generate color palette
$palette = array();
$svg = file_get_contents($icon_path);
preg_match_all("/#([0-9a-fA-F]{6})/", $svg, $matches);
$palette = array_unique($matches[0]);
$palette = array_map('strtoupper', $palette);
// get tags
$icon_json = json_decode(file_get_contents(__DIR__ . "/icons.json"), true);
$tags = $icon_json[$icon_name . ".svg"];
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta property="og:title" content="<?= $icon_name ?> - Pixel Icons" />
<meta property="og:url" content="https://sqkhor.com/pixel-icons/<?= $icon_name ?>" />
<meta property="og:image" content="https://sqkhor.com/pixel-icons/preview/<?= $icon_name ?>.png" />
<meta property="og:description" content="This is a set of over 200 SVG icons made with a 9x9 pixel grid. Feel free to use them as you please." />
<title><?= $icon_name ?> - Pixel Icons</title>
<meta name="description" content="This is a set of over 200 SVG icons made with a 9x9 pixel grid. Feel free to use them as you please." />
<link rel="shortcut icon" href="./favicon.png" type="image/png" />
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-S5K34EE24W"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-S5K34EE24W');
</script>
<link rel="stylesheet" href="./assets/index.css">
</head>
<body>
<div id="wrapper">
<header>
<h1 id="site-title"><?= $icon_name ?></h1>
<!-- <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> -->
<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="https://github.com/shuqikhor/pixel-icons" target="_blank">GitHub</a></div>
<div class="pill">
<button class="button" id="btn-theme">
<img class="theme-icon" src="./icons/sun.svg" alt="Light">
<img class="theme-icon" src="./icons/moon.svg" alt="Dark">
</button>
</div>
</div>
</header>
<div id="icon-details">
<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 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/">Back</a></div>
</div>
<div id="icon-palette">
Colour Palette:
<ul>
<?php foreach ($palette as $color): ?>
<li data-color="<?= $color ?>">
<div class="color-box" style="background-color: <?= $color ?>;"></div>
<div class="color-code"><?= $color ?></div>
</li>
<?php endforeach ?>
</ul>
</div>
<div id="color-copied">
Colour code copied!
</div>
<script>
document.querySelectorAll("#icon-palette li").forEach(el => {
el.addEventListener('click', function (e) {
const to_copy = el.dataset.color;
const hidden_input = document.createElement('input');
document.body.appendChild(hidden_input)
hidden_input.value = to_copy
hidden_input.select();
document.execCommand('copy',false);
hidden_input.remove();
const notification = document.querySelector('#color-copied');
notification.style.animation = 'none';
notification.offsetHeight; /* trigger reflow */
notification.style.animation = "flash 1s forwards";
});
})
</script>
<div id="icon-tags">
Tags:
<ul>
<?php foreach ($tags as $tag): ?>
<li>
<div class="pill">
<a class="button" href="https://sqkhor.com/pixel-icons/#<?= $tag ?>">
<?= $tag ?>
</a>
</div>
</li>
<?php endforeach ?>
</ul>
</div>
</div>
<footer>
<p>
Made by <a href="https://sqkhor.com" target="_blank">Shuqi Khor</a>
<br>Please follow <a href="https://www.facebook.com/9x9.pixel.icons" target="_blank">Pixel Icons Facebook Page</a>
</p>
</footer>
</div>
<script>
(function () {
let light = true;
if (document.cookie.indexOf('theme=') !== -1) {
const themeCode = document.cookie.substr(document.cookie.indexOf('theme=') + 6, 1);
light = themeCode==1?true:false;
} else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
//OS theme setting detected as dark
light = false;
}
document.documentElement.dataset.theme = light ? 'light' : 'dark';
document.querySelector('#btn-theme').addEventListener('click', e => {
light = !light;
document.cookie = `theme=${light?1:0}; expires=Thu, 31 Dec 2100 00:00:00 UTC; path=/pixel-icons`;
document.documentElement.dataset.theme = light ? 'light' : 'dark';
});
})()
</script>
</body>
</html>

25
php/index.php
View File

@ -6,6 +6,9 @@ $files = scandir($icons_path);
$files = array_filter($files, function ($file) { $files = array_filter($files, function ($file) {
return (substr($file, -4, 4) == ".svg"); return (substr($file, -4, 4) == ".svg");
}); });
$files = array_map(function ($file) {
return str_replace(".svg", "", $file);
}, $files);
?> ?>
<!doctype html> <!doctype html>
@ -16,9 +19,9 @@ $files = array_filter($files, function ($file) {
<meta property="og:title" content="Pixel Icons" /> <meta property="og:title" content="Pixel Icons" />
<meta property="og:url" content="https://sqkhor.com/pixel-icons/" /> <meta property="og:url" content="https://sqkhor.com/pixel-icons/" />
<meta property="og:image" content="https://sqkhor.com/pixel-icons/cover.png" /> <meta property="og:image" content="https://sqkhor.com/pixel-icons/cover.png" />
<meta property="og:description" content="This is a set of over 100 SVG icons made with a 9x9 pixel grid. Feel free to use them as you please." /> <meta property="og:description" content="This is a set of over 200 SVG icons made with a 9x9 pixel grid. Feel free to use them as you please." />
<title>Pixel Icons</title> <title>Pixel Icons</title>
<meta name="description" content="This is a set of over 100 SVG icons made with a 9x9 pixel grid. Feel free to use them as you please." /> <meta name="description" content="This is a set of over 200 SVG icons made with a 9x9 pixel grid. Feel free to use them as you please." />
<link rel="shortcut icon" href="./favicon.png" type="image/png" /> <link rel="shortcut icon" href="./favicon.png" type="image/png" />
<!-- Google tag (gtag.js) --> <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-S5K34EE24W"></script> <script async src="https://www.googletagmanager.com/gtag/js?id=G-S5K34EE24W"></script>
@ -57,23 +60,28 @@ $files = array_filter($files, function ($file) {
<ul class="icon-list show-name"> <ul class="icon-list show-name">
<?php foreach ($files as $file): ?> <?php foreach ($files as $file): ?>
<li> <li>
<a href="download.php?icon=<?= $file ?>" target="_blank"> <a href="https://sqkhor.com/pixel-icons/<?= $file ?>" target="_blank">
<img class="icon" src="./icons/<?= $file ?>" alt="<?= str_replace(".svg", "", $file) ?>"> <img class="icon" src="./icons/<?= $file ?>.svg" alt="<?= $file ?>">
<div className='name'><?= str_replace(".svg", "", $file) ?></div> <div className='name'><?= $file ?></div>
</a> </a>
</li> </li>
<?php endforeach ?> <?php endforeach ?>
</ul> </ul>
</div> </div>
<footer> <footer>
<p>Made by <a href="https://sqkhor.com">Shuqi Khor</a></p> <p>
Made by <a href="https://sqkhor.com" target="_blank">Shuqi Khor</a>
<br>Please follow <a href="https://www.facebook.com/9x9.pixel.icons" target="_blank">Pixel Icons Facebook Page</a>
</p>
</footer> </footer>
</div> </div>
<script> <script>
(function () { (function () {
let light = true; if (document.cookie.indexOf('theme=') !== -1) {
if(window.matchMedia("(prefers-color-scheme: dark)").matches) { const themeCode = document.cookie.substr(document.cookie.indexOf('theme=') + 6, 1);
light = themeCode==1?true:false;
} else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
//OS theme setting detected as dark //OS theme setting detected as dark
light = false; light = false;
} }
@ -82,6 +90,7 @@ $files = array_filter($files, function ($file) {
document.querySelector('#btn-theme').addEventListener('click', e => { document.querySelector('#btn-theme').addEventListener('click', e => {
light = !light; light = !light;
document.cookie = `theme=${light?1:0}; expires=Thu, 31 Dec 2100 00:00:00 UTC; path=/pixel-icons`;
document.documentElement.dataset.theme = light ? 'light' : 'dark'; document.documentElement.dataset.theme = light ? 'light' : 'dark';
}); });
})() })()

97
src/icons.json → public/icons.json
View File

@ -1,29 +1,29 @@
{ {
"align-center.svg": [ "align-center", "ui-icon", "black" ], "align-center.svg": [ "align-center", "align", "ui-icon", "black" ],
"align-justify.svg": [ "align-justify", "ui-icon", "black" ], "align-justify.svg": [ "align-justify", "align", "ui-icon", "black" ],
"align-left.svg": [ "align-left", "ui-icon", "black" ], "align-left.svg": [ "align-left", "align", "ui-icon", "black" ],
"align-right.svg": [ "align-right", "ui-icon", "black" ], "align-right.svg": [ "align-right", "align", "ui-icon", "black" ],
"alpaca.svg": [ "alpaca", "animal", "full-body", "llama", "brown" ], "alpaca.svg": [ "alpaca", "animal", "full-body", "llama", "brown" ],
"apple-logo.svg": [ "apple-logo", "logo", "black" ], "apple-logo.svg": [ "apple-logo", "logo", "black" ],
"apple.svg": [ "apple", "fruit", "food", "red" ], "apple.svg": [ "apple", "fruit", "food", "red" ],
"apple-tree.svg": [ "apple-tree", "plant", "fruit", "food", "green" ], "apple-tree.svg": [ "apple-tree", "plant", "fruit", "food", "green" ],
"arrow-down.svg": [ "arrow-down", "ui-icon", "blue" ], "arrow-down.svg": [ "arrow-down", "arrow", "ui-icon", "blue" ],
"arrow-left.svg": [ "arrow-left", "ui-icon", "blue" ], "arrow-left.svg": [ "arrow-left", "arrow", "ui-icon", "blue" ],
"arrow-right.svg": [ "arrow-right", "ui-icon", "blue" ], "arrow-right.svg": [ "arrow-right", "arrow", "ui-icon", "blue" ],
"arrow-up.svg": [ "arrow-up", "ui-icon", "blue" ], "arrow-up.svg": [ "arrow-up", "arrow", "ui-icon", "blue" ],
"avocado.svg": [ "avocado", "fruit", "food", "green" ], "avocado.svg": [ "avocado", "fruit", "food", "green" ],
"banana.svg": [ "banana", "fruit", "food", "yellow" ], "banana.svg": [ "banana", "fruit", "food", "yellow" ],
"basket.svg": [ "basket", "ui-icon", "red" ], "basket.svg": [ "basket", "ui-icon", "red" ],
"battery-1-6.svg": [ "battery-1-6", "power", "ui-icon", "red" ], "battery-1-6.svg": [ "battery-1-6", "battery", "power", "ui-icon", "red" ],
"battery-2-6.svg": [ "battery-2-6", "power", "ui-icon", "red" ], "battery-2-6.svg": [ "battery-2-6", "battery", "power", "ui-icon", "red" ],
"battery-3-6.svg": [ "battery-3-6", "power", "ui-icon", "yellow" ], "battery-3-6.svg": [ "battery-3-6", "battery", "power", "ui-icon", "yellow" ],
"battery-4-6.svg": [ "battery-4-6", "power", "ui-icon", "yellow" ], "battery-4-6.svg": [ "battery-4-6", "battery", "power", "ui-icon", "yellow" ],
"battery-5-6.svg": [ "battery-5-6", "power", "ui-icon", "green" ], "battery-5-6.svg": [ "battery-5-6", "battery", "power", "ui-icon", "green" ],
"battery-6-6.svg": [ "battery-6-6", "power", "ui-icon", "green" ], "battery-6-6.svg": [ "battery-6-6", "battery", "power", "ui-icon", "green" ],
"bear.svg": [ "bear", "animal", "teddy-bear", "face", "brown" ], "bear.svg": [ "bear", "animal", "teddy-bear", "face", "brown" ],
"bell.svg": [ "bell", "ui-icon", "yellow" ], "bell.svg": [ "bell", "ui-icon", "yellow" ],
"bin.svg": [ "bin", "ui-icon", "grey-gray" ], "bin.svg": [ "bin", "ui-icon", "grey-gray" ],
"birthday-cake.svg": [ "birthday-cake", "happy-birthday", "food", "dessert", "candles", "pink" ], "birthday-cake.svg": [ "birthday-cake", "cake", "happy-birthday", "food", "dessert", "candles", "pink" ],
"bluetooth.svg": [ "bluetooth", "ui-icon", "blue" ], "bluetooth.svg": [ "bluetooth", "ui-icon", "blue" ],
"book.svg": [ "book", "red" ], "book.svg": [ "book", "red" ],
"bookmark.svg": [ "bookmark", "ui-icon", "red" ], "bookmark.svg": [ "bookmark", "ui-icon", "red" ],
@ -44,16 +44,16 @@
"caret-up.svg": [ "caret-up", "ui-icon", "blue" ], "caret-up.svg": [ "caret-up", "ui-icon", "blue" ],
"cart.svg": [ "cart", "ui-icon", "yellow" ], "cart.svg": [ "cart", "ui-icon", "yellow" ],
"cat.svg": [ "cat", "full-body", "animal", "orange" ], "cat.svg": [ "cat", "full-body", "animal", "orange" ],
"cat-sit.svg": [ "cat-sit", "full-body", "animal", "orange" ], "cat-sit.svg": [ "cat-sit", "cat", "full-body", "animal", "orange" ],
"cat-black.svg": [ "cat-black", "face", "animal", "black" ], "cat-black.svg": [ "cat-black", "cat", "face", "animal", "black" ],
"cat-calico.svg": [ "cat-calico", "face", "animal", "orange" ], "cat-calico.svg": [ "cat-calico", "cat", "face", "animal", "orange" ],
"cat-grey.svg": [ "cat-grey", "face", "animal", "grey-gray" ], "cat-grey.svg": [ "cat-grey", "cat", "face", "animal", "grey-gray" ],
"cat-orange.svg": [ "cat-orange", "face", "animal", "orange" ], "cat-orange.svg": [ "cat-orange", "cat", "face", "animal", "orange" ],
"cat-tabby.svg": [ "cat-tabby", "face", "animal", "orange" ], "cat-tabby.svg": [ "cat-tabby", "cat", "face", "animal", "orange" ],
"cat-white.svg": [ "cat-white", "face", "animal", "white" ], "cat-white.svg": [ "cat-white", "cat", "face", "animal", "white" ],
"charmander.svg": [ "charmander", "pokemon", "orange" ], "charmander.svg": [ "charmander", "pokemon", "orange" ],
"chart.svg": [ "chart", "ui-icon" ], "chart.svg": [ "chart", "ui-icon" ],
"christmas-tree.svg": [ "christmas-tree", "green", "christmas", "xmas", "festive" ], "christmas-tree.svg": [ "christmas-tree", "green", "christmas", "tree", "xmas", "festive" ],
"chrome.svg": [ "chrome", "google", "browser", "logo", "colourful-colorful" ], "chrome.svg": [ "chrome", "google", "browser", "logo", "colourful-colorful" ],
"clipboard.svg": [ "clipboard", "ui-icon", "cut", "copy", "paste" ], "clipboard.svg": [ "clipboard", "ui-icon", "cut", "copy", "paste" ],
"clock.svg": [ "clock", "ui-icon", "time", "white" ], "clock.svg": [ "clock", "ui-icon", "time", "white" ],
@ -64,12 +64,12 @@
"cookie.svg": [ "cookie", "food", "snack", "ui-icon", "buscuits", "cookies", "chocolate", "brown" ], "cookie.svg": [ "cookie", "food", "snack", "ui-icon", "buscuits", "cookies", "chocolate", "brown" ],
"copy.svg": [ "copy", "ui-icon", "cut", "paste", "blue" ], "copy.svg": [ "copy", "ui-icon", "cut", "paste", "blue" ],
"cow.svg": [ "cow", "full-body", "animal", "white" ], "cow.svg": [ "cow", "full-body", "animal", "white" ],
"device-computer.svg": [ "device-computer", "screen", "imac", "desktop", "pc", "ui-icon", "black", "white", "grey-gray" ], "device-computer.svg": [ "device-computer", "device", "screen", "imac", "desktop", "pc", "ui-icon", "black", "white", "grey-gray" ],
"device-tablet.svg": [ "device-tablet", "screen", "ipad", "ui-icon", "black", "white", "grey-gray" ], "device-tablet.svg": [ "device-tablet", "device", "screen", "ipad", "ui-icon", "black", "white", "grey-gray" ],
"device-smartphone.svg": [ "device-smartphone", "screen", "iphone", "ui-icon", "black", "white", "grey-gray" ], "device-smartphone.svg": [ "device-smartphone", "device", "screen", "iphone", "ui-icon", "black", "white", "grey-gray" ],
"dog.svg": [ "dog", "full-body", "animal", "brown" ], "dog.svg": [ "dog", "full-body", "animal", "brown" ],
"dog-beagle.svg": [ "dog-beagle", "face", "animal", "brown" ], "dog-beagle.svg": [ "dog-beagle", "dog", "face", "animal", "brown" ],
"dog-shiba.svg": [ "dog-shiba", "face", "animal", "orange" ], "dog-shiba.svg": [ "dog-shiba", "dog", "face", "animal", "orange" ],
"dollar.svg": [ "dollar", "ui-icon", "yellow" ], "dollar.svg": [ "dollar", "ui-icon", "yellow" ],
"duck.svg": [ "duck", "dove", "bird", "full-body", "animal", "white" ], "duck.svg": [ "duck", "dove", "bird", "full-body", "animal", "white" ],
"durian.svg": [ "durian", "fruit", "food", "green" ], "durian.svg": [ "durian", "fruit", "food", "green" ],
@ -79,7 +79,7 @@
"egg.svg": [ "egg", "food", "fried-egg", "sunny-side-up", "white", "yellow" ], "egg.svg": [ "egg", "food", "fried-egg", "sunny-side-up", "white", "yellow" ],
"elephant.svg": [ "elephant", "animal", "full-body", "grey-gray" ], "elephant.svg": [ "elephant", "animal", "full-body", "grey-gray" ],
"export.svg": [ "export", "arrow", "out", "share", "ui-icon", "blue", "orange" ], "export.svg": [ "export", "arrow", "out", "share", "ui-icon", "blue", "orange" ],
"facebook-detailed.svg": [ "facebook-detailed", "logo", "blue" ], "facebook-detailed.svg": [ "facebook-detailed", "facebook", "logo", "blue" ],
"facebook.svg": [ "facebook", "logo", "blue" ], "facebook.svg": [ "facebook", "logo", "blue" ],
"file-picture.svg": [ "file-picture", "paper", "drawing", "painting", "ui-icon", "blue" ], "file-picture.svg": [ "file-picture", "paper", "drawing", "painting", "ui-icon", "blue" ],
"file-text.svg": [ "file-text", "paper", "ui-icon", "blue" ], "file-text.svg": [ "file-text", "paper", "ui-icon", "blue" ],
@ -99,7 +99,7 @@
"horse.svg": [ "horse", "animal", "full-body", "brown" ], "horse.svg": [ "horse", "animal", "full-body", "brown" ],
"ice-cream.svg": [ "ice-cream", "dessert", "food", "ui-icon", "pink", "brown" ], "ice-cream.svg": [ "ice-cream", "dessert", "food", "ui-icon", "pink", "brown" ],
"inbox.svg": [ "inbox", "arrow", "email", "e-mail", "ui-icon", "blue", "orange" ], "inbox.svg": [ "inbox", "arrow", "email", "e-mail", "ui-icon", "blue", "orange" ],
"instagram-detailed.svg": [ "instagram-detailed", "logo", "purple", "magenta" ], "instagram-detailed.svg": [ "instagram-detailed", "instagram", "logo", "purple", "magenta" ],
"instagram.svg": [ "instagram", "logo", "purple", "magenta" ], "instagram.svg": [ "instagram", "logo", "purple", "magenta" ],
"internet-explorer.svg": [ "internet-explorer", "browser", "logo", "blue" ], "internet-explorer.svg": [ "internet-explorer", "browser", "logo", "blue" ],
"key.svg": [ "key", "ui-icon", "yellow" ], "key.svg": [ "key", "ui-icon", "yellow" ],
@ -119,17 +119,20 @@
"mango.svg": [ "mango", "fruit", "food", "yellow" ], "mango.svg": [ "mango", "fruit", "food", "yellow" ],
"mario.svg": [ "mario", "game", "super mario", "nintendo", "red" ], "mario.svg": [ "mario", "game", "super mario", "nintendo", "red" ],
"mario-jump.svg": [ "mario-jump", "game", "super mario", "nintendo", "red" ], "mario-jump.svg": [ "mario-jump", "game", "super mario", "nintendo", "red" ],
"meowth.svg": [ "meowth", "pokemon", "cat", "yellow" ], "meowth.svg": [ "meowth", "pokemon", "cat", "yellow" ],
"message.svg": [ "message", "conversations", "chat-bubble", "private-message", "direct-message", "pm", "dm", "ui-icon", "blue" ], "message.svg": [ "message", "conversations", "chat-bubble", "private-message", "direct-message", "pm", "dm", "ui-icon", "blue" ],
"message-typing.svg": [ "message-typing", "conversations", "chat-bubble", "private-message", "direct-message", "pm", "dm", "ui-icon", "blue" ], "message-typing.svg": [ "message-typing", "conversations", "chat-bubble", "private-message", "direct-message", "pm", "dm", "ui-icon", "blue" ],
"messages.svg": [ "messages", "conversations", "chat-bubbles", "private-messages", "direct-messages", "pm", "dm", "ui-icon", "blue" ], "messages.svg": [ "messages", "conversations", "chat-bubbles", "private-messages", "direct-messages", "pm", "dm", "ui-icon", "blue" ],
"microsoft-edge.svg": [ "microsoft-edge", "browser", "logo", "blue" ], "microsoft-edge.svg": [ "microsoft-edge", "browser", "logo", "blue" ],
"mistletoe.svg": [ "mistletoe", "xmas", "christmas", "festive", "red", "green" ], "mistletoe.svg": [ "mistletoe", "xmas", "christmas", "festive", "red", "green" ],
"monkey.svg": [ "monkey", "animal", "full-body", "brown" ],
"monkey-love.svg": [ "monkey-love", "monkey", "face", "animal", "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" ],
"mount-fuji.svg": [ "mount-fuji", "mountain", "hills", "japan", "snow", "travel", "blue" ], "mount-fuji.svg": [ "mount-fuji", "mountain", "hills", "japan", "snow", "travel", "blue" ],
"nasilemak.svg": [ "nasilemak", "food", "green" ], "nasilemak.svg": [ "nasilemak", "food", "green" ],
"noodles.svg": [ "noodles", "food", "yellow" ], "noodles.svg": [ "noodles", "food", "yellow" ],
"nyan-cat.svg": [ "nyan-cat", "animal", "space", "rainbow", "meme", "grey-gray", "pink" ], "nyan-cat.svg": [ "nyan-cat", "cat", "animal", "space", "rainbow", "meme", "grey-gray", "pink" ],
"outbox.svg": [ "outbox", "arrow", "email", "e-mail", "ui-icon", "blue", "orange" ], "outbox.svg": [ "outbox", "arrow", "email", "e-mail", "ui-icon", "blue", "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" ],
@ -154,7 +157,7 @@
"raccoon.svg": [ "raccoon", "trash-panda", "full-body", "animal", "grey-gray" ], "raccoon.svg": [ "raccoon", "trash-panda", "full-body", "animal", "grey-gray" ],
"rain.svg": [ "rain", "raining", "ui-icon", "cloud", "weather", "grey-gray" ], "rain.svg": [ "rain", "raining", "ui-icon", "cloud", "weather", "grey-gray" ],
"rainbow.svg": [ "rainbow", "weather", "colorful-colourful" ], "rainbow.svg": [ "rainbow", "weather", "colorful-colourful" ],
"reddit-detailed.svg": [ "reddit-detailed", "logo", "red" ], "reddit-detailed.svg": [ "reddit-detailed", "reddit", "logo", "red" ],
"reddit.svg": [ "reddit", "logo", "red" ], "reddit.svg": [ "reddit", "logo", "red" ],
"ribbon.svg": [ "ribbon", "red" ], "ribbon.svg": [ "ribbon", "red" ],
"rickroll.svg": [ "rickroll", "rickrolling", "rick-rolling", "never-gonna", "give-you-up", "let-you-down", "run-around-desert-you", "meme", "black" ], "rickroll.svg": [ "rickroll", "rickrolling", "rick-rolling", "never-gonna", "give-you-up", "let-you-down", "run-around-desert-you", "meme", "black" ],
@ -172,20 +175,20 @@
"save.svg": [ "save", "floppy-disk", "ui-icon", "grey-gray", "black" ], "save.svg": [ "save", "floppy-disk", "ui-icon", "grey-gray", "black" ],
"scissors.svg": [ "scissors", "ui-icon", "cut", "copy", "paste", "purple", "pink" ], "scissors.svg": [ "scissors", "ui-icon", "cut", "copy", "paste", "purple", "pink" ],
"shop.svg": [ "shop", "business", "house", "building", "ui-icon", "grey-gray" ], "shop.svg": [ "shop", "business", "house", "building", "ui-icon", "grey-gray" ],
"shortcake.svg": [ "shortcake", "short-cake", "strawberry", "food", "dessert", "candles", "orange" ], "shortcake.svg": [ "shortcake", "short-cake", "cake", "strawberry", "food", "dessert", "candles", "orange" ],
"snow.svg": [ "snow", "snowing", "ui-icon", "cloud", "weather", "xmas", "christmas", "festive", "white" ], "snow.svg": [ "snow", "snowing", "ui-icon", "cloud", "weather", "xmas", "christmas", "festive", "white" ],
"snowman.svg": [ "snowman", "xmas", "christmas", "festive", "white" ], "snowman.svg": [ "snowman", "xmas", "christmas", "festive", "white" ],
"sound-high.svg": [ "sound-high", "ui-icon", "yellow" ], "sound-high.svg": [ "sound-high", "sound", "ui-icon", "yellow" ],
"sound-low.svg": [ "sound-low", "ui-icon", "yellow" ], "sound-low.svg": [ "sound-low", "sound", "ui-icon", "yellow" ],
"sound-mute.svg": [ "sound-mute", "ui-icon", "yellow" ], "sound-mute.svg": [ "sound-mute", "sound", "ui-icon", "yellow" ],
"sparkles.svg": [ "sparkles", "blink", "stars", "yellow" ], "sparkles.svg": [ "sparkles", "blink", "stars", "yellow" ],
"spooderman.svg": [ "spooderman", "spiderman", "meme", "red" ], "spooderman.svg": [ "spooderman", "spiderman", "meme", "red" ],
"spotify.svg": [ "spotify", "logo", "green" ], "spotify.svg": [ "spotify", "logo", "green" ],
"squirrel.svg": [ "squirrel", "animal", "full-body", "brown" ], "squirrel.svg": [ "squirrel", "animal", "full-body", "brown" ],
"squirtle.svg": [ "squirtle", "pokemon", "tortoise", "blue" ], "squirtle.svg": [ "squirtle", "pokemon", "tortoise", "blue" ],
"star.svg": [ "star", "ui-icon", "rating", "full", "yellow" ], "star.svg": [ "star", "ui-icon", "rating", "full", "yellow" ],
"star-half.svg": [ "star-half", "ui-icon", "rating", "yellow", "grey-gray" ], "star-half.svg": [ "star-half", "star", "ui-icon", "rating", "yellow", "grey-gray" ],
"star-empty.svg": [ "star-empty", "ui-icon", "rating", "grey-gray" ], "star-empty.svg": [ "star-empty", "star", "ui-icon", "rating", "grey-gray" ],
"strawberry.svg": [ "strawberry", "fruit", "food", "red" ], "strawberry.svg": [ "strawberry", "fruit", "food", "red" ],
"sunglasses.svg": [ "sunglasses", "shades", "fashion", "cool", "wear", "black" ], "sunglasses.svg": [ "sunglasses", "shades", "fashion", "cool", "wear", "black" ],
"sun.svg": [ "sun", "ui-icon", "yellow", "light" ], "sun.svg": [ "sun", "ui-icon", "yellow", "light" ],
@ -193,16 +196,16 @@
"stonks.svg": [ "stonks", "meme", "mememan" ], "stonks.svg": [ "stonks", "meme", "mememan" ],
"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.svg": [ "tapir", "animal", "full-body", "black-white" ], "tapir.svg": [ "tapir", "animal", "full-body", "black-white" ],
"tapir-baby.svg": [ "tapir", "animal", "full-body", "brown" ], "tapir-baby.svg": [ "tapir-baby", "tapir", "baby", "animal", "full-body", "brown" ],
"tehtarik.svg": [ "tehtarik", "teh-tarik","drink", "beverage", "brown" ], "tehtarik.svg": [ "tehtarik", "teh-tarik","drink", "beverage", "brown" ],
"tiktok.svg": [ "tiktok", "logo", "douyin", "cyan", "magenta" ], "tiktok.svg": [ "tiktok", "logo", "douyin", "cyan", "magenta" ],
"take-my-money.svg": [ "take-my-money", "meme", "shut-up", "fry", "futurama", "red" ], "take-my-money.svg": [ "take-my-money", "meme", "shut-up", "fry", "futurama", "red" ],
"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", "ui-icon", "pink", "good", "upvote" ], "thumb-down.svg": [ "thumb-down", "thumb ", "ui-icon", "pink", "good", "upvote" ],
"thumb-up.svg": [ "thumb-up", "ui-icon", "blue", "bad", "downvote" ], "thumb-up.svg": [ "thumb-up", "thumb ", "ui-icon", "blue", "bad", "downvote" ],
"truck.svg": [ "truck", "vehicle", "shipping", "delivery", "transportation", "blue" ], "truck.svg": [ "truck", "vehicle", "shipping", "delivery", "transportation", "blue" ],
"truck-fast.svg": [ "truck", "vehicle", "shipping", "delivery", "transportation", "blue" ], "truck-fast.svg": [ "truck-fast", "truck", "fast", "vehicle", "shipping", "delivery", "transportation", "blue" ],
"twitter-detailed.svg": [ "twitter-detailed", "logo", "bird", "blue" ], "twitter-detailed.svg": [ "twitter-detailed", "twitter", "logo", "bird", "blue" ],
"twitter.svg": [ "twitter", "logo", "bird", "blue" ], "twitter.svg": [ "twitter", "logo", "bird", "blue" ],
"unicorn.svg": [ "unicorn", "horse", "animal", "full-body", "rainbow", "white", "colorful-colourful" ], "unicorn.svg": [ "unicorn", "horse", "animal", "full-body", "rainbow", "white", "colorful-colourful" ],
"unlock.svg": [ "unlock", "ui-icon", "yellow", "orange" ], "unlock.svg": [ "unlock", "ui-icon", "yellow", "orange" ],
@ -210,7 +213,7 @@
"users.svg": [ "users", "ui-icon", "blue" ], "users.svg": [ "users", "ui-icon", "blue" ],
"watermelon.svg": [ "watermelon", "fruit", "food", "red" ], "watermelon.svg": [ "watermelon", "fruit", "food", "red" ],
"wifi.svg": [ "wifi", "ui-icon", "black" ], "wifi.svg": [ "wifi", "ui-icon", "black" ],
"wine.svg": [ "wine", "drink", "beverage", "red" ], "wine.svg": [ "wine", "drink", "beverage", "glass", "red" ],
"wombat.svg": [ "wombat", "square-poop", "animal", "full-body", "brown" ], "wombat.svg": [ "wombat", "square-poop", "animal", "full-body", "brown" ],
"wreath.svg": [ "wreath", "christmas", "green", "christmas", "xmas", "festive" ], "wreath.svg": [ "wreath", "christmas", "green", "christmas", "xmas", "festive" ],
"wrench.svg": [ "wrench", "spanner", "settings", "preferences", "ui-icon", "grey-gray" ], "wrench.svg": [ "wrench", "spanner", "settings", "preferences", "ui-icon", "grey-gray" ],
@ -218,6 +221,6 @@
"xmas-bell.svg": [ "xmas-bell", "xmas", "christmas", "festive", "yellow" ], "xmas-bell.svg": [ "xmas-bell", "xmas", "christmas", "festive", "yellow" ],
"xmas-stocking.svg": [ "xmas-stocking", "xmas", "christmas", "socks", "festive", "red" ], "xmas-stocking.svg": [ "xmas-stocking", "xmas", "christmas", "socks", "festive", "red" ],
"youtube.svg": [ "youtube", "logo", "play", "red" ], "youtube.svg": [ "youtube", "logo", "play", "red" ],
"zoom-in.svg": [ "zoom-in", "ui-icon", "magnifier", "brown", "white" ], "zoom-in.svg": [ "zoom-in", "zoom", "ui-icon", "magnifier", "brown", "white" ],
"zoom-out.svg": [ "zoom-out", "ui-icon", "magnifier", "brown", "white" ] "zoom-out.svg": [ "zoom-out", "zoom", "ui-icon", "magnifier", "brown", "white" ]
} }

13
public/icons/monkey-love.svg Normal file
View File

@ -0,0 +1,13 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="pixelicon-monkey-love">
<rect fill="#D38100" x="2" y="0" width="2" height="1"/>
<rect fill="#D38100" x="5" y="0" width="2" height="1"/>
<rect fill="#D38100" x="1" y="1" width="1" height="1"/>
<rect fill="#D38100" x="7" y="1" width="1" height="1"/>
<rect fill="#D38100" x="0" y="2" width="1" height="3"/>
<rect fill="#D38100" x="8" y="2" width="1" height="3"/>
<path fill="#D38100" d="M2,3V5H1V6H2V7H3V9H7V6H8V5H7V3z M6,4V6H3V4z"/>
<rect fill="#343341" x="3" y="4" width="1" height="1"/>
<rect fill="#343341" x="5" y="4" width="1" height="1"/>
<rect fill="#FFE4C2" x="4" y="1" width="1" height="1"/>
<path fill="#FFE4C2" d="M4,5H3V6H6V5H5V4H4z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 728 B

9
public/icons/monkey-walk.svg Normal file
View File

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="pixelicon-monkey-walk">
<rect fill="#D38100" x="7" y="1" width="1" height="1"/>
<path fill="#D38100" d="M4,6H5V8H6V6H8V8H9V2H8V4H7V5H6V2H1V6H3V8H4z M5,5H2V3H5z"/>
<rect fill="#343341" x="2" y="3" width="1" height="1"/>
<rect fill="#343341" x="4" y="3" width="1" height="1"/>
<path fill="#FFE4C2" d="M4,3H3V4H2V5H5V4H4z"/>
<rect fill="#FFE4C2" x="0" y="4" width="1" height="1"/>
<rect fill="#FFE4C2" x="6" y="4" width="1" height="1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 512 B

11
public/icons/monkey.svg Normal file
View File

@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="pixelicon-monkey">
<path fill="#D38100" d="M4,5V6H3V8H5V7H6V8H8V7H7V1H2V5z M3,2H6V4H3z"/>
<rect fill="#D38100" x="8" y="6" width="1" height="1"/>
<rect fill="#343341" x="3" y="2" width="1" height="1"/>
<rect fill="#343341" x="5" y="2" width="1" height="1"/>
<path fill="#FFE4C2" d="M5,2H4V3H3V4H6V3H5z"/>
<rect fill="#FFE4C2" x="1" y="3" width="1" height="1"/>
<rect fill="#FFE4C2" x="7" y="3" width="1" height="1"/>
<rect fill="#FFE4C2" x="2" y="7" width="1" height="1"/>
<rect fill="#FFE4C2" x="5" y="7" width="1" height="1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 609 B

11
src/App.jsx
View File

@ -9,7 +9,7 @@ function App() {
const inputSearch = useRef() const inputSearch = useRef()
const checkShowName = useRef() const checkShowName = useRef()
const dispatch = useDispatch() const dispatch = useDispatch()
const [currentQuery, setCurrentQuery] = useState("") const [currentQuery, setCurrentQuery] = useState(window.location.hash.replace("#", "") || "")
function queryOnChange () { function queryOnChange () {
let query = inputSearch.current.value let query = inputSearch.current.value
@ -18,18 +18,27 @@ function App() {
dispatch(setQuery(query)) dispatch(setQuery(query))
} }
function clearQuery () {
inputSearch.current.value = ""
queryOnChange()
}
function showNameOnChange () { function showNameOnChange () {
dispatch(setShowName(checkShowName.current.checked)) dispatch(setShowName(checkShowName.current.checked))
} }
useEffect(() => { useEffect(() => {
inputSearch.current.focus() inputSearch.current.focus()
queryOnChange()
}) })
return ( return (
<> <>
<div className="pixel-input"> <div className="pixel-input">
<input type='text' id='search' ref={ inputSearch } onChange={ queryOnChange } value={ currentQuery } placeholder="Search an icon — try 'animal', 'fruit', 'logo', 'ui' or 'red'" autoComplete='no' /> <input type='text' id='search' ref={ inputSearch } onChange={ queryOnChange } value={ currentQuery } placeholder="Search an icon — try 'animal', 'fruit', 'logo', 'ui' or 'red'" autoComplete='no' />
{
currentQuery == '' ? '' : <button id='btn-clear-search' onClick={ clearQuery }>x</button>
}
</div> </div>
<div id='display-options'> <div id='display-options'>
<input type="checkbox" name="checkShowName" ref={ checkShowName } onChange={ showNameOnChange } id='checkShowName' /> <input type="checkbox" name="checkShowName" ref={ checkShowName } onChange={ showNameOnChange } id='checkShowName' />

11
src/IconList.jsx
View File

@ -1,5 +1,5 @@
import { useSelector, useDispatch } from 'react-redux' import { useSelector, useDispatch } from 'react-redux'
import iconData from './icons.json' import iconData from '../public/icons.json'
import { useEffect, useRef, useState } from 'react'; import { useEffect, useRef, useState } from 'react';
export const IconList = function () { export const IconList = function () {
@ -30,7 +30,8 @@ export const IconList = function () {
}, [query]) }, [query])
function launchDownload (filename) { function launchDownload (filename) {
window.open(`download.php?icon=${filename}`) location.href = `https://sqkhor.com/pixel-icons/${filename.replace('.svg', '')}`
// window.open(`download.php?icon=${filename}`)
} }
if (icons.length == 0) { if (icons.length == 0) {
@ -44,9 +45,9 @@ export const IconList = function () {
return ( return (
<ul className={ `icon-list ${ showName ? 'show-name' : ''}` }> <ul className={ `icon-list ${ showName ? 'show-name' : ''}` }>
{ icons.map( (filename, index) => ( { icons.map( (filename, index) => (
<li key={ index } onClick={ e => launchDownload(filename) }> <li key={ index }>
<img className='icon' src={ `./icons/${filename}` } /> <a href={`https://sqkhor.com/pixel-icons/${filename.replace('.svg', '')}`}><img className='icon' src={ `./icons/${filename}` } /></a>
<div className='name'>{ showName ? filename.replace('.svg', '') : '' }</div> <div className='name'>{ showName ? <a href={`https://sqkhor.com/pixel-icons/${filename.replace('.svg', '')}`}>{filename.replace('.svg', '')}</a> : '' }</div>
</li> </li>
) ) } ) ) }
</ul> </ul>

126
src/index.css
View File

@ -3,8 +3,8 @@
@import url('https://fonts.googleapis.com/css2?family=Silkscreen&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Silkscreen&display=swap');
@font-face { @font-face {
font-family: 'Open Sans PX'; font-family: 'Open Sans PX';
src: url('../fonts/OpenSansPX.ttf') format('truetype') src: url('../fonts/OpenSansPX.ttf') format('truetype')
} }
:root { :root {
@ -83,6 +83,7 @@ input[type="text"]:focus {
} }
.pixel-input { .pixel-input {
position: relative;
box-sizing: border-box; box-sizing: border-box;
padding: 2px; padding: 2px;
background: var(--grey-color); background: var(--grey-color);
@ -167,16 +168,21 @@ header .buttons {
align-items: center; align-items: center;
} }
h1 {
font-size: 3.2em;
line-height: 1;
margin: 0;
}
#site-title { #site-title {
height: 30px;
width: auto; width: auto;
fill: currentColor; fill: currentColor;
margin-right: auto; margin-right: auto;
} }
h1 { svg#site-title,
font-size: 3.2em; img#site-title {
line-height: 1; height: 30px;
} }
@ -282,6 +288,21 @@ input#search {
width: 100%; width: 100%;
} }
#btn-clear-search {
appearance: none;
position: absolute;
right: 0.5rem;
top: 0;
bottom: 0;
margin-top: auto;
margin-bottom: auto;
background: transparent;
border: 0;
font-family: Silkscreen, sans-serif;
font-size: 1rem;
cursor: pointer;
}
#display-options { #display-options {
margin-top: 18px; margin-top: 18px;
font-size: 1em; font-size: 1em;
@ -350,3 +371,96 @@ ul.icon-list a {
transform: translateY(-6px); transform: translateY(-6px);
} }
} }
#icon-details {
display: flex;
flex-direction: column;
align-items: center;
gap: 4rem;
/* justify-content: space-between; */
}
img#icon-preview {
width: 360px;
max-width: 100%;
height: auto;
}
#icon-actions {
display: flex;
gap: 0.5rem;
}
#icon-palette {
text-align: center;
}
#icon-palette ul {
list-style: none;
padding: 0;
margin: 0;
}
#icon-palette li {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-top: 0.5rem;
align-items: center;
cursor: pointer;
}
#icon-palette .color-box {
width: 1.2rem;
height: 1rem;
}
#icon-palette .color-code {
flex-basis: 6em;
}
#color-copied {
position: fixed;
top: -500px;
left: 50%;
transform: translate(-50%, -50%);
padding: 0.5em 1em;
background: #000000;
color: #ffffff;
font-family: 'Open Sans PX', sans-serif;
font-size: 2rem;
pointer-events: none;
}
@keyframes flash {
0% {
opacity: 1;
top: 50%;
}
50% {
opacity: 1;
top: 50%;
}
99% {
top: 50%;
opacity: 0;
}
100% {
top: -500px;
}
}
#icon-tags {
text-align: center;
}
#icon-tags ul {
list-style: none;
margin: 0.5rem 0 0;
padding: 0;
display: flex;
max-width: 360px;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
}