deblan-mirror/system-uicons
1
0
Fork 0
mirror of https://github.com/CoreyGinnivan/system-uicons.git synced 2024-05-07 07:56:34 +02:00
Code Issues Releases Wiki Activity
system-uicons/src/index.html
Corey 9e7182f247 Added icon, removed custom forms
2020-05-26 09:33:49 +08:00

331 lines
8.4 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<title>System UIcons</title>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap"
rel="stylesheet"
/>
<script
src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.3.5/dist/alpine.min.js"
defer
></script>
</head>
<body
class="bg-white font-mono leading-normal tracking-normal"
x-data="loadIcons()"
>
<div class="bg-white px-8 py-4">
<input
onFocus="this.select()"
autofocus="autofocus"
x-ref="searchField"
x-model="search"
x-on:keydown.window.prevent.slash="$refs.searchField.focus()"
placeholder="Search 420 System UIcons"
type="text"
name="search"
value=""
autocapitalize="off"
autocomplete="off"
autocorrect="off"
spellcheck="false"
class="flex flex-1 w-full py-4 focus:outline-none placeholder-gray-400 appearance-none text-black focus:text-black tracking-tighter text-xl lg:text-3xl xl:text-5xl"
/>
<div
class="flex flex-col space-y-4 sm:space-y-0 sm:flex-row border-t border-gray-300 bg-white pt-4"
>
<label class="inline-flex items-center">
<input
type="radio"
class="form-radio text-green-600"
name="clickType"
value="copy"
checked
/>
<span class="ml-2">Copy SVG Code</span>
</label>
<label class="inline-flex items-center sm:ml-6">
<input
type="radio"
class="form-radio text-green-600"
name="clickType"
value="download"
/>
<span class="ml-2">Download SVGs</span>
</label>
<button
class="flex flex-row items-center ml-auto p-3 rounded bg-black text-white hover:bg-gray-900 w-full sm:w-auto"
>
<span class="mr-4">
<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>
Download All SVGs
</button>
</div>
</div>
<div
class="p-8 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-7 gap-4"
>
<template x-for="item in filteredIcons" :key="item">
<a
href="#"
class="flex flex-col items-center justify-center text-gray-700 rounded shadow hover:shadow-xl bg-white cursor-pointer transition duration-150 ease-in-out h-48"
>
<svg
height="21"
viewBox="0 0 21 21"
width="21"
xmlns="http://www.w3.org/2000/svg"
>
<g
fill="none"
fill-rule="evenodd"
stroke="#2a2e3b"
stroke-linecap="round"
transform="translate(4 3)"
>
<path
d="m7.061 6.732.707 3.536-3.536-.707z"
fill="#2a2e3b"
transform="matrix(-.70710678 .70710678 -.70710678 -.70710678 16.253048 10.267767)"
/>
<g stroke-linejoin="round">
<path d="m5.5 8.5h9" />
<path
d="m4.50276494 1.99784965h-3.50491525c-.55228475 0-1 .44771525-1 1 0 .00081971.00000101.00163942.00000302.00245913l.00491223 1.99754087m0 6.00000005-.00491223 1.9975408c-.00135814.5522831.44525477 1.001098.99753785 1.0024561.00081971.000002.00163942.0000031.00245913.0000031h10.99753791c.5520446-.000615.9996604-.4479557 1.0006147-.9999999l.0061479-10.00000033c.0009541-.55228427-.4464858-1.00027469-.9987704-1.00061422-.000205-.00000013-.0004099-.00000019-.0006148.0006144h-2.50000006"
transform="matrix(0 1 -1 0 14.498 1.498)"
/>
<path
d="m4.5.5h4c.55228475 0 1 .44771525 1 1s-.44771525 1-1 1h-4c-.55228475 0-1-.44771525-1-1s.44771525-1 1-1z"
/>
</g>
</g>
</svg>
<p
class="text-xs leading-none text-center mt-8"
x-text="item.icon_name"
></p>
</a>
</template>
</div>
<footer class="py-8 mx-8 border-t border-gray-300 text-gray-600">
Project by
<a
href="https://twitter.com/CoreyGinnivan"
rel="noreferrer"
target="_blank"
class="text-black hover:underline"
>Corey Ginnivan</a
>
</footer>
<script>
var sourceData = [
{
id: "1",
icon_name: "Cog",
},
{
id: "2",
icon_name: "User",
},
{
id: "3",
icon_name: "Heart",
},
{
id: "4",
icon_name: "Filter",
},
{
id: "5",
icon_name: "Add",
},
{
id: "6",
icon_name: "Minus",
},
{
id: "7",
icon_name: "Remove",
},
{
id: "8",
icon_name: "Email",
},
{
id: "9",
icon_name: "Battery",
},
{
id: "10",
icon_name: "Battery - Empty",
},
{
id: "11",
icon_name: "Battery - Half",
},
{
id: "12",
icon_name: "Battery - Full",
},
{
id: "13",
icon_name: "Dashboard",
},
{
id: "14",
icon_name: "External",
},
{
id: "15",
icon_name: "Send",
},
{
id: "16",
icon_name: "Favourite",
},
{
id: "17",
icon_name: "News",
},
{
id: "18",
icon_name: "Copy",
},
{
id: "19",
icon_name: "Duplicate",
},
{
id: "20",
icon_name: "3D",
},
{
id: "21",
icon_name: "Cog",
},
{
id: "22",
icon_name: "User",
},
{
id: "23",
icon_name: "Heart",
},
{
id: "24",
icon_name: "Filter",
},
{
id: "25",
icon_name: "Add",
},
{
id: "26",
icon_name: "Minus",
},
{
id: "27",
icon_name: "Remove",
},
{
id: "28",
icon_name: "Email",
},
{
id: "29",
icon_name: "Battery",
},
{
id: "30",
icon_name: "Battery - Empty",
},
{
id: "31",
icon_name: "Battery - Half",
},
{
id: "32",
icon_name: "Battery - Full",
},
{
id: "33",
icon_name: "Dashboard",
},
{
id: "34",
icon_name: "External",
},
{
id: "35",
icon_name: "Send",
},
{
id: "36",
icon_name: "Favourite",
},
{
id: "37",
icon_name: "News",
},
{
id: "38",
icon_name: "Copy",
},
{
id: "39",
icon_name: "Duplicate",
},
{
id: "40",
icon_name: "3D",
},
];
function loadIcons() {
return {
search: "",
myForData: sourceData,
get filteredIcons() {
if (this.search === "") {
return this.myForData;
}
return this.myForData.filter((item) => {
return item.icon_name
.toLowerCase()
.includes(this.search.toLowerCase());
});
},
};
}
</script>
</body>
</html>
Reference in a new issue View git blame Copy permalink