<?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(Imagick::INTERPOLATE_INTEGER);
$image->resizeImage(180, 180, Imagick::FILTER_POINT, 1);
$image->borderImage('#ffffff', 510, 225);
$image->writeImage($preview_path);
$preview_mtime = time();
} else {
$preview_mtime = filemtime($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?<?= $preview_mtime ?>" />
<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>