Added dedicated pages for each icon, and monkey icons
This commit is contained in:
parent
5bb6a74fc6
commit
8607c11f94
164
php/icon.php
Normal file
164
php/icon.php
Normal 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>
|
||||
@ -6,6 +6,9 @@ $files = scandir($icons_path);
|
||||
$files = array_filter($files, function ($file) {
|
||||
return (substr($file, -4, 4) == ".svg");
|
||||
});
|
||||
$files = array_map(function ($file) {
|
||||
return str_replace(".svg", "", $file);
|
||||
}, $files);
|
||||
|
||||
?>
|
||||
<!doctype html>
|
||||
@ -16,9 +19,9 @@ $files = array_filter($files, function ($file) {
|
||||
<meta property="og:title" content="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: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>
|
||||
<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" />
|
||||
<!-- Google tag (gtag.js) -->
|
||||
<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">
|
||||
<?php foreach ($files as $file): ?>
|
||||
<li>
|
||||
<a href="download.php?icon=<?= $file ?>" target="_blank">
|
||||
<img class="icon" src="./icons/<?= $file ?>" alt="<?= str_replace(".svg", "", $file) ?>">
|
||||
<div className='name'><?= str_replace(".svg", "", $file) ?></div>
|
||||
<a href="https://sqkhor.com/pixel-icons/<?= $file ?>" target="_blank">
|
||||
<img class="icon" src="./icons/<?= $file ?>.svg" alt="<?= $file ?>">
|
||||
<div className='name'><?= $file ?></div>
|
||||
</a>
|
||||
</li>
|
||||
<?php endforeach ?>
|
||||
</ul>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
let light = true;
|
||||
if(window.matchMedia("(prefers-color-scheme: dark)").matches) {
|
||||
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;
|
||||
}
|
||||
@ -82,6 +90,7 @@ $files = array_filter($files, function ($file) {
|
||||
|
||||
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';
|
||||
});
|
||||
})()
|
||||
|
||||
@ -1,29 +1,29 @@
|
||||
{
|
||||
"align-center.svg": [ "align-center", "ui-icon", "black" ],
|
||||
"align-justify.svg": [ "align-justify", "ui-icon", "black" ],
|
||||
"align-left.svg": [ "align-left", "ui-icon", "black" ],
|
||||
"align-right.svg": [ "align-right", "ui-icon", "black" ],
|
||||
"align-center.svg": [ "align-center", "align", "ui-icon", "black" ],
|
||||
"align-justify.svg": [ "align-justify", "align", "ui-icon", "black" ],
|
||||
"align-left.svg": [ "align-left", "align", "ui-icon", "black" ],
|
||||
"align-right.svg": [ "align-right", "align", "ui-icon", "black" ],
|
||||
"alpaca.svg": [ "alpaca", "animal", "full-body", "llama", "brown" ],
|
||||
"apple-logo.svg": [ "apple-logo", "logo", "black" ],
|
||||
"apple.svg": [ "apple", "fruit", "food", "red" ],
|
||||
"apple-tree.svg": [ "apple-tree", "plant", "fruit", "food", "green" ],
|
||||
"arrow-down.svg": [ "arrow-down", "ui-icon", "blue" ],
|
||||
"arrow-left.svg": [ "arrow-left", "ui-icon", "blue" ],
|
||||
"arrow-right.svg": [ "arrow-right", "ui-icon", "blue" ],
|
||||
"arrow-up.svg": [ "arrow-up", "ui-icon", "blue" ],
|
||||
"arrow-down.svg": [ "arrow-down", "arrow", "ui-icon", "blue" ],
|
||||
"arrow-left.svg": [ "arrow-left", "arrow", "ui-icon", "blue" ],
|
||||
"arrow-right.svg": [ "arrow-right", "arrow", "ui-icon", "blue" ],
|
||||
"arrow-up.svg": [ "arrow-up", "arrow", "ui-icon", "blue" ],
|
||||
"avocado.svg": [ "avocado", "fruit", "food", "green" ],
|
||||
"banana.svg": [ "banana", "fruit", "food", "yellow" ],
|
||||
"basket.svg": [ "basket", "ui-icon", "red" ],
|
||||
"battery-1-6.svg": [ "battery-1-6", "power", "ui-icon", "red" ],
|
||||
"battery-2-6.svg": [ "battery-2-6", "power", "ui-icon", "red" ],
|
||||
"battery-3-6.svg": [ "battery-3-6", "power", "ui-icon", "yellow" ],
|
||||
"battery-4-6.svg": [ "battery-4-6", "power", "ui-icon", "yellow" ],
|
||||
"battery-5-6.svg": [ "battery-5-6", "power", "ui-icon", "green" ],
|
||||
"battery-6-6.svg": [ "battery-6-6", "power", "ui-icon", "green" ],
|
||||
"battery-1-6.svg": [ "battery-1-6", "battery", "power", "ui-icon", "red" ],
|
||||
"battery-2-6.svg": [ "battery-2-6", "battery", "power", "ui-icon", "red" ],
|
||||
"battery-3-6.svg": [ "battery-3-6", "battery", "power", "ui-icon", "yellow" ],
|
||||
"battery-4-6.svg": [ "battery-4-6", "battery", "power", "ui-icon", "yellow" ],
|
||||
"battery-5-6.svg": [ "battery-5-6", "battery", "power", "ui-icon", "green" ],
|
||||
"battery-6-6.svg": [ "battery-6-6", "battery", "power", "ui-icon", "green" ],
|
||||
"bear.svg": [ "bear", "animal", "teddy-bear", "face", "brown" ],
|
||||
"bell.svg": [ "bell", "ui-icon", "yellow" ],
|
||||
"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" ],
|
||||
"book.svg": [ "book", "red" ],
|
||||
"bookmark.svg": [ "bookmark", "ui-icon", "red" ],
|
||||
@ -44,16 +44,16 @@
|
||||
"caret-up.svg": [ "caret-up", "ui-icon", "blue" ],
|
||||
"cart.svg": [ "cart", "ui-icon", "yellow" ],
|
||||
"cat.svg": [ "cat", "full-body", "animal", "orange" ],
|
||||
"cat-sit.svg": [ "cat-sit", "full-body", "animal", "orange" ],
|
||||
"cat-black.svg": [ "cat-black", "face", "animal", "black" ],
|
||||
"cat-calico.svg": [ "cat-calico", "face", "animal", "orange" ],
|
||||
"cat-grey.svg": [ "cat-grey", "face", "animal", "grey-gray" ],
|
||||
"cat-orange.svg": [ "cat-orange", "face", "animal", "orange" ],
|
||||
"cat-tabby.svg": [ "cat-tabby", "face", "animal", "orange" ],
|
||||
"cat-white.svg": [ "cat-white", "face", "animal", "white" ],
|
||||
"cat-sit.svg": [ "cat-sit", "cat", "full-body", "animal", "orange" ],
|
||||
"cat-black.svg": [ "cat-black", "cat", "face", "animal", "black" ],
|
||||
"cat-calico.svg": [ "cat-calico", "cat", "face", "animal", "orange" ],
|
||||
"cat-grey.svg": [ "cat-grey", "cat", "face", "animal", "grey-gray" ],
|
||||
"cat-orange.svg": [ "cat-orange", "cat", "face", "animal", "orange" ],
|
||||
"cat-tabby.svg": [ "cat-tabby", "cat", "face", "animal", "orange" ],
|
||||
"cat-white.svg": [ "cat-white", "cat", "face", "animal", "white" ],
|
||||
"charmander.svg": [ "charmander", "pokemon", "orange" ],
|
||||
"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" ],
|
||||
"clipboard.svg": [ "clipboard", "ui-icon", "cut", "copy", "paste" ],
|
||||
"clock.svg": [ "clock", "ui-icon", "time", "white" ],
|
||||
@ -64,12 +64,12 @@
|
||||
"cookie.svg": [ "cookie", "food", "snack", "ui-icon", "buscuits", "cookies", "chocolate", "brown" ],
|
||||
"copy.svg": [ "copy", "ui-icon", "cut", "paste", "blue" ],
|
||||
"cow.svg": [ "cow", "full-body", "animal", "white" ],
|
||||
"device-computer.svg": [ "device-computer", "screen", "imac", "desktop", "pc", "ui-icon", "black", "white", "grey-gray" ],
|
||||
"device-tablet.svg": [ "device-tablet", "screen", "ipad", "ui-icon", "black", "white", "grey-gray" ],
|
||||
"device-smartphone.svg": [ "device-smartphone", "screen", "iphone", "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", "device", "screen", "ipad", "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-beagle.svg": [ "dog-beagle", "face", "animal", "brown" ],
|
||||
"dog-shiba.svg": [ "dog-shiba", "face", "animal", "orange" ],
|
||||
"dog-beagle.svg": [ "dog-beagle", "dog", "face", "animal", "brown" ],
|
||||
"dog-shiba.svg": [ "dog-shiba", "dog", "face", "animal", "orange" ],
|
||||
"dollar.svg": [ "dollar", "ui-icon", "yellow" ],
|
||||
"duck.svg": [ "duck", "dove", "bird", "full-body", "animal", "white" ],
|
||||
"durian.svg": [ "durian", "fruit", "food", "green" ],
|
||||
@ -79,7 +79,7 @@
|
||||
"egg.svg": [ "egg", "food", "fried-egg", "sunny-side-up", "white", "yellow" ],
|
||||
"elephant.svg": [ "elephant", "animal", "full-body", "grey-gray" ],
|
||||
"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" ],
|
||||
"file-picture.svg": [ "file-picture", "paper", "drawing", "painting", "ui-icon", "blue" ],
|
||||
"file-text.svg": [ "file-text", "paper", "ui-icon", "blue" ],
|
||||
@ -99,7 +99,7 @@
|
||||
"horse.svg": [ "horse", "animal", "full-body", "brown" ],
|
||||
"ice-cream.svg": [ "ice-cream", "dessert", "food", "ui-icon", "pink", "brown" ],
|
||||
"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" ],
|
||||
"internet-explorer.svg": [ "internet-explorer", "browser", "logo", "blue" ],
|
||||
"key.svg": [ "key", "ui-icon", "yellow" ],
|
||||
@ -119,17 +119,20 @@
|
||||
"mango.svg": [ "mango", "fruit", "food", "yellow" ],
|
||||
"mario.svg": [ "mario", "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-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" ],
|
||||
"microsoft-edge.svg": [ "microsoft-edge", "browser", "logo", "blue" ],
|
||||
"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" ],
|
||||
"mount-fuji.svg": [ "mount-fuji", "mountain", "hills", "japan", "snow", "travel", "blue" ],
|
||||
"nasilemak.svg": [ "nasilemak", "food", "green" ],
|
||||
"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" ],
|
||||
"panda.svg": [ "panda", "animal", "bear", "full-body", "black", "white" ],
|
||||
"paper-bag.svg": [ "paper-bag", "ui-icon", "pink" ],
|
||||
@ -154,7 +157,7 @@
|
||||
"raccoon.svg": [ "raccoon", "trash-panda", "full-body", "animal", "grey-gray" ],
|
||||
"rain.svg": [ "rain", "raining", "ui-icon", "cloud", "weather", "grey-gray" ],
|
||||
"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" ],
|
||||
"ribbon.svg": [ "ribbon", "red" ],
|
||||
"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" ],
|
||||
"scissors.svg": [ "scissors", "ui-icon", "cut", "copy", "paste", "purple", "pink" ],
|
||||
"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" ],
|
||||
"snowman.svg": [ "snowman", "xmas", "christmas", "festive", "white" ],
|
||||
"sound-high.svg": [ "sound-high", "ui-icon", "yellow" ],
|
||||
"sound-low.svg": [ "sound-low", "ui-icon", "yellow" ],
|
||||
"sound-mute.svg": [ "sound-mute", "ui-icon", "yellow" ],
|
||||
"sound-high.svg": [ "sound-high", "sound", "ui-icon", "yellow" ],
|
||||
"sound-low.svg": [ "sound-low", "sound", "ui-icon", "yellow" ],
|
||||
"sound-mute.svg": [ "sound-mute", "sound", "ui-icon", "yellow" ],
|
||||
"sparkles.svg": [ "sparkles", "blink", "stars", "yellow" ],
|
||||
"spooderman.svg": [ "spooderman", "spiderman", "meme", "red" ],
|
||||
"spotify.svg": [ "spotify", "logo", "green" ],
|
||||
"squirrel.svg": [ "squirrel", "animal", "full-body", "brown" ],
|
||||
"squirtle.svg": [ "squirtle", "pokemon", "tortoise", "blue" ],
|
||||
"star.svg": [ "star", "ui-icon", "rating", "full", "yellow" ],
|
||||
"star-half.svg": [ "star-half", "ui-icon", "rating", "yellow", "grey-gray" ],
|
||||
"star-empty.svg": [ "star-empty", "ui-icon", "rating", "grey-gray" ],
|
||||
"star-half.svg": [ "star-half", "star", "ui-icon", "rating", "yellow", "grey-gray" ],
|
||||
"star-empty.svg": [ "star-empty", "star", "ui-icon", "rating", "grey-gray" ],
|
||||
"strawberry.svg": [ "strawberry", "fruit", "food", "red" ],
|
||||
"sunglasses.svg": [ "sunglasses", "shades", "fashion", "cool", "wear", "black" ],
|
||||
"sun.svg": [ "sun", "ui-icon", "yellow", "light" ],
|
||||
@ -193,16 +196,16 @@
|
||||
"stonks.svg": [ "stonks", "meme", "mememan" ],
|
||||
"tang-yuan.svg": [ "tang-yuan", "food", "bowl", "glutinous-rice-balls", "winter-solstice", "chinese", "red" ],
|
||||
"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" ],
|
||||
"tiktok.svg": [ "tiktok", "logo", "douyin", "cyan", "magenta" ],
|
||||
"take-my-money.svg": [ "take-my-money", "meme", "shut-up", "fry", "futurama", "red" ],
|
||||
"this-is-fine.svg": [ "this-is-fine", "meme", "dog", "yellow", "orange" ],
|
||||
"thumb-down.svg": [ "thumb-down", "ui-icon", "pink", "good", "upvote" ],
|
||||
"thumb-up.svg": [ "thumb-up", "ui-icon", "blue", "bad", "downvote" ],
|
||||
"thumb-down.svg": [ "thumb-down", "thumb ", "ui-icon", "pink", "good", "upvote" ],
|
||||
"thumb-up.svg": [ "thumb-up", "thumb ", "ui-icon", "blue", "bad", "downvote" ],
|
||||
"truck.svg": [ "truck", "vehicle", "shipping", "delivery", "transportation", "blue" ],
|
||||
"truck-fast.svg": [ "truck", "vehicle", "shipping", "delivery", "transportation", "blue" ],
|
||||
"twitter-detailed.svg": [ "twitter-detailed", "logo", "bird", "blue" ],
|
||||
"truck-fast.svg": [ "truck-fast", "truck", "fast", "vehicle", "shipping", "delivery", "transportation", "blue" ],
|
||||
"twitter-detailed.svg": [ "twitter-detailed", "twitter", "logo", "bird", "blue" ],
|
||||
"twitter.svg": [ "twitter", "logo", "bird", "blue" ],
|
||||
"unicorn.svg": [ "unicorn", "horse", "animal", "full-body", "rainbow", "white", "colorful-colourful" ],
|
||||
"unlock.svg": [ "unlock", "ui-icon", "yellow", "orange" ],
|
||||
@ -210,7 +213,7 @@
|
||||
"users.svg": [ "users", "ui-icon", "blue" ],
|
||||
"watermelon.svg": [ "watermelon", "fruit", "food", "red" ],
|
||||
"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" ],
|
||||
"wreath.svg": [ "wreath", "christmas", "green", "christmas", "xmas", "festive" ],
|
||||
"wrench.svg": [ "wrench", "spanner", "settings", "preferences", "ui-icon", "grey-gray" ],
|
||||
@ -218,6 +221,6 @@
|
||||
"xmas-bell.svg": [ "xmas-bell", "xmas", "christmas", "festive", "yellow" ],
|
||||
"xmas-stocking.svg": [ "xmas-stocking", "xmas", "christmas", "socks", "festive", "red" ],
|
||||
"youtube.svg": [ "youtube", "logo", "play", "red" ],
|
||||
"zoom-in.svg": [ "zoom-in", "ui-icon", "magnifier", "brown", "white" ],
|
||||
"zoom-out.svg": [ "zoom-out", "ui-icon", "magnifier", "brown", "white" ]
|
||||
"zoom-in.svg": [ "zoom-in", "zoom", "ui-icon", "magnifier", "brown", "white" ],
|
||||
"zoom-out.svg": [ "zoom-out", "zoom", "ui-icon", "magnifier", "brown", "white" ]
|
||||
}
|
||||
13
public/icons/monkey-love.svg
Normal file
13
public/icons/monkey-love.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 728 B |
9
public/icons/monkey-walk.svg
Normal file
9
public/icons/monkey-walk.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 512 B |
11
public/icons/monkey.svg
Normal file
11
public/icons/monkey.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 609 B |
11
src/App.jsx
11
src/App.jsx
@ -9,7 +9,7 @@ function App() {
|
||||
const inputSearch = useRef()
|
||||
const checkShowName = useRef()
|
||||
const dispatch = useDispatch()
|
||||
const [currentQuery, setCurrentQuery] = useState("")
|
||||
const [currentQuery, setCurrentQuery] = useState(window.location.hash.replace("#", "") || "")
|
||||
|
||||
function queryOnChange () {
|
||||
let query = inputSearch.current.value
|
||||
@ -18,18 +18,27 @@ function App() {
|
||||
dispatch(setQuery(query))
|
||||
}
|
||||
|
||||
function clearQuery () {
|
||||
inputSearch.current.value = ""
|
||||
queryOnChange()
|
||||
}
|
||||
|
||||
function showNameOnChange () {
|
||||
dispatch(setShowName(checkShowName.current.checked))
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
inputSearch.current.focus()
|
||||
queryOnChange()
|
||||
})
|
||||
|
||||
return (
|
||||
<>
|
||||
<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' />
|
||||
{
|
||||
currentQuery == '' ? '' : <button id='btn-clear-search' onClick={ clearQuery }>x</button>
|
||||
}
|
||||
</div>
|
||||
<div id='display-options'>
|
||||
<input type="checkbox" name="checkShowName" ref={ checkShowName } onChange={ showNameOnChange } id='checkShowName' />
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { useSelector, useDispatch } from 'react-redux'
|
||||
import iconData from './icons.json'
|
||||
import iconData from '../public/icons.json'
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
|
||||
export const IconList = function () {
|
||||
@ -30,7 +30,8 @@ export const IconList = function () {
|
||||
}, [query])
|
||||
|
||||
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) {
|
||||
@ -44,9 +45,9 @@ export const IconList = function () {
|
||||
return (
|
||||
<ul className={ `icon-list ${ showName ? 'show-name' : ''}` }>
|
||||
{ icons.map( (filename, index) => (
|
||||
<li key={ index } onClick={ e => launchDownload(filename) }>
|
||||
<img className='icon' src={ `./icons/${filename}` } />
|
||||
<div className='name'>{ showName ? filename.replace('.svg', '') : '' }</div>
|
||||
<li key={ index }>
|
||||
<a href={`https://sqkhor.com/pixel-icons/${filename.replace('.svg', '')}`}><img className='icon' src={ `./icons/${filename}` } /></a>
|
||||
<div className='name'>{ showName ? <a href={`https://sqkhor.com/pixel-icons/${filename.replace('.svg', '')}`}>{filename.replace('.svg', '')}</a> : '' }</div>
|
||||
</li>
|
||||
) ) }
|
||||
</ul>
|
||||
|
||||
126
src/index.css
126
src/index.css
@ -3,8 +3,8 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Silkscreen&display=swap');
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans PX';
|
||||
src: url('../fonts/OpenSansPX.ttf') format('truetype')
|
||||
font-family: 'Open Sans PX';
|
||||
src: url('../fonts/OpenSansPX.ttf') format('truetype')
|
||||
}
|
||||
|
||||
:root {
|
||||
@ -83,6 +83,7 @@ input[type="text"]:focus {
|
||||
}
|
||||
|
||||
.pixel-input {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 2px;
|
||||
background: var(--grey-color);
|
||||
@ -167,16 +168,21 @@ header .buttons {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#site-title {
|
||||
height: 30px;
|
||||
width: auto;
|
||||
fill: currentColor;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1;
|
||||
svg#site-title,
|
||||
img#site-title {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
|
||||
@ -282,6 +288,21 @@ input#search {
|
||||
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 {
|
||||
margin-top: 18px;
|
||||
font-size: 1em;
|
||||
@ -350,3 +371,96 @@ ul.icon-list a {
|
||||
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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user