deblan-mirror/system-uicons
1
0
Fork 0
mirror of https://github.com/CoreyGinnivan/system-uicons.git synced 2024-06-16 20:55:00 +02:00
Code Issues Releases Wiki Activity

Cleaned up design

Browse source
This commit is contained in:
Corey 2020-05-25 21:59:48 +08:00
parent 8c924aa09b
commit 030e1c445d
3 changed files with 80 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
package-lock.json generated
View file

@ -106,6 +106,17 @@
} }
} }
}, },
"@tailwindcss/custom-forms": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/@tailwindcss/custom-forms/-/custom-forms-0.2.1.tgz",
"integrity": "sha512-XdP5XY6kxo3x5o50mWUyoYWxOPV16baagLoZ5uM41gh6IhXzhz/vJYzqrTb/lN58maGIKlpkxgVsQUNSsbAS3Q==",
"dev": true,
"requires": {
"lodash": "^4.17.11",
"mini-svg-data-uri": "^1.0.3",
"traverse": "^0.6.6"
}
},
"@types/color-name": { "@types/color-name": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz", "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
@ -3929,6 +3940,12 @@
"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==", "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
"dev": true "dev": true
}, },
"mini-svg-data-uri": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.2.3.tgz",
"integrity": "sha512-zd6KCAyXgmq6FV1mR10oKXYtvmA9vRoB6xPSTUJTbFApCtkefDnYueVR1gkof3KcdLZo1Y8mjF2DFmQMIxsHNQ==",
"dev": true
},
"minimalistic-assert": { "minimalistic-assert": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz", "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@ -7657,6 +7674,12 @@
"integrity": "sha1-LmhELZ9k7HILjMieZEOsbKqVACk=", "integrity": "sha1-LmhELZ9k7HILjMieZEOsbKqVACk=",
"dev": true "dev": true
}, },
"traverse": {
"version": "0.6.6",
"resolved": "https://registry.npmjs.org/traverse/-/traverse-0.6.6.tgz",
"integrity": "sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc=",
"dev": true
},
"tslib": { "tslib": {
"version": "1.13.0", "version": "1.13.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz", "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",

1
package.json
View file

@ -5,6 +5,7 @@
"prod": "cross-env NODE_ENV=production webpack --no-progress" "prod": "cross-env NODE_ENV=production webpack --no-progress"
}, },
"devDependencies": { "devDependencies": {
"@tailwindcss/custom-forms": "^0.2.1",
"copy-webpack-plugin": "^5.0.2", "copy-webpack-plugin": "^5.0.2",
"cross-env": "^5.1", "cross-env": "^5.1",
"css-loader": "^0.28.10", "css-loader": "^0.28.10",

72
src/index.html
View file

@ -17,29 +17,60 @@
></script> ></script>
</head> </head>
<body <body
class="bg-gray-100 font-mono leading-normal tracking-normal" class="bg-white font-mono leading-normal tracking-normal"
x-data="loadIcons()" x-data="loadIcons()"
> >
<input <div class="bg-white px-8 py-4">
onFocus="this.select()" <input
autofocus="autofocus" onFocus="this.select()"
x-ref="searchField" autofocus="autofocus"
x-model="search" x-ref="searchField"
x-on:keydown.window.prevent.slash="$refs.searchField.focus()" x-model="search"
placeholder="Search System UIcons" x-on:keydown.window.prevent.slash="$refs.searchField.focus()"
type="text" placeholder="Search 420 System UIcons"
autocapitalize="off" type="text"
autocomplete="off" autocapitalize="off"
autocorrect="off" autocomplete="off"
spellcheck="false" autocorrect="off"
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" 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-row items-center border-t border-gray-300 bg-white pt-4"
>
<label class="inline-flex items-center">
<input
type="radio"
class="form-radio text-green-600 focus:outline-none"
name="clickType"
value="copy"
checked
/>
<span class="ml-2">Copy SVG Code</span>
</label>
<label class="inline-flex items-center ml-6">
<input
type="radio"
class="form-radio text-green-600 focus:outline-none"
name="clickType"
value="download"
/>
<span class="ml-2">Download SVGs</span>
</label>
<button
class="ml-auto p-3 rounded bg-black text-white hover:bg-gray-900"
>
Download All SVGs
</button>
</div>
</div>
<div <div
class="p-8 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-7 gap-4" 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"> <template x-for="item in filteredIcons" :key="item">
<a <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" href="#"
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 h-48"
> >
<svg <svg
height="21" height="21"
@ -78,6 +109,15 @@
</a> </a>
</template> </template>
</div> </div>
<footer class="p-8 border-t border-gray-300 text-gray-600">
Project by
<a
href="https://twitter.com/CoreyGinnivan"
target="_blank"
class="text-black"
>Corey Ginnivan</a
>
</footer>
<script> <script>
var sourceData = [ var sourceData = [
{ {