2020-05-25 12:01:32 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
<html lang="en">
|
|
|
|
<head>
|
2020-05-25 16:10:26 +02:00
|
|
|
<title>System UIcons</title>
|
2020-05-25 12:01:32 +02:00
|
|
|
<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
|
2020-05-26 05:08:23 +02:00
|
|
|
class="bg-white font-mono leading-normal tracking-normal min-h-screen"
|
2020-05-25 15:07:46 +02:00
|
|
|
x-data="loadIcons()"
|
|
|
|
>
|
2020-05-25 15:59:48 +02:00
|
|
|
<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"
|
2020-05-25 16:32:37 +02:00
|
|
|
name="search"
|
|
|
|
value=""
|
2020-05-25 15:59:48 +02:00
|
|
|
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"
|
|
|
|
/>
|
2020-05-26 05:19:31 +02:00
|
|
|
</div>
|
|
|
|
<div
|
2020-05-26 05:20:07 +02:00
|
|
|
class="flex flex-col space-y-4 md:space-y-0 md:flex-row border-t border-gray-300 bg-white py-4 px-8 sticky top-0"
|
2020-05-26 05:19:31 +02:00
|
|
|
>
|
|
|
|
<label
|
2020-05-26 07:57:43 +02:00
|
|
|
class="inline-flex items-center cursor-pointer rounded px-2 text-sm lg:text-base hover:bg-gray-900 hover:text-white"
|
2020-05-25 15:59:48 +02:00
|
|
|
>
|
2020-05-26 05:19:31 +02:00
|
|
|
<input
|
|
|
|
type="radio"
|
|
|
|
class="form-radio"
|
|
|
|
name="clickType"
|
|
|
|
value="copy"
|
|
|
|
checked
|
|
|
|
/>
|
|
|
|
<span class="ml-2">Copy SVG Code</span>
|
|
|
|
</label>
|
|
|
|
<label
|
2020-05-26 07:57:43 +02:00
|
|
|
class="inline-flex items-center md:ml-6 cursor-pointer rounded px-2 text-sm lg:text-base hover:bg-gray-900 hover:text-white"
|
2020-05-26 05:19:31 +02:00
|
|
|
>
|
|
|
|
<input type="radio" class="form-radio" name="clickType" value="link" />
|
|
|
|
<span class="ml-2"><img/> Link</span>
|
|
|
|
</label>
|
|
|
|
<label
|
2020-05-26 07:57:43 +02:00
|
|
|
class="inline-flex items-center md:ml-6 cursor-pointer rounded px-2 text-sm lg:text-base hover:bg-gray-900 hover:text-white"
|
2020-05-26 05:19:31 +02:00
|
|
|
>
|
|
|
|
<input
|
|
|
|
type="radio"
|
|
|
|
class="form-radio"
|
|
|
|
name="clickType"
|
|
|
|
value="download"
|
|
|
|
/>
|
|
|
|
<span class="ml-2">Download SVGs</span>
|
|
|
|
</label>
|
|
|
|
<button
|
2020-05-26 07:57:43 +02:00
|
|
|
class="flex flex-row items-center ml-auto p-3 rounded bg-black text-white text-sm lg:text-base hover:bg-gray-900 w-full md:w-auto"
|
2020-05-26 05:19:31 +02:00
|
|
|
>
|
|
|
|
<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)"
|
2020-05-26 03:33:49 +02:00
|
|
|
>
|
2020-05-26 05:19:31 +02:00
|
|
|
<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>
|
2020-05-25 15:59:48 +02:00
|
|
|
</div>
|
2020-05-25 15:07:46 +02:00
|
|
|
<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
|
2020-05-25 15:59:48 +02:00
|
|
|
href="#"
|
2020-05-25 16:39:19 +02:00
|
|
|
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"
|
2020-05-25 15:07:46 +02:00
|
|
|
>
|
2020-05-26 07:43:42 +02:00
|
|
|
<img
|
|
|
|
:src="`images/` + item.icon_path + `.svg`"
|
|
|
|
:alt="item.icon_name"
|
|
|
|
/>
|
2020-05-25 15:07:46 +02:00
|
|
|
<p
|
|
|
|
class="text-xs leading-none text-center mt-8"
|
|
|
|
x-text="item.icon_name"
|
|
|
|
></p>
|
2020-05-26 04:50:53 +02:00
|
|
|
<span class="hidden" x-text="item.icon_keywords"></span>
|
2020-05-25 15:07:46 +02:00
|
|
|
</a>
|
|
|
|
</template>
|
2020-05-25 12:01:32 +02:00
|
|
|
</div>
|
2020-05-26 07:03:29 +02:00
|
|
|
<footer
|
2020-05-26 07:48:29 +02:00
|
|
|
class="flex flex-col space-y-4 md:space-y-0 md:flex-row py-8 mx-8 border-t border-gray-300 text-gray-700"
|
2020-05-26 07:03:29 +02:00
|
|
|
>
|
2020-05-26 07:48:29 +02:00
|
|
|
<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>
|
2020-05-25 15:59:48 +02:00
|
|
|
</footer>
|
2020-05-25 12:44:09 +02:00
|
|
|
<script>
|
|
|
|
var sourceData = [
|
|
|
|
{
|
2020-05-26 07:43:42 +02:00
|
|
|
icon_name: "Create",
|
|
|
|
icon_path: "create",
|
|
|
|
icon_keywords: "create",
|
2020-05-25 12:44:09 +02:00
|
|
|
},
|
|
|
|
{
|
2020-05-26 07:43:42 +02:00
|
|
|
icon_name: "Write",
|
|
|
|
icon_path: "write",
|
|
|
|
icon_keywords: "write",
|
2020-05-25 12:44:09 +02:00
|
|
|
},
|
|
|
|
{
|
2020-05-26 07:43:42 +02:00
|
|
|
icon_name: "Tag",
|
|
|
|
icon_path: "tag",
|
|
|
|
icon_keywords: "tag",
|
2020-05-25 12:44:09 +02:00
|
|
|
},
|
|
|
|
{
|
2020-05-26 07:43:42 +02:00
|
|
|
icon_name: "Tags",
|
|
|
|
icon_path: "tags",
|
|
|
|
icon_keywords: "tags",
|
2020-05-25 12:44:09 +02:00
|
|
|
},
|
|
|
|
{
|
2020-05-26 07:43:42 +02:00
|
|
|
icon_name: "Speech Bubble",
|
|
|
|
icon_path: "speech_bubble",
|
|
|
|
icon_keywords: "speech bubble, chat",
|
2020-05-25 12:44:09 +02:00
|
|
|
},
|
|
|
|
{
|
2020-05-26 07:43:42 +02:00
|
|
|
icon_name: "Speech Bubble (Writing)",
|
|
|
|
icon_path: "speech_typing",
|
|
|
|
icon_keywords: "speech bubble, chat, speak, typing, writing, waiting",
|
2020-05-25 12:44:09 +02:00
|
|
|
},
|
|
|
|
{
|
2020-05-26 07:43:42 +02:00
|
|
|
icon_name: "Paperclip",
|
|
|
|
icon_path: "paperclip",
|
|
|
|
icon_keywords: "paperclip, attachment, link",
|
2020-05-25 12:44:09 +02:00
|
|
|
},
|
|
|
|
{
|
2020-05-26 07:43:42 +02:00
|
|
|
icon_name: "Phone (portrait)",
|
|
|
|
icon_path: "phone_portrait",
|
|
|
|
icon_keywords: "phone portrait mobile talk",
|
2020-05-25 12:44:09 +02:00
|
|
|
},
|
|
|
|
{
|
2020-05-26 07:43:42 +02:00
|
|
|
icon_name: "Phone (landscape)",
|
|
|
|
icon_path: "phone_landscape",
|
|
|
|
icon_keywords: "phone landscape mobile talk",
|
2020-05-25 12:44:09 +02:00
|
|
|
},
|
|
|
|
{
|
2020-05-26 07:43:42 +02:00
|
|
|
icon_name: "Calendar",
|
|
|
|
icon_path: "calendar",
|
|
|
|
icon_keywords: "calendar",
|
2020-05-25 12:44:09 +02:00
|
|
|
},
|
|
|
|
{
|
2020-05-26 07:43:42 +02:00
|
|
|
icon_name: "Calendar (Day)",
|
|
|
|
icon_path: "calendar_day",
|
|
|
|
icon_keywords: "calendar day",
|
2020-05-25 12:44:09 +02:00
|
|
|
},
|
|
|
|
{
|
2020-05-26 07:43:42 +02:00
|
|
|
icon_name: "Calendar (Days)",
|
|
|
|
icon_path: "calendar_days",
|
|
|
|
icon_keywords: "calendar days",
|
2020-05-25 12:44:09 +02:00
|
|
|
},
|
|
|
|
{
|
2020-05-26 07:43:42 +02:00
|
|
|
icon_name: "Calendar (Date)",
|
|
|
|
icon_path: "calendar_date",
|
|
|
|
icon_keywords: "calendar date",
|
2020-05-25 12:44:09 +02:00
|
|
|
},
|
|
|
|
{
|
2020-05-26 07:43:42 +02:00
|
|
|
icon_name: "Calendar (End)",
|
|
|
|
icon_path: "calendar_last_day",
|
|
|
|
icon_keywords: "calendar day month end last final year",
|
2020-05-25 12:44:09 +02:00
|
|
|
},
|
|
|
|
{
|
2020-05-26 07:43:42 +02:00
|
|
|
icon_name: "Calendar (Week)",
|
|
|
|
icon_path: "calendar_week",
|
|
|
|
icon_keywords: "calendar week days",
|
2020-05-25 12:44:09 +02:00
|
|
|
},
|
|
|
|
{
|
2020-05-26 07:43:42 +02:00
|
|
|
icon_name: "Calendar (Month)",
|
|
|
|
icon_path: "calendar_month",
|
|
|
|
icon_keywords: "calendar month week",
|
2020-05-25 12:44:09 +02:00
|
|
|
},
|
|
|
|
{
|
2020-05-26 07:43:42 +02:00
|
|
|
icon_name: "Calendar (Split)",
|
|
|
|
icon_path: "calendar_split",
|
|
|
|
icon_keywords: "calendar split",
|
2020-05-25 12:44:09 +02:00
|
|
|
},
|
|
|
|
{
|
2020-05-26 07:43:42 +02:00
|
|
|
icon_name: "Calendar (Add)",
|
|
|
|
icon_path: "calendar_add",
|
|
|
|
icon_keywords: "calendar add",
|
2020-05-25 12:44:09 +02:00
|
|
|
},
|
|
|
|
{
|
2020-05-26 07:43:42 +02:00
|
|
|
icon_name: "Calendar (Remove)",
|
|
|
|
icon_path: "calendar_remove",
|
|
|
|
icon_keywords: "calendar remove delete cancel",
|
2020-05-25 12:44:09 +02:00
|
|
|
},
|
|
|
|
{
|
2020-05-26 07:43:42 +02:00
|
|
|
icon_name: "Calendar (Move)",
|
|
|
|
icon_path: "calendar_move",
|
|
|
|
icon_keywords: "calendar move",
|
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-26 04:50:53 +02:00
|
|
|
return item.icon_keywords
|
2020-05-25 12:44:09 +02:00
|
|
|
.toLowerCase()
|
|
|
|
.includes(this.search.toLowerCase());
|
|
|
|
});
|
|
|
|
},
|
|
|
|
};
|
|
|
|
}
|
|
|
|
</script>
|
2020-05-25 12:01:32 +02:00
|
|
|
</body>
|
|
|
|
</html>
|