Moved php to /php folder, and some style updates
This commit is contained in:
parent
5dff276690
commit
97f7f9e7fa
16
index.html
16
index.html
@ -61,15 +61,25 @@
|
||||
<rect x="450" y="50" width="30" height="10"/>
|
||||
</svg>
|
||||
<div class="buttons">
|
||||
<a class="pill" href="./download.php?icon=all" target="_blank">Download All</a>
|
||||
<a class="pill" href="https://github.com/shuqikhor/PixelIcon" target="_blank">GitHub</a>
|
||||
<button class="pill" id="btn-theme">
|
||||
<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/PixelIcon" 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>180 pixel-perfect icons, free to use for all your projects!</p>
|
||||
<p>These pixel-art icons are all carefully crafted in 9x9 pixel grids, then 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"></div>
|
||||
<footer>
|
||||
<p>Made by <a href="https://sqkhor.com">Shuqi Khor</a></p>
|
||||
</footer>
|
||||
</div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
<script>
|
||||
|
||||
94
php/index.php
Normal file
94
php/index.php
Normal file
@ -0,0 +1,94 @@
|
||||
<?php
|
||||
|
||||
$icons_path = __DIR__."/icons";
|
||||
|
||||
$files = scandir($icons_path);
|
||||
$files = array_filter($files, function ($file) {
|
||||
return (substr($file, -4, 4) == ".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="Pixel Icons" />
|
||||
<meta property="og:url" content="https://sqkhor.com/pixel-icons/" />
|
||||
<meta property="og:image" content="https://sqkhor.com/pixel-icons/cover2.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." />
|
||||
<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." />
|
||||
<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">
|
||||
<style>
|
||||
.preload img {
|
||||
width: 1em;
|
||||
height: 1em
|
||||
}
|
||||
</style>
|
||||
</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/PixelIcon" 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, then 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">
|
||||
<?php foreach ($files as $file): ?>
|
||||
<div class="preload">
|
||||
<a href="download.php?icon=<?= $file ?>" target="_blank">
|
||||
<img src="./icons/<?= $file ?>" alt="<?= str_replace(".svg", "", $file) ?>">
|
||||
<?= str_replace(".svg", "", $file) ?>
|
||||
</a>
|
||||
</div>
|
||||
<?php endforeach ?>
|
||||
</div>
|
||||
<footer>
|
||||
<p>Made by <a href="https://sqkhor.com">Shuqi Khor</a></p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
let light = true;
|
||||
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.documentElement.dataset.theme = light ? 'light' : 'dark';
|
||||
});
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
public/fonts/OpenSansPX.ttf
Executable file
BIN
public/fonts/OpenSansPX.ttf
Executable file
Binary file not shown.
25
src/App.css
25
src/App.css
@ -1,3 +1,10 @@
|
||||
@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')
|
||||
}
|
||||
|
||||
#root {
|
||||
width: 100%;
|
||||
}
|
||||
@ -41,18 +48,26 @@ ul.icon-list>li {
|
||||
|
||||
ul.icon-list.show-name>li {
|
||||
padding: 9px;
|
||||
width: 90px;
|
||||
height: 99px;
|
||||
width: 99px;
|
||||
height: 126px;
|
||||
/* border: 1px solid #ccc; */
|
||||
}
|
||||
|
||||
ul.icon-list img {
|
||||
ul.icon-list img.icon {
|
||||
width: 36px;
|
||||
height: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ul.icon-list .name {
|
||||
font-size: 9pt;
|
||||
line-height: 18px;
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
margin-top: 9px;
|
||||
font-family: "Open Sans PX";
|
||||
}
|
||||
|
||||
@media (hover:hover) {
|
||||
ul.icon-list>li:hover img.icon {
|
||||
transform: translateY(-6px);
|
||||
}
|
||||
}
|
||||
@ -24,7 +24,9 @@ function App() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<input type='text' id='search' ref={ inputSearch } onChange={ queryOnChange } placeholder="Search an icon — try ‘fruit’, ‘logo’, ‘ui’" />
|
||||
<div className="pixel-input">
|
||||
<input type='text' id='search' ref={ inputSearch } onChange={ queryOnChange } placeholder="Search an icon — try ‘fruit’, ‘logo’, ‘ui’" autoComplete='no' />
|
||||
</div>
|
||||
<div id='display-options'>
|
||||
<input type="checkbox" name="checkShowName" ref={ checkShowName } onChange={ showNameOnChange } id='checkShowName' />
|
||||
<label htmlFor="checkShowName">Display icon names</label>
|
||||
|
||||
@ -21,12 +21,6 @@ export const IconList = function () {
|
||||
if (tag.indexOf(keyword.toLowerCase()) != -1) return true
|
||||
}
|
||||
})
|
||||
// const matched = iconData[filename].filter(tag => {
|
||||
// for (const keyword of keywords) {
|
||||
// if (tag.indexOf(keyword.toLowerCase()) != -1) return true
|
||||
// }
|
||||
// return false
|
||||
// })
|
||||
|
||||
if (matched.length == keywords.length) filtered.push(filename)
|
||||
}
|
||||
|
||||
201
src/index.css
201
src/index.css
@ -1,11 +1,23 @@
|
||||
/* @import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans&display=swap'); */
|
||||
/* @import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans&family=Silkscreen&display=swap'); */
|
||||
@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')
|
||||
}
|
||||
|
||||
:root {
|
||||
font-size: 9px;
|
||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
font-family: 'Silkscreen', sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
--font-color: rgba(255, 255, 255, 0.87);
|
||||
--background-color: #242424;
|
||||
--font-color: #ecebf7;
|
||||
--grey-color: #a2a1b3;
|
||||
--background-color: #111111;
|
||||
--link-color: #99ccff;
|
||||
--link-color-hover: #4236f7;
|
||||
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -17,8 +29,11 @@
|
||||
}
|
||||
|
||||
[data-theme="light"] {
|
||||
--font-color: #213547;
|
||||
--font-color: #343340;
|
||||
--grey-color: #6f6d80;
|
||||
--background-color: #ffffff;
|
||||
--link-color: #99ccff;
|
||||
--link-color-hover: #4236f7;
|
||||
}
|
||||
|
||||
body {
|
||||
@ -31,20 +46,94 @@ body {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
padding: 9px 18px;
|
||||
color: var(--font-color);
|
||||
border: 1px solid var(--font-color);
|
||||
border-radius: 18px;
|
||||
box-sizing: border-box;
|
||||
#introduction {
|
||||
margin-bottom: 2rem;
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: var(--background-color);
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (hover:hover) {
|
||||
a:hover {
|
||||
color: var(--link-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: "Open Sans PX", sans-serif;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
font-family: 'Silkscreen', sans-serif;
|
||||
padding: 9px;
|
||||
color: var(--font-color);
|
||||
border: 2px solid var(--grey-color);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
input[type="text"]:focus {
|
||||
outline: 0;
|
||||
border-color: var(--font-color)
|
||||
}
|
||||
|
||||
.pixel-input {
|
||||
box-sizing: border-box;
|
||||
padding: 2px;
|
||||
background: var(--grey-color);
|
||||
clip-path: polygon(
|
||||
0 4px,
|
||||
2px 4px,
|
||||
2px 2px,
|
||||
4px 2px,
|
||||
4px 0,
|
||||
|
||||
calc(100% - 4px) 0,
|
||||
calc(100% - 4px) 2px,
|
||||
calc(100% - 2px) 2px,
|
||||
calc(100% - 2px) 4px,
|
||||
100% 4px,
|
||||
|
||||
100% calc(100% - 4px),
|
||||
calc(100% - 2px) calc(100% - 4px),
|
||||
calc(100% - 2px) calc(100% - 2px),
|
||||
calc(100% - 4px) calc(100% - 2px),
|
||||
calc(100% - 4px) 100%,
|
||||
|
||||
4px 100%,
|
||||
4px calc(100% - 2px),
|
||||
2px calc(100% - 2px),
|
||||
2px calc(100% - 4px),
|
||||
0 calc(100% - 4px)
|
||||
);
|
||||
}
|
||||
|
||||
.pixel-input input[type="text"] {
|
||||
background: var(--background-color);
|
||||
border: 0;
|
||||
box-sizing: border-box;
|
||||
clip-path: polygon(
|
||||
2px 0,
|
||||
calc(100% - 2px) 0,
|
||||
calc(100% - 2px) 2px,
|
||||
100% 2px,
|
||||
100% calc(100% - 2px),
|
||||
calc(100% - 2px) calc(100% - 2px),
|
||||
calc(100% - 2px) 100%,
|
||||
2px 100%,
|
||||
2px calc(100% - 2px),
|
||||
0 calc(100% - 2px),
|
||||
0 2px,
|
||||
2px 2px
|
||||
);
|
||||
}
|
||||
|
||||
.pixel-input:focus-within {
|
||||
background-color: var(--font-color)
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
@ -52,7 +141,7 @@ input[type="text"]:focus {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
font-size: 9pt;
|
||||
font-size: 13.5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@ -65,6 +154,11 @@ header {
|
||||
margin: 36px 0 54px;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 36px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
header .buttons {
|
||||
display: flex;
|
||||
gap: 18px;
|
||||
@ -84,20 +178,87 @@ h1 {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
a.pill,
|
||||
button.pill {
|
||||
|
||||
|
||||
a.button,
|
||||
button.button {
|
||||
display: inline-block;
|
||||
font-size: 1em;
|
||||
line-height: 1.5em;
|
||||
padding: 4px 9px;
|
||||
border-radius: 27px;
|
||||
border: 1px solid var(--font-color);
|
||||
border: 2px solid var(--grey-color);
|
||||
color: var(--font-color);
|
||||
background-color: var(--background-color);
|
||||
/* background: #ffffff; */
|
||||
/* color: #213547; */
|
||||
text-decoration: none;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pill {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
padding: 2px;
|
||||
background: var(--grey-color);
|
||||
clip-path: polygon(
|
||||
0 4px,
|
||||
2px 4px,
|
||||
2px 2px,
|
||||
4px 2px,
|
||||
4px 0,
|
||||
|
||||
calc(100% - 4px) 0,
|
||||
calc(100% - 4px) 2px,
|
||||
calc(100% - 2px) 2px,
|
||||
calc(100% - 2px) 4px,
|
||||
100% 4px,
|
||||
|
||||
100% calc(100% - 4px),
|
||||
calc(100% - 2px) calc(100% - 4px),
|
||||
calc(100% - 2px) calc(100% - 2px),
|
||||
calc(100% - 4px) calc(100% - 2px),
|
||||
calc(100% - 4px) 100%,
|
||||
|
||||
4px 100%,
|
||||
4px calc(100% - 2px),
|
||||
2px calc(100% - 2px),
|
||||
2px calc(100% - 4px),
|
||||
0 calc(100% - 4px)
|
||||
);
|
||||
}
|
||||
|
||||
.pill a.button,
|
||||
.pill button.button {
|
||||
background: var(--background-color);
|
||||
border: 0;
|
||||
box-sizing: border-box;
|
||||
clip-path: polygon(
|
||||
2px 0,
|
||||
calc(100% - 2px) 0,
|
||||
calc(100% - 2px) 2px,
|
||||
100% 2px,
|
||||
100% calc(100% - 2px),
|
||||
calc(100% - 2px) calc(100% - 2px),
|
||||
calc(100% - 2px) 100%,
|
||||
2px 100%,
|
||||
2px calc(100% - 2px),
|
||||
0 calc(100% - 2px),
|
||||
0 2px,
|
||||
2px 2px
|
||||
);
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
a.button:hover,
|
||||
button.button:hover {
|
||||
border-color: var(--font-color);
|
||||
}
|
||||
|
||||
.pill:hover,
|
||||
.pill:hover {
|
||||
background-color: var(--font-color);
|
||||
}
|
||||
}
|
||||
|
||||
img.theme-icon {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user