99 lines
4.4 KiB
PHP
99 lines
4.4 KiB
PHP
<?php
|
|
|
|
$icons_path = __DIR__."/icons";
|
|
|
|
$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>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<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 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 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>
|
|
<script type="module" crossorigin src="./assets/index.js"></script>
|
|
<link rel="stylesheet" href="./assets/index.css">
|
|
</head>
|
|
<body>
|
|
<div id="wrapper">
|
|
<header>
|
|
<!-- <h1>Pixel Icons</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="introduction">
|
|
<p><?= count($files) ?> pixel-perfect icons, free to use for all your projects!</p>
|
|
<p>These pixel-art icons are all carefully crafted in 9x9 pixel grids, saved in SVG vector format.</p>
|
|
<p>To download, please click the icons you want, or click the [Download All] button above.</p>
|
|
</div>
|
|
<div id="root">
|
|
<ul class="icon-list show-name">
|
|
<?php foreach ($files as $file): ?>
|
|
<li>
|
|
<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" 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 () {
|
|
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>
|