deblan-mirror/system-uicons
1
0
Fork 0
mirror of https://github.com/CoreyGinnivan/system-uicons.git synced 2024-05-02 13:52:45 +02:00
Code Issues Releases Wiki Activity
system-uicons/src/index.html
Corey 95c663937e Changed wording for button
2020-05-26 15:10:53 +08:00

262 lines
7.8 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 min-h-screen"
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>
<div
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"
>
<label
class="inline-flex items-center cursor-pointer rounded px-2 text-sm lg:text-base hover:bg-gray-900 hover:text-white"
>
<input
type="radio"
class="form-radio"
name="clickType"
value="copy"
checked
/>
<span class="ml-2">Copy SVG Code</span>
</label>
<label
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"
>
<input type="radio" class="form-radio" name="clickType" value="link" />
<span class="ml-2">Copy Source Link</span>
</label>
<label
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"
>
<input
type="radio"
class="form-radio"
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 text-sm lg:text-base 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
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, index) in filteredIcons" :key="index">
<a
href="#"
class="flex flex-col items-center group justify-center text-gray-700 rounded shadow hover:shadow-xl bg-white cursor-pointer transition duration-150 ease-in-out h-48"
>
<img
:src="`images/` + item.icon_path + `.svg`"
:alt="item.icon_name"
class="transform transition duration-200 group-hover:scale-150"
/>
<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="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"
>
<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>
var sourceData = [
{
icon_name: "Create",
icon_path: "create",
icon_keywords: "create",
},
{
icon_name: "Write",
icon_path: "write",
icon_keywords: "write, writing, new, create, note, taking, paper",
},
{
icon_name: "Tag",
icon_path: "tag",
icon_keywords: "tag",
},
{
icon_name: "Tags",
icon_path: "tags",
icon_keywords: "tags",
},
{
icon_name: "Speech Bubble",
icon_path: "speech_bubble",
icon_keywords: "speech bubble, chat",
},
{
icon_name: "Speech Bubble (Writing)",
icon_path: "speech_typing",
icon_keywords: "speech bubble, chat, speak, typing, writing, waiting",
},
{
icon_name: "Paperclip",
icon_path: "paperclip",
icon_keywords: "paperclip, attachment, link",
},
{
icon_name: "Phone (portrait)",
icon_path: "phone_portrait",
icon_keywords: "phone portrait mobile talk",
},
{
icon_name: "Phone (landscape)",
icon_path: "phone_landscape",
icon_keywords: "phone landscape mobile talk",
},
{
icon_name: "Calendar",
icon_path: "calendar",
icon_keywords: "calendar",
},
{
icon_name: "Calendar (Day)",
icon_path: "calendar_day",
icon_keywords: "calendar day",
},
{
icon_name: "Calendar (Days)",
icon_path: "calendar_days",
icon_keywords: "calendar days",
},
{
icon_name: "Calendar (Date)",
icon_path: "calendar_date",
icon_keywords: "calendar date",
},
{
icon_name: "Calendar (End)",
icon_path: "calendar_last_day",
icon_keywords: "calendar day month end last final year",
},
{
icon_name: "Calendar (Week)",
icon_path: "calendar_week",
icon_keywords: "calendar week days",
},
{
icon_name: "Calendar (Month)",
icon_path: "calendar_month",
icon_keywords: "calendar month week",
},
{
icon_name: "Calendar (Split)",
icon_path: "calendar_split",
icon_keywords: "calendar split",
},
{
icon_name: "Calendar (Add)",
icon_path: "calendar_add",
icon_keywords: "calendar add",
},
{
icon_name: "Calendar (Remove)",
icon_path: "calendar_remove",
icon_keywords: "calendar remove delete cancel",
},
{
icon_name: "Calendar (Move)",
icon_path: "calendar_move",
icon_keywords: "calendar move",
},
];
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