mirror of
https://github.com/CoreyGinnivan/system-uicons.git
synced 2024-05-08 08:26:33 +02:00
Corey
GitHub
commit
f2e73eb17e
|
|
@ -1,3 +1,2 @@
|
||||||
# Ignore all HTML files:
|
# Ignore all HTML files:
|
||||||
*.html
|
*.html
|
||||||
*.js
|
|
||||||
3
.vscode/settings.json
vendored
Normal file
3
.vscode/settings.json
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"editor.formatOnSave": true
|
||||||
|
}
|
||||||
9156
package-lock.json
generated
Normal file
9156
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
35
package.json
35
package.json
|
|
@ -3,29 +3,28 @@
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"zip": "node createZip.js",
|
"zip": "node createZip.js",
|
||||||
"prebuild": "npm run zip",
|
"prebuild": "npm run zip",
|
||||||
"dev": "cross-env NODE_ENV=development webpack-dev-server",
|
"dev": "cross-env NODE_ENV=development webpack serve --open",
|
||||||
"prod": "npm run zip && cross-env NODE_ENV=production webpack --no-progress"
|
"prod": "npm run zip && cross-env NODE_ENV=production webpack"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"copy-webpack-plugin": "^5.0.2",
|
"copy-webpack-plugin": "^10.2.4",
|
||||||
"cross-env": "^5.1",
|
"cross-env": "^7.0",
|
||||||
"css-loader": "^0.28.10",
|
"css-loader": "^6.7.1",
|
||||||
"extract-text-webpack-plugin": "^4.0.0-beta.0",
|
"mini-css-extract-plugin": "^2.6.0",
|
||||||
"glob-all": "^3.1.0",
|
"glob-all": "^3.3.0",
|
||||||
"html-webpack-plugin": "^3.0.6",
|
"html-webpack-plugin": "^5.5.0",
|
||||||
"postcss": "^8.4.13",
|
"postcss": "^8.4.13",
|
||||||
"postcss-loader": "^2.1.1",
|
"postcss-loader": "^6.2.1",
|
||||||
"purgecss-webpack-plugin": "^1.4.0",
|
"style-loader": "^3.3.1",
|
||||||
"style-loader": "^0.20.3",
|
|
||||||
"tailwindcss": "^3.0.24",
|
"tailwindcss": "^3.0.24",
|
||||||
"webpack": "^4.29.6",
|
"webpack": "^5.72.0",
|
||||||
"webpack-cli": "^3.3.0",
|
"webpack-cli": "^4.9.2",
|
||||||
"webpack-dev-server": "^3.2.1"
|
"webpack-dev-server": "^4.9.0"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"alpinejs": "^3.10.2",
|
"alpinejs": "^3.10.2",
|
||||||
"archiver": "^5.0.0",
|
"archiver": "^5.3.1",
|
||||||
"autoprefixer": "^10.4.6",
|
"autoprefixer": "^10.4.7",
|
||||||
"typeface-roboto-mono": "^0.0.75"
|
"typeface-roboto-mono": "^1.1.13"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,3 +1,7 @@
|
||||||
@tailwind base;
|
@tailwind base;
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
background-color: cyan;
|
||||||
|
}
|
||||||
|
|
|
||||||
Binary file not shown.
|
|
@ -38,10 +38,7 @@
|
||||||
property="twitter:image"
|
property="twitter:image"
|
||||||
content="https://systemuicons.com/images/ogp/systemuicons_banner.png"
|
content="https://systemuicons.com/images/ogp/systemuicons_banner.png"
|
||||||
/>
|
/>
|
||||||
<script
|
<script src="//unpkg.com/alpinejs" defer></script>
|
||||||
src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.3.5/dist/alpine.min.js"
|
|
||||||
defer
|
|
||||||
></script>
|
|
||||||
<link rel="icon" type="image/svg+xml" href="/images/favicons/favicon.svg" />
|
<link rel="icon" type="image/svg+xml" href="/images/favicons/favicon.svg" />
|
||||||
<link
|
<link
|
||||||
rel="mask-icon"
|
rel="mask-icon"
|
||||||
|
|
@ -57,7 +54,7 @@
|
||||||
<main class="flex-grow">
|
<main class="flex-grow">
|
||||||
<nav class="flex justify-between p-4 text-sm md:p-6 lg:p-8 md:text-base">
|
<nav class="flex justify-between p-4 text-sm md:p-6 lg:p-8 md:text-base">
|
||||||
<a class="font-extrabold" href="/">System UIcons</a>
|
<a class="font-extrabold" href="/">System UIcons</a>
|
||||||
<div class="space-x-3 md:space-x-8">
|
<div class="flex space-x-3 md:space-x-8">
|
||||||
<!-- <a class="hover:underline" href="/about">Behind the design</a>
|
<!-- <a class="hover:underline" href="/about">Behind the design</a>
|
||||||
<a class="hover:underline" href="/changelog">Changelog</a> -->
|
<a class="hover:underline" href="/changelog">Changelog</a> -->
|
||||||
<a
|
<a
|
||||||
|
|
@ -68,11 +65,16 @@
|
||||||
>GitHub</a
|
>GitHub</a
|
||||||
>
|
>
|
||||||
<a
|
<a
|
||||||
class="hover:underline"
|
class="flex hover:underline"
|
||||||
href="https://github.com/sponsors/CoreyGinnivan"
|
href="https://github.com/sponsors/CoreyGinnivan"
|
||||||
rel="noreferrer"
|
rel="noreferrer"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
>Sponsor</a
|
>
|
||||||
|
<span class="mr-2">
|
||||||
|
<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(1 3)"><path d="m17.5 8.5v3c0 1.2994935-3.1340068 3-7 3-3.86599325 0-7-1.7005065-7-3 0-.4275221 0-1.2608554 0-2.5"/><path d="m3.79385803 9.25873308c.86480173 1.14823502 3.53999333 2.22489962 6.70614197 2.22489962 3.8659932 0 7-1.60524016 7-2.98595204 0-.77476061-.9867994-1.62391104-2.5360034-2.22001882"/><path d="m14.5 3.5v3c0 1.29949353-3.1340068 3-7 3-3.86599325 0-7-1.70050647-7-3 0-.64128315 0-2.35871685 0-3"/><path d="m7.5 6.48363266c3.8659932 0 7-1.60524012 7-2.985952 0-1.38071187-3.1340068-2.99768066-7-2.99768066-3.86599325 0-7 1.61696879-7 2.99768066 0 1.38071188 3.13400675 2.985952 7 2.985952z"/></g></svg>
|
||||||
|
</span>
|
||||||
|
<span class="whitespace-no-wrap">Sponsor</span>
|
||||||
|
</a
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
@ -122,13 +124,15 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="sticky top-0 z-10 flex flex-col px-4 py-4 space-y-2 bg-white border-t border-gray-300 md:space-y-0 md:flex-row md:px-6 lg:px-8"
|
class="sticky top-0 z-50 flex flex-col px-4 py-4 space-y-2 bg-white border-t border-gray-100 md:space-y-0 md:flex-row md:px-6 lg:px-8"
|
||||||
|
:class="{ 'shadow-md duration-100' : showBar }"
|
||||||
|
@scroll.window="showBar = (window.pageYOffset > 450) ? true : false"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="flex flex-col p-1 space-x-0 space-y-1 bg-gray-200 rounded md:flex-row md:space-x-1 md:space-y-0"
|
class="flex flex-col p-1 space-x-0 space-y-1 bg-gray-200 mr-2 rounded md:flex-row md:space-x-1 md:space-y-0"
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
class="inline-flex flex-no-wrap items-center w-full h-full px-2 py-2 text-sm transition duration-200 rounded cursor-pointer lg:text-base hover:bg-gray-100 hover:text-black md:w-auto md:py-0"
|
class="inline-flex flex-no-wrap items-center w-full h-full px-2 py-2 text-sm duration-200 rounded cursor-pointer lg:text-base hover:bg-gray-100 hover:text-black md:w-auto md:py-0"
|
||||||
:class="downloadType === 'copy-svg' ? 'bg-white shadow' : 'text-gray-600'"
|
:class="downloadType === 'copy-svg' ? 'bg-white shadow' : 'text-gray-600'"
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
|
|
@ -166,10 +170,10 @@
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
<span class="whitespace-no-wrap">Copy SVG Code</span>
|
<span class="whitespace-no-wrap">Copy SVG Element</span>
|
||||||
</label>
|
</label>
|
||||||
<label
|
<label
|
||||||
class="inline-flex flex-no-wrap items-center w-full h-full px-2 py-2 text-sm transition duration-200 rounded cursor-pointer lg:text-base hover:bg-gray-100 hover:text-black md:w-auto md:py-0"
|
class="inline-flex flex-no-wrap items-center w-full h-full px-2 py-2 text-sm duration-200 rounded cursor-pointer lg:text-base hover:bg-gray-100 hover:text-black md:w-auto md:py-0"
|
||||||
:class="downloadType === 'copy-cdn' ? 'bg-white shadow' : 'text-gray-600'"
|
:class="downloadType === 'copy-cdn' ? 'bg-white shadow' : 'text-gray-600'"
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
|
|
@ -278,7 +282,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="grid grid-cols-2 gap-2 p-4 md:p-6 lg:p-8 md:grid-cols-3 lg:grid-cols-6 xl:grid-cols-8 md:gap-4"
|
class="grid grid-cols-2 m-4 md:m-6 lg:m-8 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-10 divide-x divide-y divide-gray-200 border-r border-b border-solid border-gray-200"
|
||||||
>
|
>
|
||||||
<template x-for="(item, index) in filteredIcons" :key="index">
|
<template x-for="(item, index) in filteredIcons" :key="index">
|
||||||
<a
|
<a
|
||||||
|
|
@ -290,55 +294,53 @@
|
||||||
item.icon_path +
|
item.icon_path +
|
||||||
`.svg`"
|
`.svg`"
|
||||||
x-bind:download="downloadType === 'download-svg' && item.icon_name"
|
x-bind:download="downloadType === 'download-svg' && item.icon_name"
|
||||||
class="relative flex flex-col items-center justify-center h-32 p-2 text-gray-700 transition duration-150 ease-in-out bg-white rounded shadow cursor-pointer group hover:shadow-xl md:h-40"
|
class="relative flex flex-col items-center justify-center h-32 p-2 text-gray-700 duration-150 ease-in-out bg-white cursor-pointer group hover:z-10 hover:shadow-xl md:h-40"
|
||||||
@click="handleClick(item, downloadType, $event, $dispatch)"
|
@click="handleClick(item, downloadType, $event, $dispatch)"
|
||||||
>
|
>
|
||||||
<div>
|
<div
|
||||||
<div
|
role="alert"
|
||||||
role="alert"
|
x-show="copied === item.icon_name"
|
||||||
x-show="copied === item.icon_name"
|
x-on:show:toast.document="copied = $event.detail"
|
||||||
x-on:show:toast.document="copied = $event.detail"
|
x-cloak
|
||||||
x-cloak
|
class="absolute top-0 left-0 right-0 z-50 px-2 py-1 mx-auto -mt-8 text-sm text-center text-white bg-black rounded hover:border-gray-900"
|
||||||
class="absolute top-0 left-0 right-0 z-50 px-2 py-1 mx-auto -mt-8 text-sm text-center text-white bg-black rounded"
|
style="width: fit-content"
|
||||||
style="width: fit-content"
|
x-transition:enter="ease-out duration-200"
|
||||||
x-transition:enter="transition ease-out duration-200"
|
x-transition:enter-start="opacity-0 scale-90"
|
||||||
x-transition:enter-start="opacity-0 scale-90"
|
x-transition:enter-end="opacity-100 scale-100"
|
||||||
x-transition:enter-end="opacity-100 scale-100"
|
x-transition:leave="ease-in duration-500 "
|
||||||
x-transition:leave="transition ease-in duration-500 "
|
x-transition:leave-start="opacity-100 scale-100"
|
||||||
x-transition:leave-start="opacity-100 scale-100"
|
x-transition:leave-end="opacity-0 scale-90"
|
||||||
x-transition:leave-end="opacity-0 scale-90"
|
>
|
||||||
|
<template x-if="downloadType == 'download-svg'"
|
||||||
|
><span>Downloading!</span></template
|
||||||
|
>
|
||||||
|
<template x-if="downloadType == 'copy-cdn'"
|
||||||
|
><span>Copied URL</span></template
|
||||||
|
>
|
||||||
|
<template x-if="downloadType == 'copy-svg'"
|
||||||
|
><span>Copied SVG</span></template
|
||||||
>
|
>
|
||||||
<template x-if="downloadType == 'download-svg'"
|
|
||||||
><span>Downloading!</span></template
|
|
||||||
>
|
|
||||||
<template x-if="downloadType == 'copy-cdn'"
|
|
||||||
><span>Copied URL</span></template
|
|
||||||
>
|
|
||||||
<template x-if="downloadType == 'copy-svg'"
|
|
||||||
><span>Copied SVG Code</span></template
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<img
|
<img
|
||||||
:src="`images/icons/` + item.icon_path + `.svg`"
|
:src="`images/icons/` + item.icon_path + `.svg`"
|
||||||
:alt="item.icon_name"
|
:alt="item.icon_name"
|
||||||
class="transition duration-200 group-hover:scale-200"
|
class="duration-200 group-hover:scale-200"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
/>
|
/>
|
||||||
|
<span class="hidden" x-cloak x-text="item.icon_keywords"></span>
|
||||||
<p
|
<p
|
||||||
class="mt-4 text-xs leading-none tracking-tight text-center text-gray-600 md:mt-8"
|
class=" absolute text-[11px] leading-snug text-left bottom-2 left-2 tracking-tight text-gray-400"
|
||||||
x-text="item.icon_name"
|
x-text="item.icon_name"
|
||||||
></p>
|
></p>
|
||||||
<span class="hidden" x-text="item.icon_keywords"></span>
|
|
||||||
</a>
|
</a>
|
||||||
</template>
|
</template>
|
||||||
<div x-show="filteredIcons.length === 0" class="col-span-2">
|
</div>
|
||||||
<h3 class="text-xl text-gray-500">No Matches Found</h3>
|
<div x-show="filteredIcons.length === 0" class="w-full m-4 md:m-6 lg:m-8">
|
||||||
</div>
|
<h3 class="text-xl text-gray-500">No Matches Found</h3>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
<footer
|
<footer
|
||||||
class="flex flex-col py-8 mx-8 space-y-4 text-gray-700 border-t border-gray-300 md:space-y-0 md:flex-row"
|
class="flex flex-col py-8 mx-8 space-y-4 text-gray-700 md:space-y-0 md:flex-row"
|
||||||
>
|
>
|
||||||
<span>
|
<span>
|
||||||
Project by
|
Project by
|
||||||
|
|
@ -358,6 +360,7 @@
|
||||||
function loadIcons() {
|
function loadIcons() {
|
||||||
return {
|
return {
|
||||||
search: "",
|
search: "",
|
||||||
|
showBar: false,
|
||||||
downloadType: "copy-svg",
|
downloadType: "copy-svg",
|
||||||
myForData: sourceData,
|
myForData: sourceData,
|
||||||
copied: false,
|
copied: false,
|
||||||
|
|
|
||||||
|
|
@ -47,22 +47,26 @@ var sourceData = [
|
||||||
{
|
{
|
||||||
icon_name: "Phone (Portrait)",
|
icon_name: "Phone (Portrait)",
|
||||||
icon_path: "phone_portrait",
|
icon_path: "phone_portrait",
|
||||||
icon_keywords: "iphone android phone portrait mobile talk device devices electronic tech",
|
icon_keywords:
|
||||||
|
"iphone android phone portrait mobile talk device devices electronic tech",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon_name: "Phone (Landscape)",
|
icon_name: "Phone (Landscape)",
|
||||||
icon_path: "phone_landscape",
|
icon_path: "phone_landscape",
|
||||||
icon_keywords: "iphone android phone landscape mobile talk device devices electronic tech",
|
icon_keywords:
|
||||||
|
"iphone android phone landscape mobile talk device devices electronic tech",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon_name: "Phone (Alt - Portrait)",
|
icon_name: "Phone (Alt - Portrait)",
|
||||||
icon_path: "iphone_portrait",
|
icon_path: "iphone_portrait",
|
||||||
icon_keywords: "iphone android phone portrait mobile talk device devices electronic tech",
|
icon_keywords:
|
||||||
|
"iphone android phone portrait mobile talk device devices electronic tech",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon_name: "Phone (Alt - Landscape)",
|
icon_name: "Phone (Alt - Landscape)",
|
||||||
icon_path: "iphone_landscape",
|
icon_path: "iphone_landscape",
|
||||||
icon_keywords: "iphone android phone landscape mobile talk device devices electronic tech",
|
icon_keywords:
|
||||||
|
"iphone android phone landscape mobile talk device devices electronic tech",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon_name: "Calendar",
|
icon_name: "Calendar",
|
||||||
|
|
@ -87,7 +91,8 @@ var sourceData = [
|
||||||
{
|
{
|
||||||
icon_name: "Calendar (End)",
|
icon_name: "Calendar (End)",
|
||||||
icon_path: "calendar_last_day",
|
icon_path: "calendar_last_day",
|
||||||
icon_keywords: "calendar day month end last final year month date date time",
|
icon_keywords:
|
||||||
|
"calendar day month end last final year month date date time",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon_name: "Calendar (Week)",
|
icon_name: "Calendar (Week)",
|
||||||
|
|
@ -217,12 +222,14 @@ var sourceData = [
|
||||||
{
|
{
|
||||||
icon_name: "Coffee",
|
icon_name: "Coffee",
|
||||||
icon_path: "coffee",
|
icon_path: "coffee",
|
||||||
icon_keywords: "coffee caffeine perk mug steam hot tea percolate drink cup wake",
|
icon_keywords:
|
||||||
|
"coffee caffeine perk mug steam hot tea percolate drink cup wake",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon_name: "Compass",
|
icon_name: "Compass",
|
||||||
icon_path: "compass",
|
icon_path: "compass",
|
||||||
icon_keywords: "compass safari direction wayfind find directions route navigation",
|
icon_keywords:
|
||||||
|
"compass safari direction wayfind find directions route navigation",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon_name: "Document",
|
icon_name: "Document",
|
||||||
|
|
@ -277,7 +284,8 @@ var sourceData = [
|
||||||
{
|
{
|
||||||
icon_name: "Mail (New)",
|
icon_name: "Mail (New)",
|
||||||
icon_path: "mail_new",
|
icon_path: "mail_new",
|
||||||
icon_keywords: "mail new email add create send receive news communicate communication",
|
icon_keywords:
|
||||||
|
"mail new email add create send receive news communicate communication",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon_name: "Mail (Delete)",
|
icon_name: "Mail (Delete)",
|
||||||
|
|
@ -567,12 +575,14 @@ var sourceData = [
|
||||||
{
|
{
|
||||||
icon_name: "Enter",
|
icon_name: "Enter",
|
||||||
icon_path: "enter",
|
icon_path: "enter",
|
||||||
icon_keywords: "enter log in out exit sign sign-in sign-out 'sign out' 'sign in' 'log in' log out' login logout",
|
icon_keywords:
|
||||||
|
"enter log in out exit sign sign-in sign-out 'sign out' 'sign in' 'log in' log out' login logout",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon_name: "Enter (Alt)",
|
icon_name: "Enter (Alt)",
|
||||||
icon_path: "enter_alt",
|
icon_path: "enter_alt",
|
||||||
icon_keywords: "enter log in out exit sign sign-in sign-out 'sign out' 'sign in' 'log in' log out' login logout",
|
icon_keywords:
|
||||||
|
"enter log in out exit sign sign-in sign-out 'sign out' 'sign in' 'log in' log out' login logout",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon_name: "Inbox",
|
icon_name: "Inbox",
|
||||||
|
|
@ -728,7 +738,7 @@ var sourceData = [
|
||||||
icon_name: "Trash (Alt)",
|
icon_name: "Trash (Alt)",
|
||||||
icon_path: "trash_alt",
|
icon_path: "trash_alt",
|
||||||
icon_keywords: "trash bin rubbish",
|
icon_keywords: "trash bin rubbish",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon_name: "Bell",
|
icon_name: "Bell",
|
||||||
icon_path: "bell",
|
icon_path: "bell",
|
||||||
|
|
@ -1643,7 +1653,8 @@ var sourceData = [
|
||||||
{
|
{
|
||||||
icon_name: "Globe",
|
icon_name: "Globe",
|
||||||
icon_path: "globe",
|
icon_path: "globe",
|
||||||
icon_keywords: "globe world countries country foreign nation earth planet global location",
|
icon_keywords:
|
||||||
|
"globe world countries country foreign nation earth planet global location",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon_name: "GPS",
|
icon_name: "GPS",
|
||||||
|
|
@ -1703,7 +1714,8 @@ var sourceData = [
|
||||||
{
|
{
|
||||||
icon_name: "Heart (Remove)",
|
icon_name: "Heart (Remove)",
|
||||||
icon_path: "heart_remove",
|
icon_path: "heart_remove",
|
||||||
icon_keywords: "heart love connection favourite unfavourite favorite unfavorite like",
|
icon_keywords:
|
||||||
|
"heart love connection favourite unfavourite favorite unfavorite like",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon_name: "Home",
|
icon_name: "Home",
|
||||||
|
|
@ -1748,7 +1760,8 @@ var sourceData = [
|
||||||
{
|
{
|
||||||
icon_name: "Lineweight",
|
icon_name: "Lineweight",
|
||||||
icon_path: "lineweight",
|
icon_path: "lineweight",
|
||||||
icon_keywords: "lineweight lines stroke weight thick thicc thickness text editing",
|
icon_keywords:
|
||||||
|
"lineweight lines stroke weight thick thicc thickness text editing",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon_name: "Loader",
|
icon_name: "Loader",
|
||||||
|
|
@ -1813,27 +1826,32 @@ var sourceData = [
|
||||||
{
|
{
|
||||||
icon_name: "Panel (Bottom)",
|
icon_name: "Panel (Bottom)",
|
||||||
icon_path: "panel_bottom",
|
icon_path: "panel_bottom",
|
||||||
icon_keywords: "panel bottom component align view windows windowed window app",
|
icon_keywords:
|
||||||
|
"panel bottom component align view windows windowed window app",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon_name: "Panel (Center)",
|
icon_name: "Panel (Center)",
|
||||||
icon_path: "panel_center",
|
icon_path: "panel_center",
|
||||||
icon_keywords: "panel center component align view windows windowed window app",
|
icon_keywords:
|
||||||
|
"panel center component align view windows windowed window app",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon_name: "Panel (Left)",
|
icon_name: "Panel (Left)",
|
||||||
icon_path: "panel_left",
|
icon_path: "panel_left",
|
||||||
icon_keywords: "panel left component align view windows windowed window app",
|
icon_keywords:
|
||||||
|
"panel left component align view windows windowed window app",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon_name: "Panel (Right)",
|
icon_name: "Panel (Right)",
|
||||||
icon_path: "panel_right",
|
icon_path: "panel_right",
|
||||||
icon_keywords: "panel right component align view windows windowed window app",
|
icon_keywords:
|
||||||
|
"panel right component align view windows windowed window app",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon_name: "Panel (Sectioned)",
|
icon_name: "Panel (Sectioned)",
|
||||||
icon_path: "panel_sectioned",
|
icon_path: "panel_sectioned",
|
||||||
icon_keywords: "panel sectioned component align view windows windowed window app",
|
icon_keywords:
|
||||||
|
"panel sectioned component align view windows windowed window app",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon_name: "Paper Plane",
|
icon_name: "Paper Plane",
|
||||||
|
|
@ -2023,7 +2041,8 @@ var sourceData = [
|
||||||
{
|
{
|
||||||
icon_name: "Translate",
|
icon_name: "Translate",
|
||||||
icon_path: "translate",
|
icon_path: "translate",
|
||||||
icon_keywords: "translate translation language support countries country speaking",
|
icon_keywords:
|
||||||
|
"translate translation language support countries country speaking",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon_name: "Trophy",
|
icon_name: "Trophy",
|
||||||
|
|
@ -2073,22 +2092,26 @@ var sourceData = [
|
||||||
{
|
{
|
||||||
icon_name: "Window Collapse Left",
|
icon_name: "Window Collapse Left",
|
||||||
icon_path: "window_collapse_left",
|
icon_path: "window_collapse_left",
|
||||||
icon_keywords: "window collapse left app view component windows windowed collapse expand push",
|
icon_keywords:
|
||||||
|
"window collapse left app view component windows windowed collapse expand push",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon_name: "Window Collapse Right",
|
icon_name: "Window Collapse Right",
|
||||||
icon_path: "window_collapse_right",
|
icon_path: "window_collapse_right",
|
||||||
icon_keywords: "window collapse right app view component windows windowed collapse expand push",
|
icon_keywords:
|
||||||
|
"window collapse right app view component windows windowed collapse expand push",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon_name: "Window Content",
|
icon_name: "Window Content",
|
||||||
icon_path: "window_content",
|
icon_path: "window_content",
|
||||||
icon_keywords: "window collapse app view component windows windowed collapse text browser",
|
icon_keywords:
|
||||||
|
"window collapse app view component windows windowed collapse text browser",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon_name: "Window",
|
icon_name: "Window",
|
||||||
icon_path: "window",
|
icon_path: "window",
|
||||||
icon_keywords: "window collapse app view component windows windowed browser",
|
icon_keywords:
|
||||||
|
"window collapse app view component windows windowed browser",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon_name: "Wrap Back",
|
icon_name: "Wrap Back",
|
||||||
|
|
|
||||||
|
|
@ -1,20 +1,7 @@
|
||||||
const path = require("path");
|
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
||||||
const glob = require("glob-all");
|
|
||||||
const ExtractTextPlugin = require("extract-text-webpack-plugin");
|
|
||||||
const HtmlWebpackPlugin = require("html-webpack-plugin");
|
const HtmlWebpackPlugin = require("html-webpack-plugin");
|
||||||
const CopyWebpackPlugin = require("copy-webpack-plugin");
|
const CopyWebpackPlugin = require("copy-webpack-plugin");
|
||||||
const PurgecssPlugin = require("purgecss-webpack-plugin");
|
const path = require("path");
|
||||||
|
|
||||||
/**
|
|
||||||
* Custom PurgeCSS Extractor
|
|
||||||
* https://github.com/FullHuman/purgecss
|
|
||||||
* https://github.com/FullHuman/purgecss-webpack-plugin
|
|
||||||
*/
|
|
||||||
class TailwindExtractor {
|
|
||||||
static extract(content) {
|
|
||||||
return content.match(/[A-z0-9-:\/]+/g);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
entry: "./src/css/tailwind.src.css",
|
entry: "./src/css/tailwind.src.css",
|
||||||
|
|
@ -23,44 +10,31 @@ module.exports = {
|
||||||
rules: [
|
rules: [
|
||||||
{
|
{
|
||||||
test: /\.css$/,
|
test: /\.css$/,
|
||||||
use: ExtractTextPlugin.extract({
|
use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"],
|
||||||
fallback: "style-loader",
|
|
||||||
use: [
|
|
||||||
{ loader: "css-loader", options: { importLoaders: 1 } },
|
|
||||||
"postcss-loader",
|
|
||||||
],
|
|
||||||
}),
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
devServer: {
|
||||||
|
static: "./dist",
|
||||||
|
watchFiles: path.join(__dirname, "src"),
|
||||||
|
hot: true,
|
||||||
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
new ExtractTextPlugin("styles.css", {
|
new MiniCssExtractPlugin(),
|
||||||
disable: process.env.NODE_ENV === "development",
|
|
||||||
}),
|
|
||||||
new HtmlWebpackPlugin({
|
new HtmlWebpackPlugin({
|
||||||
filename: "index.html",
|
filename: "index.html",
|
||||||
template: "src/index.html",
|
template: "src/index.html",
|
||||||
}),
|
}),
|
||||||
/// Enable images folder
|
/// Enable images folder
|
||||||
new CopyWebpackPlugin([
|
new CopyWebpackPlugin({
|
||||||
{
|
patterns: [
|
||||||
from: "src/images",
|
|
||||||
to: "images",
|
|
||||||
},
|
|
||||||
]),
|
|
||||||
/// Enable js folder
|
|
||||||
new CopyWebpackPlugin([
|
|
||||||
{
|
|
||||||
from: "src/js",
|
|
||||||
to: "js",
|
|
||||||
},
|
|
||||||
]),
|
|
||||||
new PurgecssPlugin({
|
|
||||||
paths: glob.sync([path.join(__dirname, "src/**/*.html")]),
|
|
||||||
extractors: [
|
|
||||||
{
|
{
|
||||||
extractor: TailwindExtractor,
|
from: "src/images",
|
||||||
extensions: ["html", "js"],
|
to: "images",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
from: "src/js",
|
||||||
|
to: "js",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
}),
|
}),
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue