mirror of
https://github.com/CoreyGinnivan/system-uicons.git
synced 2024-04-26 19:20:36 +02:00
Corey
GitHub
commit
f2e73eb17e
|
|
@ -1,3 +1,2 @@
|
|||
# Ignore all HTML files:
|
||||
*.html
|
||||
*.js
|
||||
*.html
|
||||
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": {
|
||||
"zip": "node createZip.js",
|
||||
"prebuild": "npm run zip",
|
||||
"dev": "cross-env NODE_ENV=development webpack-dev-server",
|
||||
"prod": "npm run zip && cross-env NODE_ENV=production webpack --no-progress"
|
||||
"dev": "cross-env NODE_ENV=development webpack serve --open",
|
||||
"prod": "npm run zip && cross-env NODE_ENV=production webpack"
|
||||
},
|
||||
"devDependencies": {
|
||||
"copy-webpack-plugin": "^5.0.2",
|
||||
"cross-env": "^5.1",
|
||||
"css-loader": "^0.28.10",
|
||||
"extract-text-webpack-plugin": "^4.0.0-beta.0",
|
||||
"glob-all": "^3.1.0",
|
||||
"html-webpack-plugin": "^3.0.6",
|
||||
"copy-webpack-plugin": "^10.2.4",
|
||||
"cross-env": "^7.0",
|
||||
"css-loader": "^6.7.1",
|
||||
"mini-css-extract-plugin": "^2.6.0",
|
||||
"glob-all": "^3.3.0",
|
||||
"html-webpack-plugin": "^5.5.0",
|
||||
"postcss": "^8.4.13",
|
||||
"postcss-loader": "^2.1.1",
|
||||
"purgecss-webpack-plugin": "^1.4.0",
|
||||
"style-loader": "^0.20.3",
|
||||
"postcss-loader": "^6.2.1",
|
||||
"style-loader": "^3.3.1",
|
||||
"tailwindcss": "^3.0.24",
|
||||
"webpack": "^4.29.6",
|
||||
"webpack-cli": "^3.3.0",
|
||||
"webpack-dev-server": "^3.2.1"
|
||||
"webpack": "^5.72.0",
|
||||
"webpack-cli": "^4.9.2",
|
||||
"webpack-dev-server": "^4.9.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"alpinejs": "^3.10.2",
|
||||
"archiver": "^5.0.0",
|
||||
"autoprefixer": "^10.4.6",
|
||||
"typeface-roboto-mono": "^0.0.75"
|
||||
"archiver": "^5.3.1",
|
||||
"autoprefixer": "^10.4.7",
|
||||
"typeface-roboto-mono": "^1.1.13"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,7 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
::selection {
|
||||
background-color: cyan;
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -38,10 +38,7 @@
|
|||
property="twitter:image"
|
||||
content="https://systemuicons.com/images/ogp/systemuicons_banner.png"
|
||||
/>
|
||||
<script
|
||||
src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.3.5/dist/alpine.min.js"
|
||||
defer
|
||||
></script>
|
||||
<script src="//unpkg.com/alpinejs" defer></script>
|
||||
<link rel="icon" type="image/svg+xml" href="/images/favicons/favicon.svg" />
|
||||
<link
|
||||
rel="mask-icon"
|
||||
|
|
@ -57,7 +54,7 @@
|
|||
<main class="flex-grow">
|
||||
<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>
|
||||
<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="/changelog">Changelog</a> -->
|
||||
<a
|
||||
|
|
@ -68,11 +65,16 @@
|
|||
>GitHub</a
|
||||
>
|
||||
<a
|
||||
class="hover:underline"
|
||||
class="flex hover:underline"
|
||||
href="https://github.com/sponsors/CoreyGinnivan"
|
||||
rel="noreferrer"
|
||||
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>
|
||||
</nav>
|
||||
|
|
@ -122,13 +124,15 @@
|
|||
/>
|
||||
</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
|
||||
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
|
||||
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'"
|
||||
>
|
||||
<input
|
||||
|
|
@ -166,10 +170,10 @@
|
|||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="whitespace-no-wrap">Copy SVG Code</span>
|
||||
<span class="whitespace-no-wrap">Copy SVG Element</span>
|
||||
</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'"
|
||||
>
|
||||
<input
|
||||
|
|
@ -278,7 +282,7 @@
|
|||
</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">
|
||||
<a
|
||||
|
|
@ -290,55 +294,53 @@
|
|||
item.icon_path +
|
||||
`.svg`"
|
||||
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)"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
role="alert"
|
||||
x-show="copied === item.icon_name"
|
||||
x-on:show:toast.document="copied = $event.detail"
|
||||
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"
|
||||
style="width: fit-content"
|
||||
x-transition:enter="transition ease-out duration-200"
|
||||
x-transition:enter-start="opacity-0 scale-90"
|
||||
x-transition:enter-end="opacity-100 scale-100"
|
||||
x-transition:leave="transition ease-in duration-500 "
|
||||
x-transition:leave-start="opacity-100 scale-100"
|
||||
x-transition:leave-end="opacity-0 scale-90"
|
||||
<div
|
||||
role="alert"
|
||||
x-show="copied === item.icon_name"
|
||||
x-on:show:toast.document="copied = $event.detail"
|
||||
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"
|
||||
style="width: fit-content"
|
||||
x-transition:enter="ease-out duration-200"
|
||||
x-transition:enter-start="opacity-0 scale-90"
|
||||
x-transition:enter-end="opacity-100 scale-100"
|
||||
x-transition:leave="ease-in duration-500 "
|
||||
x-transition:leave-start="opacity-100 scale-100"
|
||||
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>
|
||||
<img
|
||||
:src="`images/icons/` + item.icon_path + `.svg`"
|
||||
:alt="item.icon_name"
|
||||
class="transition duration-200 group-hover:scale-200"
|
||||
class="duration-200 group-hover:scale-200"
|
||||
loading="lazy"
|
||||
/>
|
||||
<span class="hidden" x-cloak x-text="item.icon_keywords"></span>
|
||||
<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"
|
||||
></p>
|
||||
<span class="hidden" x-text="item.icon_keywords"></span>
|
||||
</a>
|
||||
</template>
|
||||
<div x-show="filteredIcons.length === 0" class="col-span-2">
|
||||
<h3 class="text-xl text-gray-500">No Matches Found</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div x-show="filteredIcons.length === 0" class="w-full m-4 md:m-6 lg:m-8">
|
||||
<h3 class="text-xl text-gray-500">No Matches Found</h3>
|
||||
</div>
|
||||
</main>
|
||||
<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>
|
||||
Project by
|
||||
|
|
@ -358,6 +360,7 @@
|
|||
function loadIcons() {
|
||||
return {
|
||||
search: "",
|
||||
showBar: false,
|
||||
downloadType: "copy-svg",
|
||||
myForData: sourceData,
|
||||
copied: false,
|
||||
|
|
|
|||
|
|
@ -47,22 +47,26 @@ var sourceData = [
|
|||
{
|
||||
icon_name: "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_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_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_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",
|
||||
|
|
@ -87,7 +91,8 @@ var sourceData = [
|
|||
{
|
||||
icon_name: "Calendar (End)",
|
||||
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)",
|
||||
|
|
@ -217,12 +222,14 @@ var sourceData = [
|
|||
{
|
||||
icon_name: "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_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",
|
||||
|
|
@ -277,7 +284,8 @@ var sourceData = [
|
|||
{
|
||||
icon_name: "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)",
|
||||
|
|
@ -567,12 +575,14 @@ var sourceData = [
|
|||
{
|
||||
icon_name: "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_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",
|
||||
|
|
@ -728,7 +738,7 @@ var sourceData = [
|
|||
icon_name: "Trash (Alt)",
|
||||
icon_path: "trash_alt",
|
||||
icon_keywords: "trash bin rubbish",
|
||||
},
|
||||
},
|
||||
{
|
||||
icon_name: "Bell",
|
||||
icon_path: "bell",
|
||||
|
|
@ -1643,7 +1653,8 @@ var sourceData = [
|
|||
{
|
||||
icon_name: "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",
|
||||
|
|
@ -1703,7 +1714,8 @@ var sourceData = [
|
|||
{
|
||||
icon_name: "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",
|
||||
|
|
@ -1748,7 +1760,8 @@ var sourceData = [
|
|||
{
|
||||
icon_name: "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",
|
||||
|
|
@ -1813,27 +1826,32 @@ var sourceData = [
|
|||
{
|
||||
icon_name: "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_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_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_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_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",
|
||||
|
|
@ -2023,7 +2041,8 @@ var sourceData = [
|
|||
{
|
||||
icon_name: "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",
|
||||
|
|
@ -2073,22 +2092,26 @@ var sourceData = [
|
|||
{
|
||||
icon_name: "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_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_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_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",
|
||||
|
|
|
|||
|
|
@ -1,20 +1,7 @@
|
|||
const path = require("path");
|
||||
const glob = require("glob-all");
|
||||
const ExtractTextPlugin = require("extract-text-webpack-plugin");
|
||||
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
||||
const HtmlWebpackPlugin = require("html-webpack-plugin");
|
||||
const CopyWebpackPlugin = require("copy-webpack-plugin");
|
||||
const PurgecssPlugin = require("purgecss-webpack-plugin");
|
||||
|
||||
/**
|
||||
* 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);
|
||||
}
|
||||
}
|
||||
const path = require("path");
|
||||
|
||||
module.exports = {
|
||||
entry: "./src/css/tailwind.src.css",
|
||||
|
|
@ -23,44 +10,31 @@ module.exports = {
|
|||
rules: [
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: ExtractTextPlugin.extract({
|
||||
fallback: "style-loader",
|
||||
use: [
|
||||
{ loader: "css-loader", options: { importLoaders: 1 } },
|
||||
"postcss-loader",
|
||||
],
|
||||
}),
|
||||
use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"],
|
||||
},
|
||||
],
|
||||
},
|
||||
devServer: {
|
||||
static: "./dist",
|
||||
watchFiles: path.join(__dirname, "src"),
|
||||
hot: true,
|
||||
},
|
||||
plugins: [
|
||||
new ExtractTextPlugin("styles.css", {
|
||||
disable: process.env.NODE_ENV === "development",
|
||||
}),
|
||||
new MiniCssExtractPlugin(),
|
||||
new HtmlWebpackPlugin({
|
||||
filename: "index.html",
|
||||
template: "src/index.html",
|
||||
}),
|
||||
/// Enable images folder
|
||||
new CopyWebpackPlugin([
|
||||
{
|
||||
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: [
|
||||
new CopyWebpackPlugin({
|
||||
patterns: [
|
||||
{
|
||||
extractor: TailwindExtractor,
|
||||
extensions: ["html", "js"],
|
||||
from: "src/images",
|
||||
to: "images",
|
||||
},
|
||||
{
|
||||
from: "src/js",
|
||||
to: "js",
|
||||
},
|
||||
],
|
||||
}),
|
||||
|
|
|
|||
Loading…
Reference in a new issue