Replace feather icons with lucide icons, use Icon component everywhere

package.json

@@ -33,7 +33,6 @@
         "@types/cookie-parser": "^1.4.2",
         "@types/express": "^4.17.6",
         "@types/express-session": "^1.17.0",
-        "@types/feather-icons": "^4.7.0",
         "@types/formidable": "^2.0.0",
         "@types/geoip-lite": "^1.1.31",
         "@types/jest": "^27.0.2",
@@ -56,7 +55,6 @@
         "eslint-plugin-node": "^11.1.0",
         "eslint-plugin-simple-import-sort": "^7.0.0",
         "eslint-plugin-svelte3": "^3.1.2",
-        "feather-icons": "^4.28.0",
         "jest": "^27.3.1",
         "jest-resolve": "^27.3.1",
         "jest-ts-webcompat-resolver": "^1.0.0",
@@ -84,6 +82,7 @@
         "express-session": "^1.17.1",
         "formidable": "^2.0.1",
         "geoip-lite": "^1.4.2",
+        "lucide": "^0.16.17",
         "mjml": "^4.6.2",
         "mysql": "^2.18.1",
         "nanoid": "^3.1.20",

src/assets/scss/base.scss

@@ -155,7 +155,7 @@ h1 {
 a {
 	text-decoration: none;
 
-	.feather.feather-external-link { //todo add js
+	.icon.feather-external-link { //todo add js
 		--icon-size: 16px;
 		margin-left: 4px;
 		margin-top: -3px;
@@ -239,12 +239,12 @@ button, .button {
 		border: 0;
 	}
 
-	.feather {
+	.icon {
 		--icon-size: 16px;
 		margin-right: 8px;
 	}
 
-	.feather.last {
+	.icon.last {
 		margin-right: 0;
 		margin-left: 8px;
 	}

src/assets/scss/panel.scss

@@ -16,7 +16,7 @@
 		margin: 16px 8px;
 	}
 
-	> .feather:first-child {
+	> .icon:first-child {
 		--icon-size: 24px;
 		position: absolute;
 		opacity: 0.2;
@@ -35,7 +35,7 @@
 		font-size: 24px;
 		line-height: 1;
 
-		.feather {
+		.icon {
 			--icon-size: 24px;
 			margin: 0 16px 0 0;
 			opacity: 0.2;

src/assets/ts/featherIcons.ts

@@ -1,10 +0,0 @@
-import feather from "feather-icons";
-
-let alreadyReplaced = false;
-
-export function replaceIcons(once: boolean = true): void {
-    if (!once || !alreadyReplaced) {
-        alreadyReplaced = true;
-        feather.replace();
-    }
-}

src/assets/ts/icons.ts

@@ -0,0 +1,11 @@
+import {createIcons, icons} from "lucide";
+
+let hasAlreadyReplacedIcons = false;
+
+export function replaceIcons(once: boolean): void {
+    if (!once || !hasAlreadyReplacedIcons) {
+        console.log('Create icons...');
+        createIcons({icons});
+        hasAlreadyReplacedIcons = true;
+    }
+}

src/assets/views/auth/account/NamePanel.svelte

@@ -4,13 +4,14 @@
     import Form from "../../utils/Form.svelte";
     import Field from "../../utils/Field.svelte";
     import {hasRoute, route} from "../../../../common/Routing";
+    import Icon from "../../utils/Icon.svelte";
 
     let newName = '';
 </script>
 
 {#if hasRoute('change-name')}
 <section class="panel">
-    <h2><i data-feather="key"></i> Change name</h2>
+    <h2><Icon name="key"/> Change name</h2>
 
 
     {#if $locals.can_change_name}

src/assets/views/auth/account/PasswordPanel.svelte

@@ -3,13 +3,14 @@
     import Form from "../../utils/Form.svelte";
     import Field from "../../utils/Field.svelte";
     import {hasRoute, route} from "../../../../common/Routing";
+    import Icon from "../../utils/Icon.svelte";
 
     let removePasswordMode = false;
 </script>
 
 {#if hasRoute('remove-password', 'change-password')}
 <section class="panel">
-    <h2><i data-feather="key"></i> {$locals.has_password ? 'Change' : 'Set'} password</h2>
+    <h2><Icon name="key"/> {$locals.has_password ? 'Change' : 'Set'} password</h2>
 
     {#if removePasswordMode}
         <Form action={route('remove-password')}

src/assets/views/auth/account/account.svelte

@@ -7,6 +7,7 @@
     import Form from "../../utils/Form.svelte";
     import Field from "../../utils/Field.svelte";
     import {hasRoute, route} from "../../../../common/Routing";
+    import Icon from "../../utils/Icon.svelte";
 
     const mainEmail = $locals.main_email?.email;
     const personalInfoFields = $locals.user_personal_info_fields || [];
@@ -16,7 +17,7 @@
 <BaseLayout title="Account" description="Manage your account settings and data.">
     <div class="container">
         <div class="panel">
-            <h2><i data-feather="user"></i> Personal information</h2>
+            <h2><Icon name="user"/> Personal information</h2>
 
             {#if $locals.display_email_warning && $locals.emails.length <= 0}
                 <Message type="warning" content="To avoid losing access to your account, please add an email address."/>
@@ -40,7 +41,7 @@
         {/if}
 
         <section class="panel">
-            <h2 id="emails"><i data-feather="shield"></i> Email addresses</h2>
+            <h2 id="emails"><Icon name="shield"/> Email addresses</h2>
 
             <div class="data-table-container">
                 <table class="data-table">

src/assets/views/auth/auth.svelte

@@ -25,7 +25,7 @@
     <div class="container">
         {#if hasRoute('login')}
         <section class="panel">
-            <h2><i data-feather="log-in"></i> Log in</h2>
+            <h2><Icon name="log-in"/> Log in</h2>
 
             <Form action={route('login') + queryStr} submitText="Authenticate" submitIcon="log-in">
                 <Field type="text" name="identifier" value={$locals.query?.identifier} icon="at-sign"
@@ -45,7 +45,7 @@
 
         {#if hasRoute('register')}
         <section class="panel">
-            <h2><i data-feather="user-plus"></i> Register</h2>
+            <h2><Icon name="user-plus"/> Register</h2>
 
             <Form action={route('register') + queryStr} submitText="Register" submitIcon="check">
                 <Field type="hidden" name="auth_method" value={registerUsingMagicLink ? 'magic_link': 'password'}/>

src/assets/views/backend/index.svelte

@@ -2,6 +2,7 @@
     import {locals} from "../../ts/stores.js";
     import BaseLayout from "../layouts/BaseLayout.svelte";
     import Breadcrumb from "../components/Breadcrumb.svelte";
+    import Icon from "../utils/Icon.svelte";
 
     const menu = $locals.menu || [];
 </script>
@@ -19,7 +20,7 @@
                         <li>
                             <a href={element.link}>
                                 {#if element.display_icon !== null}
-                                    <i data-feather={element.display_icon}></i>
+                                    <Icon name={element.display_icon}/>
                                 {/if}
                                 {element.display_string}
                             </a>

src/assets/views/components/Message.svelte

@@ -45,7 +45,7 @@
 
 		border-radius: 5px;
 
-		:global(.feather) {
+		:global(.icon) {
 			--icon-size: 24px;
 			margin-right: 8px;
 		}
@@ -77,7 +77,7 @@
 		&-discreet {
 			color: var(--on-surface);
 
-			.feather {
+			.icon {
 				--icon-size: 20px;
 			}
 		}
@@ -94,7 +94,7 @@
 
 			border: 0;
 
-			:global(.feather) {
+			:global(.icon) {
 				margin: 0;
 			}
 		}

src/assets/views/components/NavMenu.svelte

@@ -96,7 +96,7 @@
 
 		border-radius: $headerHeight;
 
-		:global(.feather) {
+		:global(.icon) {
 			--icon-size: 28px;
 			margin: 0;
 		}

src/assets/views/components/NavMenuItem.svelte

@@ -58,7 +58,7 @@
 			}
 		}
 
-		:global(.feather) {
+		:global(.icon) {
 			--icon-size: 16px;
 			margin-right: 8px;
 		}

src/assets/views/utils/Field.svelte

@@ -96,7 +96,7 @@
 			background-color: var(--input);
 			border-radius: 5px;
 
-			> :global(.feather.icon) {
+			> :global(.icon) {
 				--icon-size: 24px;
 				margin: 18px;
 				opacity: 0.75;
@@ -180,7 +180,7 @@
 				display: none;
 			}
 
-			& + :global(.feather) {
+			& + :global(.icon) {
 				position: absolute;
 				pointer-events: none;
 				right: 0;
@@ -190,7 +190,7 @@
 			}
 
 			// TODO: Temporary
-			&:focus + :global(.feather) {
+			&:focus + :global(.icon) {
 				transform: rotateX(180deg);
 			}
 		}
@@ -317,7 +317,7 @@
 				.name {
 					font-size: 20px;
 
-					:global(.feather) {
+					:global(.icon) {
 						--icon-size: 24px;
 						margin-right: 8px;
 					}

src/assets/views/utils/Icon.svelte

@@ -1,23 +1,17 @@
 <script lang="ts">
-    import {replaceIcons} from "../../ts/featherIcons.js";
+    import {replaceIcons} from "../../ts/icons.js";
-    import {afterUpdate, onMount} from "svelte";
+    import {onMount} from "svelte";
 
     export let name: string;
 
-
     onMount(() => {
-        replaceIcons();
+        replaceIcons(true);
-    });
-    afterUpdate(() => {
-        replaceIcons(false);
     });
+
 </script>
 
 <style lang="scss">
-	// ---
+	:global(.icon) {
-	// --- Feather
-	// ---
-	:global(.feather) {
 		display: inline-flex;
 		justify-content: center;
 		align-items: center;
@@ -43,8 +37,8 @@
 
 {#if name}
     {#if name.startsWith('fa') }
-        <i class="{name} feather icon" aria-hidden="true" {...$$restProps}></i>
+        <i class="{name} icon" aria-hidden="true" {...$$restProps}></i>
     {:else}
-        <i data-feather="{name}" class="feather icon" aria-hidden="true" {...$$restProps}></i>
+        <i icon-name="{name}" class="icon" aria-hidden="true" {...$$restProps}></i>
     {/if}
 {/if}

yarn.lock

@@ -803,11 +803,6 @@
     "@types/qs" "*"
     "@types/serve-static" "*"
 
-"@types/feather-icons@^4.7.0":
-  version "4.7.0"
-  resolved "https://registry.yarnpkg.com/@types/feather-icons/-/feather-icons-4.7.0.tgz#ec66bc046bcd1513835f87541ecef54b50c57ec9"
-  integrity sha512-vflOrmlHMGIGVN4AEl6ErPCNKBLcP1ehEpLqnJkTgf69r5QmJzy7BF1WzbBc8Hqs9KffROPT/JqlSKH4o5vB/w==
-
 "@types/formidable@^2.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@types/formidable/-/formidable-2.0.0.tgz#7100d6121871c6300e16c89cf4002f3b66157359"
@@ -1843,11 +1838,6 @@ cjs-module-lexer@^1.0.0:
   resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz#9f84ba3244a512f3a54e5277e8eef4c489864e40"
   integrity sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==
 
-classnames@^2.2.5:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
-  integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
-
 clean-css@^4.2.1:
   version "4.2.4"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.4.tgz#733bf46eba4e607c6891ea57c24a989356831178"
@@ -2112,11 +2102,6 @@ cookiejar@^2.1.2:
   resolved "https://registry.yarnpkg.com/cookiejar/-/cookiejar-2.1.3.tgz#fc7a6216e408e74414b90230050842dacda75acc"
   integrity sha512-JxbCBUdrfr6AQjOXrxoTvAMJO4HBTUIlBzslcJPAz+/KT8yk53fXun51u+RenNYvad/+Vc2DIz5o9UxlCDymFQ==
 
-core-js@^3.1.3:
-  version "3.19.1"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.19.1.tgz#f6f173cae23e73a7d88fa23b6e9da329276c6641"
-  integrity sha512-Tnc7E9iKd/b/ff7GFbhwPVzJzPztGrChB8X8GLqoYGdEOG8IpLnK1xPyo3ZoO3HsK6TodJS58VGPOxA+hLHQMg==
-
 core-util-is@~1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
@@ -3225,14 +3210,6 @@ fd-slicer@~1.1.0:
   dependencies:
     pend "~1.2.0"
 
-feather-icons@^4.28.0:
-  version "4.28.0"
-  resolved "https://registry.yarnpkg.com/feather-icons/-/feather-icons-4.28.0.tgz#e1892a401fe12c4559291770ff6e68b0168e760f"
-  integrity sha512-gRdqKESXRBUZn6Nl0VBq2wPHKRJgZz7yblrrc2lYsS6odkNFDnA4bqvrlEVRUPjE1tFax+0TdbJKZ31ziJuzjg==
-  dependencies:
-    classnames "^2.2.5"
-    core-js "^3.1.3"
-
 fetch-blob@^3.1.2:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/fetch-blob/-/fetch-blob-3.1.3.tgz#a7dca4855e39d3e3c5a1da62d4ee335c37d26012"
@@ -5105,6 +5082,11 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
+lucide@^0.16.17:
+  version "0.16.17"
+  resolved "https://registry.yarnpkg.com/lucide/-/lucide-0.16.17.tgz#52466954e97ea3efac0191b2452f42932d41fdf7"
+  integrity sha512-zAB+aRo6/naheCMQ8AYNAXCnsxCZQb7pI52taqjcfBDPkH3jJnx+b5UnvR4kncVPw4t7/U4GARH/23PleFgnHQ==
+
 magic-string@^0.25.7:
   version "0.25.7"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051"