427 lines
16 KiB
HTML
427 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, initial-scale=1, shrink-to-fit=no"
|
|
/>
|
|
<title>System UIcons</title>
|
|
<meta name="title" content="System UIcons" />
|
|
<meta
|
|
name="description"
|
|
content="A free icon set designed for systems and products. Use how you want, without attribution."
|
|
/>
|
|
|
|
<!-- Open Graph / Facebook -->
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:url" content="https://systemuicons.com/" />
|
|
<meta property="og:title" content="System UIcons" />
|
|
<meta
|
|
property="og:description"
|
|
content="A free icon set designed for systems and products. Use how you want, without attribution."
|
|
/>
|
|
<meta
|
|
property="og:image"
|
|
content="https://systemuicons.com/images/ogp/systemuicons_banner.png"
|
|
/>
|
|
|
|
<!-- Twitter -->
|
|
<meta property="twitter:card" content="summary_large_image" />
|
|
<meta property="twitter:url" content="https://systemuicons.com/" />
|
|
<meta property="twitter:title" content="System UIcons" />
|
|
<meta
|
|
property="twitter:description"
|
|
content="A free icon set designed for systems and products. Use how you want, without attribution."
|
|
/>
|
|
<meta
|
|
property="twitter:image"
|
|
content="https://systemuicons.com/images/ogp/systemuicons_banner.png"
|
|
/>
|
|
<script src="//unpkg.com/alpinejs" defer></script>
|
|
<link rel="icon" type="image/svg+xml" href="/images/favicons/favicon.svg" />
|
|
<link
|
|
rel="mask-icon"
|
|
href="/images/favicons/safari-pinned-tab.svg"
|
|
color="#2A2E3B"
|
|
/>
|
|
<!-- Primary Meta Tags -->
|
|
</head>
|
|
<body
|
|
class="flex flex-col min-h-screen font-mono leading-normal tracking-normal bg-white"
|
|
x-data="loadIcons()"
|
|
>
|
|
<main class="flex-grow">
|
|
<nav class="flex justify-between p-4 text-sm md:p-6 lg:p-8 md:text-base">
|
|
<div class="flex ml-auto space-x-3 md:space-x-8">
|
|
<a
|
|
class="hover:underline"
|
|
href="https://github.com/CoreyGinnivan/system-uicons"
|
|
rel="noreferrer"
|
|
target="_blank"
|
|
>GitHub</a
|
|
>
|
|
<a
|
|
class="flex hover:underline"
|
|
href="https://github.com/sponsors/CoreyGinnivan"
|
|
rel="noreferrer"
|
|
target="_blank"
|
|
>
|
|
<span class="mr-2">
|
|
<svg height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="translate(1 3)"><path d="m17.5 8.5v3c0 1.2994935-3.1340068 3-7 3-3.86599325 0-7-1.7005065-7-3 0-.4275221 0-1.2608554 0-2.5"/><path d="m3.79385803 9.25873308c.86480173 1.14823502 3.53999333 2.22489962 6.70614197 2.22489962 3.8659932 0 7-1.60524016 7-2.98595204 0-.77476061-.9867994-1.62391104-2.5360034-2.22001882"/><path d="m14.5 3.5v3c0 1.29949353-3.1340068 3-7 3-3.86599325 0-7-1.70050647-7-3 0-.64128315 0-2.35871685 0-3"/><path d="m7.5 6.48363266c3.8659932 0 7-1.60524012 7-2.985952 0-1.38071187-3.1340068-2.99768066-7-2.99768066-3.86599325 0-7 1.61696879-7 2.99768066 0 1.38071188 3.13400675 2.985952 7 2.985952z"/></g></svg>
|
|
</span>
|
|
<span class="whitespace-no-wrap">Sponsor</span>
|
|
</a
|
|
>
|
|
</div>
|
|
</nav>
|
|
<div class="p-4 md:p-6 lg:p-8 y-">
|
|
<p class="text-xl leading-tight font-semibold text-black lg:text-3xl xl:text-5xl">
|
|
System UIcons
|
|
</p>
|
|
<p class="text-xl leading-tight ml-24 text-black lg:text-3xl xl:text-5xl">
|
|
A growing collection of simple and consistent icons specifically
|
|
designed for systems and products.
|
|
</p>
|
|
<p class="text-xl leading-tight font-semibold text-black lg:text-3xl xl:text-5xl">
|
|
Use how you want, without attribution.
|
|
</p>
|
|
</div>
|
|
<div
|
|
class="flex flex-row items-center px-4 py-4 mt-4 text-gray-400 bg-white md:px-6 lg:px-8 md:mt-6 lg:mt-8"
|
|
>
|
|
<svg
|
|
viewBox="0 0 21 21"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="w-6 h-6 mr-4 md:w-7 lg:w-12 md:h-7 lg:h-12"
|
|
>
|
|
<g
|
|
fill="none"
|
|
fill-rule="evenodd"
|
|
stroke="currentcolor"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<circle cx="8.5" cy="8.5" r="5" />
|
|
<path d="m17.571 17.5-5.571-5.5" />
|
|
</g>
|
|
</svg>
|
|
<input
|
|
onFocus="this.select()"
|
|
autofocus="autofocus"
|
|
x-ref="searchField"
|
|
x-model="search"
|
|
x-on:keydown.window.prevent.slash="$refs.searchField.focus()"
|
|
x-bind:placeholder="'Search ' + myForData.length + ' System UIcons'"
|
|
type="text"
|
|
name="search"
|
|
value=""
|
|
autocapitalize="off"
|
|
autocomplete="off"
|
|
autocorrect="off"
|
|
spellcheck="false"
|
|
class="flex flex-1 w-full text-xl tracking-tighter text-black placeholder-gray-400 appearance-none focus:outline-none focus:text-black lg:text-3xl xl:text-5xl"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="sticky top-0 z-50 flex flex-col px-4 py-4 space-y-2 bg-white border-t border-gray-100 md:space-y-0 md:flex-row md:px-6 lg:px-8"
|
|
:class="{ 'shadow-md duration-100' : showBar }"
|
|
@scroll.window="showBar = (window.pageYOffset > 450) ? true : false"
|
|
>
|
|
<div
|
|
class="flex flex-col p-1 space-x-0 space-y-1 bg-gray-200 mr-2 rounded md:flex-row md:space-x-1 md:space-y-0"
|
|
>
|
|
<label
|
|
class="inline-flex flex-no-wrap items-center w-full h-full px-2 py-2 text-sm duration-200 rounded cursor-pointer lg:text-base hover:bg-gray-100 hover:text-black md:w-auto md:py-0"
|
|
:class="downloadType === 'copy-svg' ? 'bg-white shadow' : 'text-gray-600'"
|
|
>
|
|
<input
|
|
type="radio"
|
|
class="hidden"
|
|
name="copy-svg"
|
|
x-model="downloadType"
|
|
:value="'copy-svg'"
|
|
checked
|
|
/>
|
|
<span class="mr-2">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="21"
|
|
height="21"
|
|
viewBox="0 0 21 21"
|
|
>
|
|
<g
|
|
fill="none"
|
|
fill-rule="evenodd"
|
|
stroke="currentcolor"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
transform="translate(2 3)"
|
|
>
|
|
<line x1="10.5" x2="6.5" y1=".5" y2="14.5" />
|
|
<polyline
|
|
points="7.328 2.672 7.328 8.328 1.672 8.328"
|
|
transform="rotate(135 4.5 5.5)"
|
|
/>
|
|
<polyline
|
|
points="15.328 6.672 15.328 12.328 9.672 12.328"
|
|
transform="scale(1 -1) rotate(-45 -10.435 0)"
|
|
/>
|
|
</g>
|
|
</svg>
|
|
</span>
|
|
<span class="whitespace-no-wrap">Copy SVG Element</span>
|
|
</label>
|
|
<label
|
|
class="inline-flex flex-no-wrap items-center w-full h-full px-2 py-2 text-sm duration-200 rounded cursor-pointer lg:text-base hover:bg-gray-100 hover:text-black md:w-auto md:py-0"
|
|
:class="downloadType === 'copy-cdn' ? 'bg-white shadow' : 'text-gray-600'"
|
|
>
|
|
<input
|
|
type="radio"
|
|
class="hidden"
|
|
name="copy-cdn"
|
|
x-model="downloadType"
|
|
:value="'copy-cdn'"
|
|
/>
|
|
<span class="mr-2">
|
|
<svg
|
|
height="21"
|
|
viewBox="0 0 21 21"
|
|
width="21"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<g
|
|
fill="none"
|
|
fill-rule="evenodd"
|
|
stroke="currentcolor"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
transform="translate(4 4)"
|
|
>
|
|
<path
|
|
d="m5.5 7.5c.96940983 1.36718798 3.01111566 1.12727011 4.01111565 0l1.98888435-2c1.1243486-1.22807966 1.1641276-2.81388365 0-4-1.135619-1.15706921-2.86438099-1.15706947-4 0l-2 2"
|
|
/>
|
|
<path
|
|
d="m.64175661 12.3971156c.96940983 1.367188 3 1.1970433 4 .0697732l2-1.9748738c1.12434863-1.22807961 1.16412758-2.83900987 0-4.02512622-1.13561902-1.15706922-2.86438099-1.15706948-4 0l-2 2"
|
|
transform="matrix(-1 0 0 -1 8.14 18.966)"
|
|
/>
|
|
</g>
|
|
</svg>
|
|
</span>
|
|
<span class="whitespace-no-wrap">Copy CDN Link</span>
|
|
</label>
|
|
<label
|
|
class="inline-flex flex-no-wrap items-center w-full h-full px-2 py-2 text-sm transition duration-200 rounded cursor-pointer lg:text-base hover:bg-gray-100 hover:text-black md:w-auto md:py-0"
|
|
:class="downloadType === 'download-svg' ? 'bg-white shadow' : 'text-gray-600'"
|
|
>
|
|
<input
|
|
type="radio"
|
|
class="hidden"
|
|
name="download-svg"
|
|
x-model="downloadType"
|
|
:value="'download-svg'"
|
|
/>
|
|
<span class="mr-2">
|
|
<svg
|
|
height="21"
|
|
viewBox="0 0 21 21"
|
|
width="21"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<g
|
|
fill="none"
|
|
fill-rule="evenodd"
|
|
stroke="currentcolor"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
transform="translate(4 3)"
|
|
>
|
|
<path
|
|
d="m9.221 4.716.165 5.821-5.792-.135"
|
|
transform="matrix(-.70710678 .70710678 .70710678 .70710678 5.685139 -2.354861)"
|
|
/>
|
|
<path d="m6.5.5v11" />
|
|
<path d="m.5 14.5h12" />
|
|
</g>
|
|
</svg>
|
|
</span>
|
|
<span class="whitespace-no-wrap">Download SVG Icon</span>
|
|
</label>
|
|
</div>
|
|
<a
|
|
href="images/System UIcons.zip"
|
|
class="flex flex-row items-center w-full p-3 ml-auto text-sm text-white bg-black rounded lg:text-base hover:bg-gray-900 md:w-auto"
|
|
download
|
|
>
|
|
<span class="mr-2">
|
|
<svg
|
|
height="21"
|
|
viewBox="0 0 21 21"
|
|
width="21"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<g
|
|
fill="none"
|
|
fill-rule="evenodd"
|
|
stroke="currentcolor"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
transform="translate(4 3)"
|
|
>
|
|
<path
|
|
d="m9.221 4.716.165 5.821-5.792-.135"
|
|
transform="matrix(-.70710678 .70710678 .70710678 .70710678 5.685139 -2.354861)"
|
|
/>
|
|
<path d="m6.5.5v11" />
|
|
<path d="m.5 14.5h12" />
|
|
</g>
|
|
</svg>
|
|
</span>
|
|
<span class="whitespace-no-wrap">Download All Icons</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div
|
|
class="grid grid-cols-2 m-4 md:m-6 lg:m-8 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-10 divide-x divide-y divide-gray-200 border-r border-b border-solid border-gray-200"
|
|
>
|
|
<template x-for="(item, index) in filteredIcons" :key="index">
|
|
<a
|
|
href=""
|
|
x-bind:href="document.location.protocol +
|
|
'//' +
|
|
document.location.host +
|
|
`/images/icons/` +
|
|
item.icon_path +
|
|
`.svg`"
|
|
x-bind:download="downloadType === 'download-svg' && item.icon_name"
|
|
class="relative flex flex-col items-center justify-center h-32 p-2 text-gray-700 duration-150 ease-in-out bg-white cursor-pointer group hover:z-10 hover:shadow-xl md:h-40"
|
|
@click="handleClick(item, downloadType, $event, $dispatch)"
|
|
>
|
|
<div
|
|
role="alert"
|
|
x-show="copied === item.icon_name"
|
|
x-on:show:toast.document="copied = $event.detail"
|
|
x-cloak
|
|
class="absolute top-0 left-0 right-0 z-50 px-2 py-1 mx-auto -mt-8 text-sm text-center text-white bg-black rounded hover:border-gray-900"
|
|
style="width: fit-content"
|
|
x-transition:enter="ease-out duration-200"
|
|
x-transition:enter-start="opacity-0 scale-90"
|
|
x-transition:enter-end="opacity-100 scale-100"
|
|
x-transition:leave="ease-in duration-500 "
|
|
x-transition:leave-start="opacity-100 scale-100"
|
|
x-transition:leave-end="opacity-0 scale-90"
|
|
>
|
|
<template x-if="downloadType == 'download-svg'"
|
|
><span>Downloading!</span></template
|
|
>
|
|
<template x-if="downloadType == 'copy-cdn'"
|
|
><span>Copied URL</span></template
|
|
>
|
|
<template x-if="downloadType == 'copy-svg'"
|
|
><span>Copied SVG</span></template
|
|
>
|
|
</div>
|
|
<img
|
|
:src="`images/icons/` + item.icon_path + `.svg`"
|
|
:alt="item.icon_name"
|
|
class="duration-200 group-hover:scale-200"
|
|
loading="lazy"
|
|
/>
|
|
<span class="hidden" x-cloak x-text="item.icon_keywords"></span>
|
|
<p
|
|
class=" absolute text-[11px] leading-snug text-left bottom-2 left-2 tracking-tight text-gray-400"
|
|
x-text="item.icon_name"
|
|
></p>
|
|
</a>
|
|
</template>
|
|
</div>
|
|
<div x-show="filteredIcons.length === 0" class="w-full m-4 md:m-6 lg:m-8">
|
|
<h3 class="text-xl text-gray-500">No Matches Found</h3>
|
|
</div>
|
|
</main>
|
|
<footer
|
|
class="flex flex-col py-8 mx-8 space-y-4 text-gray-700 md:space-y-0 md:flex-row"
|
|
>
|
|
<span>
|
|
Project by
|
|
<a
|
|
href="https://twitter.com/CoreyGinnivan"
|
|
rel="noreferrer"
|
|
target="_blank"
|
|
class="text-black hover:underline"
|
|
>Corey Ginnivan</a
|
|
>
|
|
</span>
|
|
<span class="md:ml-auto">Use how you want, without attribution</span>
|
|
</footer>
|
|
|
|
<script type="text/javascript" src="/js/data.js"></script>
|
|
<script>
|
|
function loadIcons() {
|
|
return {
|
|
search: "",
|
|
showBar: false,
|
|
downloadType: "copy-svg",
|
|
myForData: sourceData,
|
|
copied: false,
|
|
get filteredIcons() {
|
|
if (this.search === "") {
|
|
return this.myForData;
|
|
}
|
|
return this.myForData.filter((item) => {
|
|
return item.icon_keywords
|
|
.toLowerCase()
|
|
.includes(this.search.toLowerCase());
|
|
});
|
|
},
|
|
handleClick(item, downloadType, event, $dispatch) {
|
|
if (downloadType === "copy-svg") {
|
|
event.preventDefault();
|
|
var url =
|
|
document.location.protocol +
|
|
"//" +
|
|
document.location.host +
|
|
`/images/icons/` +
|
|
item.icon_path +
|
|
`.svg`;
|
|
fetch(url).then(function (response) {
|
|
if (response.ok) {
|
|
response.text().then(function (svg) {
|
|
navigator.clipboard.writeText(svg);
|
|
$dispatch("show:toast", item.icon_name);
|
|
setTimeout(() => $dispatch("show:toast", false), 1000);
|
|
});
|
|
}
|
|
});
|
|
}
|
|
if (downloadType === "copy-cdn") {
|
|
event.preventDefault();
|
|
var url =
|
|
document.location.protocol +
|
|
"//" +
|
|
document.location.host +
|
|
`/images/icons/` +
|
|
item.icon_path +
|
|
`.svg`;
|
|
navigator.clipboard.writeText(url);
|
|
|
|
$dispatch("show:toast", item.icon_name);
|
|
setTimeout(() => $dispatch("show:toast", false), 1000);
|
|
} else {
|
|
$dispatch("show:toast", item.icon_name);
|
|
setTimeout(() => $dispatch("show:toast", false), 1000);
|
|
}
|
|
},
|
|
};
|
|
}
|
|
</script>
|
|
<!-- Fathom - beautiful, simple website analytics -->
|
|
<script
|
|
src="https://cdn.usefathom.com/script.js"
|
|
site="BBRZGFHT"
|
|
defer
|
|
></script>
|
|
<!-- / Fathom -->
|
|
</body>
|
|
</html>
|