deblan-mirror/system-uicons
1
0
Fork 0
mirror of https://github.com/CoreyGinnivan/system-uicons.git synced 2024-04-25 02:30:28 +02:00
Code Issues Releases Wiki Activity
system-uicons/src/index.html
Corey 852421579a Added keywords, added link button
2020-05-26 10:50:53 +08:00

391 lines
11 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 md:space-y-0 md: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 md:ml-6">
<input
type="radio"
class="form-radio text-green-600"
name="clickType"
value="link"
/>
<span class="ml-2">&lt;img/&gt; Link</span>
</label>
<label class="inline-flex items-center md: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 md: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"
>
<p
class="text-xs leading-none text-center mt-8"
x-text="item.icon_name"
></p>
<span class="hidden" x-text="item.icon_keywords"></span>
</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",
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "cog, settings",
},
{
id: "2",
icon_name: "User",
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "user, people, person, avatar",
},
{
id: "3",
icon_name: "Heart",
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "heart, love, beating",
},
{
id: "4",
icon_name: "Filter",
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "filter, filtering",
},
{
id: "5",
icon_name: "Add",
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "add, plus",
},
{
id: "6",
icon_name: "Minus",
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "minus, negative",
},
{
id: "7",
icon_name: "Remove",
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
},
{
id: "8",
icon_name: "Email",
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
},
{
id: "9",
icon_name: "Battery",
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
},
{
id: "10",
icon_name: "Battery - Empty",
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
},
{
id: "11",
icon_name: "Battery - Half",
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
},
{
id: "12",
icon_name: "Battery - Full",
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
},
{
id: "13",
icon_name: "Dashboard",
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
},
{
id: "14",
icon_name: "External",
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
},
{
id: "15",
icon_name: "Send",
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
},
{
id: "16",
icon_name: "Favourite",
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
},
{
id: "17",
icon_name: "News",
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
},
{
id: "18",
icon_name: "Copy",
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
},
{
id: "19",
icon_name: "Duplicate",
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
},
{
id: "20",
icon_name: "3D",
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
},
{
id: "21",
icon_name: "Cog",
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
},
{
id: "22",
icon_name: "User",
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
},
{
id: "23",
icon_name: "Heart",
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
},
{
id: "24",
icon_name: "Filter",
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
},
{
id: "25",
icon_name: "Add",
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
},
{
id: "26",
icon_name: "Minus",
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
},
{
id: "27",
icon_name: "Remove",
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
},
{
id: "28",
icon_name: "Email",
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
},
{
id: "29",
icon_name: "Battery",
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
},
{
id: "30",
icon_name: "Battery - Empty",
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
},
{
id: "31",
icon_name: "Battery - Half",
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
},
{
id: "32",
icon_name: "Battery - Full",
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
},
{
id: "33",
icon_name: "Dashboard",
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
},
{
id: "34",
icon_name: "External",
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
},
{
id: "35",
icon_name: "Send",
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
},
{
id: "36",
icon_name: "Favourite",
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
},
{
id: "37",
icon_name: "News",
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
},
{
id: "38",
icon_name: "Copy",
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
},
{
id: "39",
icon_name: "Duplicate",
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
},
{
id: "40",
icon_name: "3D",
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
},
];
function loadIcons() {
return {
search: "",
myForData: sourceData,
get filteredIcons() {
if (this.search === "") {
return this.myForData;
}
return this.myForData.filter((item) => {
return item.icon_keywords
.toLowerCase()
.includes(this.search.toLowerCase());
});
},
};
}
</script>
</body>
</html>
Reference in a new issue View git blame Copy permalink