deblan-mirror/system-uicons
1
0
Fork 0
mirror of https://github.com/CoreyGinnivan/system-uicons.git synced 2024-05-04 14:43:12 +02:00
Code Issues Releases Wiki Activity
system-uicons/src/index.html

391 lines
11 KiB
HTML
Raw Normal View History

Added eleventy + tailwind boilerplate
2020-05-25 12:01:32 +02:00
<!DOCTYPE html>
<html lang="en">
<head>
Cleaned up link, updated title
2020-05-25 16:10:26 +02:00
<title>System UIcons</title>
Added eleventy + tailwind boilerplate
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"
/>
Updated design
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"
/>
Setup basic Alpine filtering
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>
Added eleventy + tailwind boilerplate
2020-05-25 12:01:32 +02:00
</head>
Updated design
2020-05-25 15:07:46 +02:00
<body
Cleaned up design
2020-05-25 15:59:48 +02:00
class="bg-white font-mono leading-normal tracking-normal"
Updated design
2020-05-25 15:07:46 +02:00
x-data="loadIcons()"
>
Cleaned up design
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"
Added extra form elements
2020-05-25 16:32:37 +02:00
name="search"
value=""
Cleaned up design
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"
/>
<div
Added keywords, added link button
2020-05-26 04:50:53 +02:00
class="flex flex-col space-y-4 md:space-y-0 md:flex-row border-t border-gray-300 bg-white pt-4"
Cleaned up design
2020-05-25 15:59:48 +02:00
>
<label class="inline-flex items-center">
<input
type="radio"
Added icon, removed custom forms
2020-05-26 03:33:49 +02:00
class="form-radio text-green-600"
Cleaned up design
2020-05-25 15:59:48 +02:00
name="clickType"
value="copy"
checked
/>
<span class="ml-2">Copy SVG Code</span>
</label>
Added keywords, added link button
2020-05-26 04:50:53 +02:00
<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">
Cleaned up design
2020-05-25 15:59:48 +02:00
<input
type="radio"
Added icon, removed custom forms
2020-05-26 03:33:49 +02:00
class="form-radio text-green-600"
Cleaned up design
2020-05-25 15:59:48 +02:00
name="clickType"
value="download"
/>
<span class="ml-2">Download SVGs</span>
</label>
<button
Added keywords, added link button
2020-05-26 04:50:53 +02:00
class="flex flex-row items-center ml-auto p-3 rounded bg-black text-white hover:bg-gray-900 w-full md:w-auto"
Cleaned up design
2020-05-25 15:59:48 +02:00
>
Added icon, removed custom forms
2020-05-26 03:33:49 +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)"
>
<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>
Cleaned up design
2020-05-25 15:59:48 +02:00
Download All SVGs
</button>
</div>
</div>
Updated design
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
Cleaned up design
2020-05-25 15:59:48 +02:00
href="#"
Updated text colour
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"
Updated design
2020-05-25 15:07:46 +02:00
>
<p
class="text-xs leading-none text-center mt-8"
x-text="item.icon_name"
></p>
Added keywords, added link button
2020-05-26 04:50:53 +02:00
<span class="hidden" x-text="item.icon_keywords"></span>
Updated design
2020-05-25 15:07:46 +02:00
</a>
</template>
Added eleventy + tailwind boilerplate
2020-05-25 12:01:32 +02:00
</div>
Tidied up footer
2020-05-25 16:34:08 +02:00
<footer class="py-8 mx-8 border-t border-gray-300 text-gray-600">
Cleaned up design
2020-05-25 15:59:48 +02:00
Project by
<a
href="https://twitter.com/CoreyGinnivan"
Cleaned up link, updated title
2020-05-25 16:10:26 +02:00
rel="noreferrer"
Cleaned up design
2020-05-25 15:59:48 +02:00
target="_blank"
Tidied up footer
2020-05-25 16:34:08 +02:00
class="text-black hover:underline"
Cleaned up design
2020-05-25 15:59:48 +02:00
>Corey Ginnivan</a
>
</footer>
Setup basic Alpine filtering
2020-05-25 12:44:09 +02:00
<script>
var sourceData = [
{
id: "1",
Updated design
2020-05-25 15:07:46 +02:00
icon_name: "Cog",
Added keywords, added link button
2020-05-26 04:50:53 +02:00
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "cog, settings",
Setup basic Alpine filtering
2020-05-25 12:44:09 +02:00
},
{
id: "2",
Updated design
2020-05-25 15:07:46 +02:00
icon_name: "User",
Added keywords, added link button
2020-05-26 04:50:53 +02:00
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "user, people, person, avatar",
Setup basic Alpine filtering
2020-05-25 12:44:09 +02:00
},
{
id: "3",
Updated design
2020-05-25 15:07:46 +02:00
icon_name: "Heart",
Added keywords, added link button
2020-05-26 04:50:53 +02:00
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "heart, love, beating",
Setup basic Alpine filtering
2020-05-25 12:44:09 +02:00
},
{
id: "4",
Updated design
2020-05-25 15:07:46 +02:00
icon_name: "Filter",
Added keywords, added link button
2020-05-26 04:50:53 +02:00
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "filter, filtering",
Setup basic Alpine filtering
2020-05-25 12:44:09 +02:00
},
{
id: "5",
Updated design
2020-05-25 15:07:46 +02:00
icon_name: "Add",
Added keywords, added link button
2020-05-26 04:50:53 +02:00
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "add, plus",
Setup basic Alpine filtering
2020-05-25 12:44:09 +02:00
},
{
id: "6",
Updated design
2020-05-25 15:07:46 +02:00
icon_name: "Minus",
Added keywords, added link button
2020-05-26 04:50:53 +02:00
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "minus, negative",
Setup basic Alpine filtering
2020-05-25 12:44:09 +02:00
},
{
id: "7",
Updated design
2020-05-25 15:07:46 +02:00
icon_name: "Remove",
Added keywords, added link button
2020-05-26 04:50:53 +02:00
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
Setup basic Alpine filtering
2020-05-25 12:44:09 +02:00
},
{
id: "8",
Updated design
2020-05-25 15:07:46 +02:00
icon_name: "Email",
Added keywords, added link button
2020-05-26 04:50:53 +02:00
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
Setup basic Alpine filtering
2020-05-25 12:44:09 +02:00
},
{
id: "9",
Updated design
2020-05-25 15:07:46 +02:00
icon_name: "Battery",
Added keywords, added link button
2020-05-26 04:50:53 +02:00
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
Setup basic Alpine filtering
2020-05-25 12:44:09 +02:00
},
{
id: "10",
Updated design
2020-05-25 15:07:46 +02:00
icon_name: "Battery - Empty",
Added keywords, added link button
2020-05-26 04:50:53 +02:00
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
Setup basic Alpine filtering
2020-05-25 12:44:09 +02:00
},
{
id: "11",
Updated design
2020-05-25 15:07:46 +02:00
icon_name: "Battery - Half",
Added keywords, added link button
2020-05-26 04:50:53 +02:00
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
Setup basic Alpine filtering
2020-05-25 12:44:09 +02:00
},
{
id: "12",
Updated design
2020-05-25 15:07:46 +02:00
icon_name: "Battery - Full",
Added keywords, added link button
2020-05-26 04:50:53 +02:00
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
Setup basic Alpine filtering
2020-05-25 12:44:09 +02:00
},
{
id: "13",
Updated design
2020-05-25 15:07:46 +02:00
icon_name: "Dashboard",
Added keywords, added link button
2020-05-26 04:50:53 +02:00
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
Setup basic Alpine filtering
2020-05-25 12:44:09 +02:00
},
{
id: "14",
Updated design
2020-05-25 15:07:46 +02:00
icon_name: "External",
Added keywords, added link button
2020-05-26 04:50:53 +02:00
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
Setup basic Alpine filtering
2020-05-25 12:44:09 +02:00
},
{
id: "15",
Updated design
2020-05-25 15:07:46 +02:00
icon_name: "Send",
Added keywords, added link button
2020-05-26 04:50:53 +02:00
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
Setup basic Alpine filtering
2020-05-25 12:44:09 +02:00
},
{
id: "16",
Updated design
2020-05-25 15:07:46 +02:00
icon_name: "Favourite",
Added keywords, added link button
2020-05-26 04:50:53 +02:00
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
Setup basic Alpine filtering
2020-05-25 12:44:09 +02:00
},
{
id: "17",
Updated design
2020-05-25 15:07:46 +02:00
icon_name: "News",
Added keywords, added link button
2020-05-26 04:50:53 +02:00
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
Setup basic Alpine filtering
2020-05-25 12:44:09 +02:00
},
{
id: "18",
Updated design
2020-05-25 15:07:46 +02:00
icon_name: "Copy",
Added keywords, added link button
2020-05-26 04:50:53 +02:00
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
Setup basic Alpine filtering
2020-05-25 12:44:09 +02:00
},
{
id: "19",
Updated design
2020-05-25 15:07:46 +02:00
icon_name: "Duplicate",
Added keywords, added link button
2020-05-26 04:50:53 +02:00
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
Setup basic Alpine filtering
2020-05-25 12:44:09 +02:00
},
{
id: "20",
Updated design
2020-05-25 15:07:46 +02:00
icon_name: "3D",
Added keywords, added link button
2020-05-26 04:50:53 +02:00
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
Setup basic Alpine filtering
2020-05-25 12:44:09 +02:00
},
{
id: "21",
Updated design
2020-05-25 15:07:46 +02:00
icon_name: "Cog",
Added keywords, added link button
2020-05-26 04:50:53 +02:00
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
Setup basic Alpine filtering
2020-05-25 12:44:09 +02:00
},
{
id: "22",
Updated design
2020-05-25 15:07:46 +02:00
icon_name: "User",
Added keywords, added link button
2020-05-26 04:50:53 +02:00
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
Setup basic Alpine filtering
2020-05-25 12:44:09 +02:00
},
{
id: "23",
Updated design
2020-05-25 15:07:46 +02:00
icon_name: "Heart",
Added keywords, added link button
2020-05-26 04:50:53 +02:00
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
Setup basic Alpine filtering
2020-05-25 12:44:09 +02:00
},
{
id: "24",
Updated design
2020-05-25 15:07:46 +02:00
icon_name: "Filter",
Added keywords, added link button
2020-05-26 04:50:53 +02:00
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
Updated design
2020-05-25 15:07:46 +02:00
},
{
id: "25",
icon_name: "Add",
Added keywords, added link button
2020-05-26 04:50:53 +02:00
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
Updated design
2020-05-25 15:07:46 +02:00
},
{
id: "26",
icon_name: "Minus",
Added keywords, added link button
2020-05-26 04:50:53 +02:00
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
Updated design
2020-05-25 15:07:46 +02:00
},
{
id: "27",
icon_name: "Remove",
Added keywords, added link button
2020-05-26 04:50:53 +02:00
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
Updated design
2020-05-25 15:07:46 +02:00
},
{
id: "28",
icon_name: "Email",
Added keywords, added link button
2020-05-26 04:50:53 +02:00
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
Updated design
2020-05-25 15:07:46 +02:00
},
{
id: "29",
icon_name: "Battery",
Added keywords, added link button
2020-05-26 04:50:53 +02:00
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
Updated design
2020-05-25 15:07:46 +02:00
},
{
id: "30",
icon_name: "Battery - Empty",
Added keywords, added link button
2020-05-26 04:50:53 +02:00
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
Updated design
2020-05-25 15:07:46 +02:00
},
{
id: "31",
icon_name: "Battery - Half",
Added keywords, added link button
2020-05-26 04:50:53 +02:00
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
Updated design
2020-05-25 15:07:46 +02:00
},
{
id: "32",
icon_name: "Battery - Full",
Added keywords, added link button
2020-05-26 04:50:53 +02:00
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
Updated design
2020-05-25 15:07:46 +02:00
},
{
id: "33",
icon_name: "Dashboard",
Added keywords, added link button
2020-05-26 04:50:53 +02:00
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
Updated design
2020-05-25 15:07:46 +02:00
},
{
id: "34",
icon_name: "External",
Added keywords, added link button
2020-05-26 04:50:53 +02:00
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
Updated design
2020-05-25 15:07:46 +02:00
},
{
id: "35",
icon_name: "Send",
Added keywords, added link button
2020-05-26 04:50:53 +02:00
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
Updated design
2020-05-25 15:07:46 +02:00
},
{
id: "36",
icon_name: "Favourite",
Added keywords, added link button
2020-05-26 04:50:53 +02:00
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
Updated design
2020-05-25 15:07:46 +02:00
},
{
id: "37",
icon_name: "News",
Added keywords, added link button
2020-05-26 04:50:53 +02:00
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
Updated design
2020-05-25 15:07:46 +02:00
},
{
id: "38",
icon_name: "Copy",
Added keywords, added link button
2020-05-26 04:50:53 +02:00
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
Updated design
2020-05-25 15:07:46 +02:00
},
{
id: "39",
icon_name: "Duplicate",
Added keywords, added link button
2020-05-26 04:50:53 +02:00
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
Updated design
2020-05-25 15:07:46 +02:00
},
{
id: "40",
icon_name: "3D",
Added keywords, added link button
2020-05-26 04:50:53 +02:00
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
icon_keywords: "copy",
Setup basic Alpine filtering
2020-05-25 12:44:09 +02:00
},
];
Updated design
2020-05-25 15:07:46 +02:00
function loadIcons() {
Setup basic Alpine filtering
2020-05-25 12:44:09 +02:00
return {
search: "",
myForData: sourceData,
Updated design
2020-05-25 15:07:46 +02:00
get filteredIcons() {
Setup basic Alpine filtering
2020-05-25 12:44:09 +02:00
if (this.search === "") {
return this.myForData;
}
return this.myForData.filter((item) => {
Added keywords, added link button
2020-05-26 04:50:53 +02:00
return item.icon_keywords
Setup basic Alpine filtering
2020-05-25 12:44:09 +02:00
.toLowerCase()
.includes(this.search.toLowerCase());
});
},
};
}
</script>
Added eleventy + tailwind boilerplate
2020-05-25 12:01:32 +02:00
</body>
</html>
Reference in a new issue Copy permalink