2020-05-25 12:01:32 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<title>Tailwind Starter Template</title>
|
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
<meta
|
|
|
|
|
name="viewport"
|
|
|
|
|
content="width=device-width, initial-scale=1, shrink-to-fit=no"
|
|
|
|
|
/>
|
2020-05-25 15:07:46 +02:00
|
|
|
<link
|
|
|
|
|
href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap"
|
|
|
|
|
rel="stylesheet"
|
|
|
|
|
/>
|
2020-05-25 12:44:09 +02:00
|
|
|
<script
|
|
|
|
|
src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.3.5/dist/alpine.min.js"
|
|
|
|
|
defer
|
|
|
|
|
></script>
|
2020-05-25 12:01:32 +02:00
|
|
|
</head>
|
2020-05-25 15:07:46 +02:00
|
|
|
<body
|
|
|
|
|
class="bg-gray-100 font-mono leading-normal tracking-normal"
|
|
|
|
|
x-data="loadIcons()"
|
|
|
|
|
>
|
|
|
|
|
<input
|
|
|
|
|
onFocus="this.select()"
|
|
|
|
|
autofocus="autofocus"
|
|
|
|
|
x-ref="searchField"
|
|
|
|
|
x-model="search"
|
|
|
|
|
x-on:keydown.window.prevent.slash="$refs.searchField.focus()"
|
|
|
|
|
placeholder="Search System UIcons"
|
|
|
|
|
type="text"
|
|
|
|
|
autocapitalize="off"
|
|
|
|
|
autocomplete="off"
|
|
|
|
|
autocorrect="off"
|
|
|
|
|
spellcheck="false"
|
|
|
|
|
class="flex flex-1 p-4 w-full 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="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
|
|
|
|
|
class="flex flex-col items-center justify-center text-gray-500 rounded shadow border border-transparent hover:shadow-xl bg-white cursor-pointer transition duration-150 ease-in-out transform p-10 h-48"
|
|
|
|
|
>
|
|
|
|
|
<svg
|
|
|
|
|
height="21"
|
|
|
|
|
viewBox="0 0 21 21"
|
|
|
|
|
width="21"
|
|
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
2020-05-25 12:44:09 +02:00
|
|
|
>
|
2020-05-25 15:07:46 +02:00
|
|
|
<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>
|
2020-05-25 12:01:32 +02:00
|
|
|
</div>
|
2020-05-25 12:44:09 +02:00
|
|
|
<script>
|
|
|
|
|
var sourceData = [
|
|
|
|
|
{
|
|
|
|
|
id: "1",
|
2020-05-25 15:07:46 +02:00
|
|
|
icon_name: "Cog",
|
2020-05-25 12:44:09 +02:00
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "2",
|
2020-05-25 15:07:46 +02:00
|
|
|
icon_name: "User",
|
2020-05-25 12:44:09 +02:00
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "3",
|
2020-05-25 15:07:46 +02:00
|
|
|
icon_name: "Heart",
|
2020-05-25 12:44:09 +02:00
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "4",
|
2020-05-25 15:07:46 +02:00
|
|
|
icon_name: "Filter",
|
2020-05-25 12:44:09 +02:00
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "5",
|
2020-05-25 15:07:46 +02:00
|
|
|
icon_name: "Add",
|
2020-05-25 12:44:09 +02:00
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "6",
|
2020-05-25 15:07:46 +02:00
|
|
|
icon_name: "Minus",
|
2020-05-25 12:44:09 +02:00
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "7",
|
2020-05-25 15:07:46 +02:00
|
|
|
icon_name: "Remove",
|
2020-05-25 12:44:09 +02:00
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "8",
|
2020-05-25 15:07:46 +02:00
|
|
|
icon_name: "Email",
|
2020-05-25 12:44:09 +02:00
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "9",
|
2020-05-25 15:07:46 +02:00
|
|
|
icon_name: "Battery",
|
2020-05-25 12:44:09 +02:00
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "10",
|
2020-05-25 15:07:46 +02:00
|
|
|
icon_name: "Battery - Empty",
|
2020-05-25 12:44:09 +02:00
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "11",
|
2020-05-25 15:07:46 +02:00
|
|
|
icon_name: "Battery - Half",
|
2020-05-25 12:44:09 +02:00
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "12",
|
2020-05-25 15:07:46 +02:00
|
|
|
icon_name: "Battery - Full",
|
2020-05-25 12:44:09 +02:00
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "13",
|
2020-05-25 15:07:46 +02:00
|
|
|
icon_name: "Dashboard",
|
2020-05-25 12:44:09 +02:00
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "14",
|
2020-05-25 15:07:46 +02:00
|
|
|
icon_name: "External",
|
2020-05-25 12:44:09 +02:00
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "15",
|
2020-05-25 15:07:46 +02:00
|
|
|
icon_name: "Send",
|
2020-05-25 12:44:09 +02:00
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "16",
|
2020-05-25 15:07:46 +02:00
|
|
|
icon_name: "Favourite",
|
2020-05-25 12:44:09 +02:00
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "17",
|
2020-05-25 15:07:46 +02:00
|
|
|
icon_name: "News",
|
2020-05-25 12:44:09 +02:00
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "18",
|
2020-05-25 15:07:46 +02:00
|
|
|
icon_name: "Copy",
|
2020-05-25 12:44:09 +02:00
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "19",
|
2020-05-25 15:07:46 +02:00
|
|
|
icon_name: "Duplicate",
|
2020-05-25 12:44:09 +02:00
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "20",
|
2020-05-25 15:07:46 +02:00
|
|
|
icon_name: "3D",
|
2020-05-25 12:44:09 +02:00
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "21",
|
2020-05-25 15:07:46 +02:00
|
|
|
icon_name: "Cog",
|
2020-05-25 12:44:09 +02:00
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "22",
|
2020-05-25 15:07:46 +02:00
|
|
|
icon_name: "User",
|
2020-05-25 12:44:09 +02:00
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "23",
|
2020-05-25 15:07:46 +02:00
|
|
|
icon_name: "Heart",
|
2020-05-25 12:44:09 +02:00
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "24",
|
2020-05-25 15:07:46 +02:00
|
|
|
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",
|
2020-05-25 12:44:09 +02:00
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
|
2020-05-25 15:07:46 +02:00
|
|
|
function loadIcons() {
|
2020-05-25 12:44:09 +02:00
|
|
|
return {
|
|
|
|
|
search: "",
|
|
|
|
|
myForData: sourceData,
|
2020-05-25 15:07:46 +02:00
|
|
|
get filteredIcons() {
|
2020-05-25 12:44:09 +02:00
|
|
|
if (this.search === "") {
|
|
|
|
|
return this.myForData;
|
|
|
|
|
}
|
|
|
|
|
return this.myForData.filter((item) => {
|
2020-05-25 15:07:46 +02:00
|
|
|
return item.icon_name
|
2020-05-25 12:44:09 +02:00
|
|
|
.toLowerCase()
|
|
|
|
|
.includes(this.search.toLowerCase());
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
</script>
|
2020-05-25 12:01:32 +02:00
|
|
|
</body>
|
|
|
|
|
</html>
|
