From 62fa5f79b6a80a18ef9cc050b2f9c91ee259d467 Mon Sep 17 00:00:00 2001
From: Rune Harlyk <rune@harlyk.dk>
Date: Mon, 19 Aug 2024 23:45:59 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8D=A7=20Collects=20all=20icons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/lib/components/Collapsible.svelte     |  2 +-
 app/src/lib/components/ConfirmDialog.svelte   |  3 +-
 .../lib/components/GithubUpdateDialog.svelte  |  2 +-
 app/src/lib/components/InfoDialog.svelte      |  3 +-
 app/src/lib/components/SettingsCard.svelte    |  2 +-
 app/src/lib/components/Spinner.svelte         |  3 +-
 app/src/lib/components/Toast.svelte           |  5 +-
 app/src/lib/components/icons/index.ts         | 98 +++++++++++++++++++
 .../lib/components/input/InputPassword.svelte |  3 +-
 app/src/lib/components/login.svelte           | 38 +++----
 .../lib/components/menu/GithubButton.svelte   |  7 +-
 app/src/lib/components/menu/Menu.svelte       | 50 +++++-----
 app/src/lib/components/menu/UserButton.svelte |  3 +-
 .../statusbar/BatteryIndicator.svelte         |  7 +-
 .../statusbar/FullscreenButton.svelte         |  3 +-
 .../components/statusbar/RSSIIndicator.svelte |  9 +-
 .../components/statusbar/SleepButton.svelte   |  3 +-
 .../components/statusbar/ThemeButton.svelte   |  3 +-
 .../lib/components/statusbar/TopBar.svelte    |  4 +-
 .../statusbar/UpdateIndicator.svelte          |  5 +-
 .../lib/components/statusbar/statusbar.svelte |  2 +-
 app/src/lib/components/toasts/Toast.svelte    |  5 +-
 app/src/routes/connections/ntp/NTP.svelte     |  6 +-
 .../routes/peripherals/camera/Camera.svelte   |  3 +-
 app/src/routes/peripherals/i2c/i2c.svelte     |  4 +-
 app/src/routes/peripherals/imu/imu.svelte     |  2 +-
 .../routes/peripherals/servo/servos.svelte    |  2 +-
 app/src/routes/system/filesystem/File.svelte  |  2 +-
 .../system/filesystem/FileSystem.svelte       |  2 +-
 .../routes/system/filesystem/Folder.svelte    |  3 +-
 .../system/metrics/SystemMetrics.svelte       |  3 +-
 .../routes/system/status/SystemStatus.svelte  | 59 +++++------
 .../update/GithubFirmwareManager.svelte       |  8 +-
 .../system/update/UploadFirmware.svelte       |  5 +-
 app/src/routes/user/+page.svelte              | 57 +++++------
 app/src/routes/user/EditUser.svelte           | 11 ++-
 app/src/routes/wifi/ap/Accesspoint.svelte     |  5 +-
 app/src/routes/wifi/sta/Scan.svelte           | 12 +--
 app/src/routes/wifi/sta/Wifi.svelte           | 94 +++++++++---------
 39 files changed, 302 insertions(+), 236 deletions(-)
 create mode 100644 app/src/lib/components/icons/index.ts

diff --git a/app/src/lib/components/Collapsible.svelte b/app/src/lib/components/Collapsible.svelte
index e8a04f2..2305a18 100644
--- a/app/src/lib/components/Collapsible.svelte
+++ b/app/src/lib/components/Collapsible.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { slide } from 'svelte/transition';
 	import { cubicOut } from 'svelte/easing';
-	import Down from '~icons/tabler/chevron-down';
 	import { createEventDispatcher } from 'svelte';
+	import { Down } from './icons';
 
 	const dispatch = createEventDispatcher();
 
diff --git a/app/src/lib/components/ConfirmDialog.svelte b/app/src/lib/components/ConfirmDialog.svelte
index 3a78b4d..cf55877 100644
--- a/app/src/lib/components/ConfirmDialog.svelte
+++ b/app/src/lib/components/ConfirmDialog.svelte
@@ -2,8 +2,7 @@
 	import { closeModal } from 'svelte-modals';
 	import { focusTrap } from 'svelte-focus-trap';
 	import { fly } from 'svelte/transition';
-	import Cancel from '~icons/tabler/x';
-	import Check from '~icons/tabler/check';
+	import { Cancel, Check } from '$lib/components/icons';
 
 	// provided by <Modals />
 	export let isOpen: boolean;
diff --git a/app/src/lib/components/GithubUpdateDialog.svelte b/app/src/lib/components/GithubUpdateDialog.svelte
index 72688c0..d3b2ad1 100644
--- a/app/src/lib/components/GithubUpdateDialog.svelte
+++ b/app/src/lib/components/GithubUpdateDialog.svelte
@@ -3,7 +3,7 @@
 	import { focusTrap } from 'svelte-focus-trap';
 	import { fly } from 'svelte/transition';
 	import { telemetry } from '$lib/stores/telemetry';
-	import Cancel from '~icons/tabler/x';
+	import { Cancel } from './icons';
 
 	// provided by <Modals />
 	export let isOpen: boolean;
diff --git a/app/src/lib/components/InfoDialog.svelte b/app/src/lib/components/InfoDialog.svelte
index 403ae76..8ca5e43 100644
--- a/app/src/lib/components/InfoDialog.svelte
+++ b/app/src/lib/components/InfoDialog.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
-	import { closeModal } from 'svelte-modals';
 	import { focusTrap } from 'svelte-focus-trap';
 	import { fly } from 'svelte/transition';
-	import Check from '~icons/tabler/check';
+	import { Check } from './icons';
 
 	// provided by <Modals />
 	export let isOpen: boolean;
diff --git a/app/src/lib/components/SettingsCard.svelte b/app/src/lib/components/SettingsCard.svelte
index 61ef241..2f1a66f 100644
--- a/app/src/lib/components/SettingsCard.svelte
+++ b/app/src/lib/components/SettingsCard.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { slide } from 'svelte/transition';
 	import { cubicOut } from 'svelte/easing';
-	import Down from '~icons/tabler/chevron-down';
+	import { Down } from './icons';
 	export let open = true;
 	export let collapsible = true;
 </script>
diff --git a/app/src/lib/components/Spinner.svelte b/app/src/lib/components/Spinner.svelte
index 604f1e6..36dee22 100644
--- a/app/src/lib/components/Spinner.svelte
+++ b/app/src/lib/components/Spinner.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import Loader from '~icons/tabler/loader-2';
+	import { Loader } from "./icons";
+
 </script>
 
 <div class="flex h-full w-full flex-col items-center justify-center p-6">
diff --git a/app/src/lib/components/Toast.svelte b/app/src/lib/components/Toast.svelte
index 13b1ee9..695aea5 100644
--- a/app/src/lib/components/Toast.svelte
+++ b/app/src/lib/components/Toast.svelte
@@ -2,10 +2,7 @@
 	import { flip } from 'svelte/animate';
 	import { fly } from 'svelte/transition';
 	import { notifications } from '$lib/components/toasts/notifications';
-	import error from '~icons/tabler/circle-x';
-	import success from '~icons/tabler/circle-check';
-	import warning from '~icons/tabler/alert-triangle';
-	import info from '~icons/tabler/info-circle';
+	import { error, info, success, warning } from './icons';
 
 	export let theme = {
 		error: 'alert-error',
diff --git a/app/src/lib/components/icons/index.ts b/app/src/lib/components/icons/index.ts
new file mode 100644
index 0000000..346b8ba
--- /dev/null
+++ b/app/src/lib/components/icons/index.ts
@@ -0,0 +1,98 @@
+export { default as Connection } from '~icons/mdi/connection';
+export { default as Users } from '~icons/mdi/users';
+export { default as Settings } from '~icons/mdi/settings';
+export { default as MdiController } from '~icons/mdi/controller';
+export { default as Devices } from '~icons/mdi/devices';
+export { default as Camera } from '~icons/mdi/camera-outline';
+export { default as Rotate3d } from '~icons/mdi/rotate-3d';
+export { default as MotorOutline } from '~icons/mdi/motor-outline';
+export { default as Health } from '~icons/mdi/stethoscope';
+export { default as Folder } from '~icons/mdi/folder-outline';
+export { default as Update } from '~icons/mdi/reload';
+export { default as Router } from '~icons/mdi/router';
+export { default as AP } from '~icons/mdi/access-point';
+export { default as Remote } from '~icons/mdi/network';
+export { default as Copyright } from '~icons/mdi/copyright';
+export { default as NTP } from '~icons/mdi/clock-check';
+export { default as Metrics } from '~icons/mdi/report-bar';
+export { default as MdiEyeOutline } from '~icons/mdi/eye-outline';
+export { default as MdiEyeOffOutline } from '~icons/mdi/eye-off-outline';
+export { default as Github } from '~icons/mdi/github';
+export { default as Avatar } from '~icons/mdi/user-circle';
+export { default as Logout } from '~icons/mdi/logout';
+export { default as Record } from '~icons/mdi/radio-button-unchecked';
+export { default as Battery0 } from '~icons/tabler/battery';
+export { default as Battery25 } from '~icons/tabler/battery-1';
+export { default as Battery50 } from '~icons/tabler/battery-2';
+export { default as Battery75 } from '~icons/tabler/battery-3';
+export { default as Battery100 } from '~icons/tabler/battery-3';
+export { default as BatteryCharging } from '~icons/tabler/battery-charging-2';
+export { default as MdiFullscreen } from '~icons/mdi/fullscreen';
+export { default as MdiFullscreenExit } from '~icons/mdi/fullscreen-exit';
+export { default as WiFi } from '~icons/tabler/wifi';
+export { default as WiFi0 } from '~icons/tabler/wifi-0';
+export { default as WiFi1 } from '~icons/tabler/wifi-1';
+export { default as WiFi2 } from '~icons/tabler/wifi-2';
+export { default as WifiOff } from '~icons/tabler/wifi-off';
+export { default as MdiWeatherSunny } from '~icons/mdi/weather-sunny';
+export { default as MdiMoonAndStars } from '~icons/mdi/moon-and-stars';
+export { default as Hamburger } from '~icons/mdi/hamburger-menu';
+
+export { default as FileIcon } from '~icons/mdi/file';
+export { default as FolderIcon } from '~icons/mdi/folder-outline';
+export { default as FolderOpenOutline } from '~icons/mdi/folder-open-outline';
+
+export { default as Down } from '~icons/tabler/chevron-down';
+export { default as Cancel } from '~icons/tabler/x';
+export { default as Check } from '~icons/tabler/check';
+export { default as Login } from '~icons/tabler/login';
+export { default as Loader } from '~icons/tabler/loader-2';
+export { default as error } from '~icons/tabler/circle-x';
+export { default as success } from '~icons/tabler/circle-check';
+export { default as warning } from '~icons/tabler/alert-triangle';
+export { default as info } from '~icons/tabler/info-circle';
+export { default as Power } from '~icons/tabler/power';
+
+export { default as MAC } from '~icons/tabler/dna-2';
+export { default as Home } from '~icons/tabler/home';
+export { default as SSID } from '~icons/tabler/router';
+export { default as DNS } from '~icons/tabler/address-book';
+export { default as Gateway } from '~icons/tabler/torii';
+export { default as Subnet } from '~icons/tabler/grid-dots';
+export { default as Channel } from '~icons/tabler/antenna';
+export { default as Scan } from '~icons/tabler/radar-2';
+export { default as Add } from '~icons/tabler/circle-plus';
+export { default as Edit } from '~icons/tabler/pencil';
+export { default as Delete } from '~icons/tabler/trash';
+
+export { default as Network } from '~icons/tabler/router';
+export { default as Reload } from '~icons/tabler/reload';
+
+export { default as Firmware } from '~icons/tabler/refresh-alert';
+export { default as CloudDown } from '~icons/tabler/cloud-download';
+export { default as Server } from '~icons/tabler/server';
+export { default as Clock } from '~icons/tabler/clock';
+export { default as UTC } from '~icons/tabler/clock-pin';
+export { default as Stopwatch } from '~icons/tabler/24-hours';
+
+export { default as CPU } from '~icons/tabler/cpu';
+export { default as CPP } from '~icons/tabler/binary';
+export { default as Sleep } from '~icons/tabler/zzz';
+export { default as FactoryReset } from '~icons/tabler/refresh-dot';
+export { default as Speed } from '~icons/tabler/activity';
+export { default as Flash } from '~icons/tabler/device-sd-card';
+export { default as Pyramid } from '~icons/tabler/pyramid';
+export { default as Sketch } from '~icons/tabler/chart-pie';
+export { default as Heap } from '~icons/tabler/box-model';
+export { default as Temperature } from '~icons/tabler/temperature';
+export { default as SDK } from '~icons/tabler/sdk';
+
+export { default as Prerelease } from '~icons/tabler/test-pipe';
+export { default as Error } from '~icons/tabler/circle-x';
+
+export { default as OTA } from '~icons/tabler/file-upload';
+export { default as Warning } from '~icons/tabler/alert-triangle';
+
+export { default as AddUser } from '~icons/tabler/user-plus';
+export { default as Admin } from '~icons/tabler/key';
+export { default as Save } from '~icons/tabler/device-floppy';
diff --git a/app/src/lib/components/input/InputPassword.svelte b/app/src/lib/components/input/InputPassword.svelte
index 26c73f5..bf2705f 100644
--- a/app/src/lib/components/input/InputPassword.svelte
+++ b/app/src/lib/components/input/InputPassword.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-    import MdiEyeOutline from '~icons/mdi/eye-outline';
-    import MdiEyeOffOutline from '~icons/mdi/eye-off-outline';
+	import { MdiEyeOffOutline, MdiEyeOutline } from "../icons";
 
 	export let show = false;
 	export let value = '';
diff --git a/app/src/lib/components/login.svelte b/app/src/lib/components/login.svelte
index d94f1b7..020a0bd 100644
--- a/app/src/lib/components/login.svelte
+++ b/app/src/lib/components/login.svelte
@@ -4,9 +4,9 @@
 	import { user } from '$lib/stores/user';
 	import { notifications } from '$lib/components/toasts/notifications';
 	import { fade, fly } from 'svelte/transition';
-	import Login from '~icons/tabler/login';
 	import { api } from '$lib/api';
 	import type { JWT } from '$lib/types/models';
+	import { Login } from './icons';
 
 	type SignInData = {
 		password: string;
@@ -21,21 +21,21 @@
 	let token = { access_token: '' };
 
 	async function signInUser(data: SignInData) {
-        const result = await api.post<JWT>('/api/signIn', data)
-		if (result.isErr()){
-            username = '';
-            password = '';
-            notifications.error('Wrong Username or Password!', 5000);
-            loginFailed = true;
-            setTimeout(() => {
-                loginFailed = false;
-            }, 1500);
-            return
-        }
-        token = result.inner;
-        user.init(token.access_token);
-        username = $user.username;
-        notifications.success('User ' + username + ' signed in', 5000);
+		const result = await api.post<JWT>('/api/signIn', data);
+		if (result.isErr()) {
+			username = '';
+			password = '';
+			notifications.error('Wrong Username or Password!', 5000);
+			loginFailed = true;
+			setTimeout(() => {
+				loginFailed = false;
+			}, 1500);
+			return;
+		}
+		token = result.inner;
+		user.init(token.access_token);
+		username = $user.username;
+		notifications.success('User ' + username + ' signed in', 5000);
 	}
 </script>
 
@@ -69,10 +69,10 @@
 				<div class="card-actions mt-4 justify-end">
 					<button
 						class="btn btn-primary inline-flex items-center"
-						on:click={() => {
-							signInUser({ username, password });
-						}}><Login class="mr-2 h-5 w-5" /><span>Login</span></button
+						on:click={() => signInUser({ username, password })}
 					>
+						<Login class="mr-2 h-5 w-5" /><span>Login</span>
+					</button>
 				</div>
 			</form>
 		</div>
diff --git a/app/src/lib/components/menu/GithubButton.svelte b/app/src/lib/components/menu/GithubButton.svelte
index 362483f..58cec2e 100644
--- a/app/src/lib/components/menu/GithubButton.svelte
+++ b/app/src/lib/components/menu/GithubButton.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
-	import MdiGithub from '~icons/mdi/github';
+	import { Github } from "../icons";
+
 	export let github;
 </script>
 
 {#if github.active}
-	<a href={github.href} class="btn btn-ghost" target="_blank" rel="noopener noreferrer"
-		><MdiGithub class="h-5 w-5" />
+	<a href={github.href} class="btn btn-ghost" target="_blank" rel="noopener noreferrer">
+        <Github class="h-5 w-5" />
     </a>
 {/if}
diff --git a/app/src/lib/components/menu/Menu.svelte b/app/src/lib/components/menu/Menu.svelte
index 5033740..434a024 100644
--- a/app/src/lib/components/menu/Menu.svelte
+++ b/app/src/lib/components/menu/Menu.svelte
@@ -1,23 +1,5 @@
 <script lang="ts">
-	import MdiConnection from '~icons/mdi/connection';
-	import Users from '~icons/mdi/users';
-	import Settings from '~icons/mdi/settings';
-	import MdiController from '~icons/mdi/controller';
-	import Devices from '~icons/mdi/devices';
-	import Camera from '~icons/mdi/camera-outline';
-	import Rotate3d from '~icons/mdi/rotate-3d';
-	import MotorOutline from '~icons/mdi/motor-outline';
-	import Health from '~icons/mdi/stethoscope';
-	import Folder from '~icons/mdi/folder-outline';
-	import Update from '~icons/mdi/reload';
-	import WiFi from '~icons/mdi/wifi';
-	import Router from '~icons/mdi/router';
-	import AP from '~icons/mdi/access-point';
-	import Remote from '~icons/mdi/network';
-	import Copyright from '~icons/mdi/copyright';
-	import NTP from '~icons/mdi/clock-check';
-	import Metrics from '~icons/mdi/report-bar';
-	import { page } from '$app/stores';
+    import { page } from '$app/stores';
 	import { user } from '$lib/stores/user';
 	import { createEventDispatcher } from 'svelte';
 	import { useFeatureFlags } from '$lib/stores/featureFlags';
@@ -25,6 +7,26 @@
 	import GithubButton from '../menu/GithubButton.svelte';
 	import LogoButton from '../menu/LogoButton.svelte';
 	import MenuList from '../menu/MenuList.svelte';
+	import {
+		Connection,
+		Users,
+		Settings,
+		MdiController,
+		Devices,
+		Camera,
+		Rotate3d,
+		MotorOutline,
+		Health,
+		Folder,
+		Update,
+		WiFi,
+		Router,
+		AP,
+		Remote,
+		Copyright,
+		NTP,
+		Metrics
+	} from '$lib/components/icons';
 
 	const features = useFeatureFlags();
 
@@ -57,7 +59,7 @@
 			submenu: [
 				{
 					title: 'I2C',
-					icon: MdiConnection,
+					icon: Connection,
 					href: '/peripherals/i2c',
 					feature: true
 				},
@@ -169,15 +171,15 @@
 
 	$: setActiveMenuItem($page.data.title);
 
-    const updateMenu = (event:any) => {
-        setActiveMenuItem(event.details)
-    }
+	const updateMenu = (event: any) => {
+		setActiveMenuItem(event.details);
+	};
 </script>
 
 <div class="bg-base-200 text-base-content flex h-full w-80 flex-col p-4">
 	<LogoButton {appName} />
 
-    <MenuList {menuItems} on:select{updateMenu} class="flex-grow flex-nowrap overflow-y-auto"/>
+	<MenuList {menuItems} on:select{updateMenu} class="flex-grow flex-nowrap overflow-y-auto" />
 
 	<UserButton />
 
diff --git a/app/src/lib/components/menu/UserButton.svelte b/app/src/lib/components/menu/UserButton.svelte
index d6afea3..33c7b7e 100644
--- a/app/src/lib/components/menu/UserButton.svelte
+++ b/app/src/lib/components/menu/UserButton.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
-    import Avatar from '~icons/mdi/user-circle';
-	import Logout from '~icons/mdi/logout';
 	import { user } from '$lib/stores';
 	import { useFeatureFlags } from "$lib/stores";
+	import { Avatar, Logout } from '../icons';
 
     const features = useFeatureFlags();
 </script>
diff --git a/app/src/lib/components/statusbar/BatteryIndicator.svelte b/app/src/lib/components/statusbar/BatteryIndicator.svelte
index ce02f21..28ddf00 100644
--- a/app/src/lib/components/statusbar/BatteryIndicator.svelte
+++ b/app/src/lib/components/statusbar/BatteryIndicator.svelte
@@ -1,12 +1,7 @@
 <script lang="ts">
 	import { useFeatureFlags } from '$lib/stores';
 	import type { Battery } from '$lib/types/models';
-	import Battery0 from '~icons/tabler/battery';
-	import Battery25 from '~icons/tabler/battery-1';
-	import Battery50 from '~icons/tabler/battery-2';
-	import Battery75 from '~icons/tabler/battery-3';
-	import Battery100 from '~icons/tabler/battery-4';
-	import BatteryCharging from '~icons/tabler/battery-charging-2';
+	import { BatteryCharging, Battery100, Battery75, Battery50, Battery25, Battery0 } from '../icons';
 
 	const features = useFeatureFlags();
 
diff --git a/app/src/lib/components/statusbar/FullscreenButton.svelte b/app/src/lib/components/statusbar/FullscreenButton.svelte
index 9211e6d..6e1e7fb 100644
--- a/app/src/lib/components/statusbar/FullscreenButton.svelte
+++ b/app/src/lib/components/statusbar/FullscreenButton.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
     import { isFullscreen, toggleFullscreen } from '$lib/stores';
-    import MdiFullscreen from '~icons/mdi/fullscreen';
-	import MdiFullscreenExit from '~icons/mdi/fullscreen-exit';
+	import { MdiFullscreenExit, MdiFullscreen } from '../icons';
 </script>
 
 <button on:click={toggleFullscreen}>
diff --git a/app/src/lib/components/statusbar/RSSIIndicator.svelte b/app/src/lib/components/statusbar/RSSIIndicator.svelte
index 166402c..a6a975c 100644
--- a/app/src/lib/components/statusbar/RSSIIndicator.svelte
+++ b/app/src/lib/components/statusbar/RSSIIndicator.svelte
@@ -1,9 +1,5 @@
 <script lang="ts">
-	import WiFi from '~icons/tabler/wifi';
-	import WiFi0 from '~icons/tabler/wifi-0';
-	import WiFi1 from '~icons/tabler/wifi-1';
-	import WiFi2 from '~icons/tabler/wifi-2';
-    import WifiOff from '~icons/tabler/wifi-off';
+	import { WiFi, WiFi0, WiFi1, WiFi2, WifiOff } from "../icons";
 
 	export let showDBm = false;
 	export let rssi = 0;
@@ -25,9 +21,6 @@
 			</span>
 		{/if}
 		<div class="h-7 w-7">
-			{#if rssi !== 0 && rssi < -55}
-				<WiFi class="absolute inset-0 h-full w-full opacity-30" />
-			{/if}
 			<svelte:component this={getWiFiIcon()} class="absolute inset-0 h-full w-full" />
 		</div>
 	</div>
diff --git a/app/src/lib/components/statusbar/SleepButton.svelte b/app/src/lib/components/statusbar/SleepButton.svelte
index 1b0d82a..53c6015 100644
--- a/app/src/lib/components/statusbar/SleepButton.svelte
+++ b/app/src/lib/components/statusbar/SleepButton.svelte
@@ -2,9 +2,8 @@
 	import { useFeatureFlags } from '$lib/stores';
 	import { closeModal, openModal } from 'svelte-modals';
     import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
-    import Power from '~icons/tabler/power';
-	import Cancel from '~icons/tabler/x';
 	import { api } from '$lib/api';
+	import { Cancel, Power } from '../icons';
 
     const features = useFeatureFlags();
 
diff --git a/app/src/lib/components/statusbar/ThemeButton.svelte b/app/src/lib/components/statusbar/ThemeButton.svelte
index e66efcd..809d759 100644
--- a/app/src/lib/components/statusbar/ThemeButton.svelte
+++ b/app/src/lib/components/statusbar/ThemeButton.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-    import MdiWeatherSunny from '~icons/mdi/weather-sunny';
-	import MdiMoonAndStars from '~icons/mdi/moon-and-stars';
+	import { MdiWeatherSunny, MdiMoonAndStars } from "../icons";
 </script>
 
 <label class="swap swap-rotate">
diff --git a/app/src/lib/components/statusbar/TopBar.svelte b/app/src/lib/components/statusbar/TopBar.svelte
index cd393b6..5047eca 100644
--- a/app/src/lib/components/statusbar/TopBar.svelte
+++ b/app/src/lib/components/statusbar/TopBar.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-    import MdiHamburgerMenu from '~icons/mdi/hamburger-menu';
+    import {Hamburger} from '../icons'
 </script>
 
 <div class="topbar absolute left-0 top-0 w-full z-20 flex justify-between bg-zinc-800">
 	<div class="flex gap-2 p-2">
         <a href="/">
-            <svelte:component this={MdiHamburgerMenu} class="h-8 w-8"/>
+            <svelte:component this={Hamburger} class="h-8 w-8"/>
         </a>
     </div>
 </div>
diff --git a/app/src/lib/components/statusbar/UpdateIndicator.svelte b/app/src/lib/components/statusbar/UpdateIndicator.svelte
index 12b7fbd..5131584 100644
--- a/app/src/lib/components/statusbar/UpdateIndicator.svelte
+++ b/app/src/lib/components/statusbar/UpdateIndicator.svelte
@@ -4,15 +4,14 @@
 	import { user } from '$lib/stores/user';
 	import { notifications } from '$lib/components/toasts/notifications';
 	import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
-	import Firmware from '~icons/tabler/refresh-alert';
-	import Cancel from '~icons/tabler/x';
-	import CloudDown from '~icons/tabler/cloud-download';
+	
 	import GithubUpdateDialog from '$lib/components/GithubUpdateDialog.svelte';
 	import { compareVersions } from 'compare-versions';
 	import { onMount } from 'svelte';
 	import { api } from '$lib/api';
 	import type { GithubRelease } from '$lib/types/models';
 	import { useFeatureFlags } from '$lib/stores/featureFlags';
+	import { Cancel, CloudDown, Firmware } from '../icons';
 
 	const features = useFeatureFlags();
 
diff --git a/app/src/lib/components/statusbar/statusbar.svelte b/app/src/lib/components/statusbar/statusbar.svelte
index d21b7de..f2051fc 100644
--- a/app/src/lib/components/statusbar/statusbar.svelte
+++ b/app/src/lib/components/statusbar/statusbar.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { page } from '$app/stores';
 	import { telemetry } from '$lib/stores/telemetry';
-	import Hamburger from '~icons/tabler/menu-2';
 	
 	import RssiIndicator from '$lib/components/statusbar/RSSIIndicator.svelte';
 	import BatteryIndicator from '$lib/components/statusbar/BatteryIndicator.svelte';
@@ -11,6 +10,7 @@
 	import FullscreenButton from './FullscreenButton.svelte';
 	import StopButton from './StopButton.svelte';
 	import ViewSelector from './ViewSelector.svelte';
+	import { Hamburger } from '../icons';
 </script>
 
 <div class="navbar bg-base-300 sticky top-0 z-10 h-12 min-h-fit drop-shadow-lg lg:h-16 gap-2 pr-0">
diff --git a/app/src/lib/components/toasts/Toast.svelte b/app/src/lib/components/toasts/Toast.svelte
index ff5151e..3269974 100644
--- a/app/src/lib/components/toasts/Toast.svelte
+++ b/app/src/lib/components/toasts/Toast.svelte
@@ -2,10 +2,7 @@
 	import { flip } from 'svelte/animate';
 	import { fly } from 'svelte/transition';
 	import { notifications } from '$lib/components/toasts/notifications';
-	import error from '~icons/tabler/circle-x';
-	import success from '~icons/tabler/circle-check';
-	import warning from '~icons/tabler/alert-triangle';
-	import info from '~icons/tabler/info-circle';
+	import { error, info, success, warning } from '../icons';
 
 	export let theme = {
 		error: 'alert-error',
diff --git a/app/src/routes/connections/ntp/NTP.svelte b/app/src/routes/connections/ntp/NTP.svelte
index 0c90a53..f5423f5 100644
--- a/app/src/routes/connections/ntp/NTP.svelte
+++ b/app/src/routes/connections/ntp/NTP.svelte
@@ -9,14 +9,10 @@
 	import { page } from '$app/stores';
 	import { notifications } from '$lib/components/toasts/notifications';
 	import { TIME_ZONES } from './timezones';
-	import NTP from '~icons/tabler/clock-check';
-	import Server from '~icons/tabler/server';
-	import Clock from '~icons/tabler/clock';
-	import UTC from '~icons/tabler/clock-pin';
-	import Stopwatch from '~icons/tabler/24-hours';
 	import type { NTPSettings, NTPStatus } from '$lib/types/models';
 	import { api } from '$lib/api';
 	import { useFeatureFlags } from '$lib/stores/featureFlags';
+	import { NTP, UTC, Stopwatch, Clock, Server } from '$lib/components/icons';
 
     const features = useFeatureFlags();
 
diff --git a/app/src/routes/peripherals/camera/Camera.svelte b/app/src/routes/peripherals/camera/Camera.svelte
index 254fe21..6a30b75 100644
--- a/app/src/routes/peripherals/camera/Camera.svelte
+++ b/app/src/routes/peripherals/camera/Camera.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
 	import SettingsCard from "$lib/components/SettingsCard.svelte";
-    import Camera from '~icons/mdi/camera-outline'
-    import Record from '~icons/mdi/radio-button-unchecked'
 	import CameraSetting from './CameraSetting.svelte';
 	import Stream from '$lib/components/Stream.svelte';
+	import { Camera } from "$lib/components/icons";
 </script>
 
 <SettingsCard collapsible={false}>
diff --git a/app/src/routes/peripherals/i2c/i2c.svelte b/app/src/routes/peripherals/i2c/i2c.svelte
index 83c0246..b19cb4c 100644
--- a/app/src/routes/peripherals/i2c/i2c.svelte
+++ b/app/src/routes/peripherals/i2c/i2c.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
 	import SettingsCard from "$lib/components/SettingsCard.svelte";
-    import MdiConnection from '~icons/mdi/connection';
 	import { onMount } from "svelte";
 	import { socket } from "$lib/stores";
     import type { I2CDevice } from "$lib/types/models";
+	import { Connection } from "$lib/components/icons";
 
     const i2cDevices = [
         {address:30,  part_number: "HMC5883", name: "3-Axis Digital Compass/Magnetometer IC"},
@@ -27,7 +27,7 @@
 </script>
 
 <SettingsCard collapsible={false}>
-    <MdiConnection slot="icon" class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
+    <Connection slot="icon" class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
     <span slot="title">I<sup>2</sup>C</span>
 
     <div class="grid">
diff --git a/app/src/routes/peripherals/imu/imu.svelte b/app/src/routes/peripherals/imu/imu.svelte
index 02408af..e15e8e6 100644
--- a/app/src/routes/peripherals/imu/imu.svelte
+++ b/app/src/routes/peripherals/imu/imu.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import SettingsCard from "$lib/components/SettingsCard.svelte";
-    import Rotate3d from '~icons/mdi/rotate-3d';
     import { imu } from '$lib/stores/imu';
     import { Chart, registerables } from 'chart.js';
 	import { cubicOut } from "svelte/easing";
@@ -10,6 +9,7 @@
 	import { socket } from "$lib/stores";
 	import type { IMU } from "$lib/types/models";
 	import { useFeatureFlags } from "$lib/stores/featureFlags";
+	import { Rotate3d } from "$lib/components/icons";
 
     const features = useFeatureFlags();
 
diff --git a/app/src/routes/peripherals/servo/servos.svelte b/app/src/routes/peripherals/servo/servos.svelte
index 95b2d66..4913e26 100644
--- a/app/src/routes/peripherals/servo/servos.svelte
+++ b/app/src/routes/peripherals/servo/servos.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
 	import SettingsCard from '$lib/components/SettingsCard.svelte';
 	import type { ServoConfiguration, Servo } from '$lib/types/models';
-	import MotorOutline from '~icons/mdi/motor-outline';
 	import ServoController from './servo.svelte';
 	import Spinner from '$lib/components/Spinner.svelte';
 
 	import { socket } from '$lib/stores';
 	import { onDestroy, onMount } from 'svelte';
 	import { throttler as Throttler } from '$lib/utilities';
+	import { MotorOutline } from '$lib/components/icons';
 
 	let isLoading = false;
 
diff --git a/app/src/routes/system/filesystem/File.svelte b/app/src/routes/system/filesystem/File.svelte
index 7fcb312..604d945 100644
--- a/app/src/routes/system/filesystem/File.svelte
+++ b/app/src/routes/system/filesystem/File.svelte
@@ -1,5 +1,5 @@
 <script>
-    import FileIcon from '~icons/mdi/file';
+	import { FileIcon } from '$lib/components/icons';
     import { createEventDispatcher } from 'svelte';
     
 	export let name;
diff --git a/app/src/routes/system/filesystem/FileSystem.svelte b/app/src/routes/system/filesystem/FileSystem.svelte
index bb351eb..6017c09 100644
--- a/app/src/routes/system/filesystem/FileSystem.svelte
+++ b/app/src/routes/system/filesystem/FileSystem.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
 	import SettingsCard from "$lib/components/SettingsCard.svelte";
 	import Spinner from "$lib/components/Spinner.svelte";
-    import FolderIcon from '~icons/mdi/folder-outline';
 	import Folder from "./Folder.svelte";
 	import { api } from "$lib/api";
 	import type { Directory } from "$lib/types/models";
+	import { FolderIcon } from "$lib/components/icons";
 
     let filename = '';
 
diff --git a/app/src/routes/system/filesystem/Folder.svelte b/app/src/routes/system/filesystem/Folder.svelte
index 8e15b3c..15dde33 100644
--- a/app/src/routes/system/filesystem/Folder.svelte
+++ b/app/src/routes/system/filesystem/Folder.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
 	import File from './File.svelte';
-    import FolderIcon from '~icons/mdi/folder-outline';
-    import FolderOpenOutline from '~icons/mdi/folder-open-outline';
 	import { createEventDispatcher } from 'svelte';
+	import { FolderIcon, FolderOpenOutline } from '$lib/components/icons';
 
 	export let expanded = false;
 	export let name;
diff --git a/app/src/routes/system/metrics/SystemMetrics.svelte b/app/src/routes/system/metrics/SystemMetrics.svelte
index b81d98f..f1ffcd9 100644
--- a/app/src/routes/system/metrics/SystemMetrics.svelte
+++ b/app/src/routes/system/metrics/SystemMetrics.svelte
@@ -5,9 +5,10 @@
 	import { slide } from 'svelte/transition';
 	import { cubicOut } from 'svelte/easing';
 	import { Chart, registerables } from 'chart.js';
-	import Metrics from '~icons/tabler/report-analytics';
+	
 	import { daisyColor } from '$lib/utilities';
 	import { analytics } from '$lib/stores/analytics';
+	import { Metrics } from '$lib/components/icons';
 
 	Chart.register(...registerables);
 
diff --git a/app/src/routes/system/status/SystemStatus.svelte b/app/src/routes/system/status/SystemStatus.svelte
index 0340849..8570272 100644
--- a/app/src/routes/system/status/SystemStatus.svelte
+++ b/app/src/routes/system/status/SystemStatus.svelte
@@ -8,46 +8,49 @@
 	import Spinner from '$lib/components/Spinner.svelte';
 	import { slide } from 'svelte/transition';
 	import { cubicOut } from 'svelte/easing';
-	import CPU from '~icons/tabler/cpu';
-	import CPP from '~icons/tabler/binary';
-	import Power from '~icons/tabler/reload';
-	import Sleep from '~icons/tabler/zzz';
-	import FactoryReset from '~icons/tabler/refresh-dot';
-	import Speed from '~icons/tabler/activity';
-	import Flash from '~icons/tabler/device-sd-card';
-	import Pyramid from '~icons/tabler/pyramid';
-	import Sketch from '~icons/tabler/chart-pie';
-	import Folder from '~icons/tabler/folder';
-	import Heap from '~icons/tabler/box-model';
-	import Cancel from '~icons/tabler/x';
-	import Temperature from '~icons/tabler/temperature';
-	import Health from '~icons/tabler/stethoscope';
-	import Stopwatch from '~icons/tabler/24-hours';
-	import SDK from '~icons/tabler/sdk';
+
 	import type { SystemInformation, Analytics } from '$lib/types/models';
 	import { socket } from '$lib/stores/socket';
 	import { api } from '$lib/api';
 	import { convertSeconds } from '$lib/utilities';
 
-    import { useFeatureFlags } from '$lib/stores/featureFlags';
-    
-    const features = useFeatureFlags()
+	import { useFeatureFlags } from '$lib/stores/featureFlags';
+	import {
+		Cancel,
+		Power,
+		FactoryReset,
+		Sleep,
+		Health,
+		CPU,
+		SDK,
+		CPP,
+		Speed,
+		Heap,
+		Pyramid,
+		Sketch,
+		Flash,
+		Folder,
+		Temperature,
+		Stopwatch
+	} from '$lib/components/icons';
+
+	const features = useFeatureFlags();
 
 	let systemInformation: SystemInformation;
 
 	async function getSystemStatus() {
-        const result = await api.get<SystemInformation>('/api/systemStatus');
-        if (result.isErr()){
-            console.error('Error:', result.inner);
-            return
-        }
-        systemInformation = result.inner
+		const result = await api.get<SystemInformation>('/api/systemStatus');
+		if (result.isErr()) {
+			console.error('Error:', result.inner);
+			return;
+		}
+		systemInformation = result.inner;
 		return systemInformation;
 	}
 
-    const postFactoryReset = async () => await api.post('/api/factoryReset')
-    
-    const postSleep = async () => await api.post('api/sleep')
+	const postFactoryReset = async () => await api.post('/api/factoryReset');
+
+	const postSleep = async () => await api.post('api/sleep');
 
 	onMount(() => socket.on('analytics', handleSystemData));
 
diff --git a/app/src/routes/system/update/GithubFirmwareManager.svelte b/app/src/routes/system/update/GithubFirmwareManager.svelte
index 1fdd3f6..50a744e 100644
--- a/app/src/routes/system/update/GithubFirmwareManager.svelte
+++ b/app/src/routes/system/update/GithubFirmwareManager.svelte
@@ -6,17 +6,13 @@
 	import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
 	import Spinner from '$lib/components/Spinner.svelte';
 	import SettingsCard from '$lib/components/SettingsCard.svelte';
-	import Github from '~icons/tabler/brand-github';
-	import CloudDown from '~icons/tabler/cloud-download';
-	import Cancel from '~icons/tabler/x';
-	import Prerelease from '~icons/tabler/test-pipe';
-	import Error from '~icons/tabler/circle-x';
+
 	import { compareVersions } from 'compare-versions';
 	import GithubUpdateDialog from '$lib/components/GithubUpdateDialog.svelte';
 	import InfoDialog from '$lib/components/InfoDialog.svelte';
-	import Check from '~icons/tabler/check';
 	import { api } from '$lib/api';
 	import { useFeatureFlags } from '$lib/stores';
+	import { Cancel, Check, CloudDown, Github, Prerelease } from '$lib/components/icons';
 
     const features = useFeatureFlags();
 
diff --git a/app/src/routes/system/update/UploadFirmware.svelte b/app/src/routes/system/update/UploadFirmware.svelte
index 45c4016..5c59b86 100644
--- a/app/src/routes/system/update/UploadFirmware.svelte
+++ b/app/src/routes/system/update/UploadFirmware.svelte
@@ -2,10 +2,9 @@
 	import { openModal, closeModal } from 'svelte-modals';
 	import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
 	import SettingsCard from '$lib/components/SettingsCard.svelte';
-	import OTA from '~icons/tabler/file-upload';
-	import Warning from '~icons/tabler/alert-triangle';
-	import Cancel from '~icons/tabler/x';
+
 	import { api } from '$lib/api';
+	import { Cancel, OTA, Warning } from '$lib/components/icons';
 
 	let files: FileList;
 
diff --git a/app/src/routes/user/+page.svelte b/app/src/routes/user/+page.svelte
index b5c2a0d..3a08e1c 100644
--- a/app/src/routes/user/+page.svelte
+++ b/app/src/routes/user/+page.svelte
@@ -4,23 +4,24 @@
 	import { slide } from 'svelte/transition';
 	import { cubicOut } from 'svelte/easing';
 	import { user } from '$lib/stores/user';
-	import type { userProfile } from '$lib/stores/user';
-	import { page } from '$app/stores';
 	import { notifications } from '$lib/components/toasts/notifications';
 	import InputPassword from '$lib/components/input/InputPassword.svelte';
 	import SettingsCard from '$lib/components/SettingsCard.svelte';
 	import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
 	import EditUser from './EditUser.svelte';
 	import Spinner from '$lib/components/Spinner.svelte';
-	import Delete from '~icons/tabler/trash';
-	import AddUser from '~icons/tabler/user-plus';
-	import Edit from '~icons/tabler/pencil';
-	import Admin from '~icons/tabler/key';
-	import Users from '~icons/tabler/users';
-	import Warning from '~icons/tabler/alert-triangle';
-	import Cancel from '~icons/tabler/x';
-	import Check from '~icons/tabler/check';
+
 	import { api } from '$lib/api';
+	import {
+		Cancel,
+		Check,
+		Users,
+		AddUser,
+		Admin,
+		Edit,
+		Delete,
+		Warning
+	} from '$lib/components/icons';
 
 	type userSetting = {
 		username: string;
@@ -36,30 +37,30 @@
 	let securitySettings: SecuritySettings;
 
 	async function getSecuritySettings() {
-        const result = await api.get<SecuritySettings>('/api/securitySettings')
-        if (result.isErr()){
-            console.error('Error:', result.inner);
-            return
-        }
-        securitySettings = result.inner
+		const result = await api.get<SecuritySettings>('/api/securitySettings');
+		if (result.isErr()) {
+			console.error('Error:', result.inner);
+			return;
+		}
+		securitySettings = result.inner;
 	}
 
 	async function postSecuritySettings(data: SecuritySettings) {
-        const result = await api.post<SecuritySettings>('/api/securitySettings', data)
-        if (result.isErr()){
-            console.error('Error:', result.inner);
-            notifications.error('User not authorized.', 3000);
-            return
-        }
-        securitySettings = result.inner
-        if (await validateUser()) {
-            notifications.success('Security settings updated.', 3000);
-        }
+		const result = await api.post<SecuritySettings>('/api/securitySettings', data);
+		if (result.isErr()) {
+			console.error('Error:', result.inner);
+			notifications.error('User not authorized.', 3000);
+			return;
+		}
+		securitySettings = result.inner;
+		if (await validateUser()) {
+			notifications.success('Security settings updated.', 3000);
+		}
 	}
 
 	async function validateUser() {
-        const result = await api.get('/api/verifyAuthorization')
-        if (result.isErr()) user.invalidate();
+		const result = await api.get('/api/verifyAuthorization');
+		if (result.isErr()) user.invalidate();
 		return result.isOk();
 	}
 
diff --git a/app/src/routes/user/EditUser.svelte b/app/src/routes/user/EditUser.svelte
index a6393cf..79e84e3 100644
--- a/app/src/routes/user/EditUser.svelte
+++ b/app/src/routes/user/EditUser.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-	import { onMount, onDestroy } from 'svelte';
+	import { onMount } from 'svelte';
 	import { closeModal } from 'svelte-modals';
 	import { fly } from 'svelte/transition';
 	import InputPassword from '$lib/components/input/InputPassword.svelte';
-	import Cancel from '~icons/tabler/x';
-	import Save from '~icons/tabler/device-floppy';
+	import { Cancel, Save } from '$lib/components/icons';
 
 	// provided by <Modals />
 	export let isOpen: boolean;
@@ -93,8 +92,10 @@
 					>
 					<button
 						class="btn btn-primary text-primary-content inline-flex items-center"
-						type="submit"><Save class="mr-2 h-5 w-5" /><span>Save</span></button
-					>
+						type="submit"
+						><Save class="mr-2 h-5 w-5" />
+						Save
+					</button>
 				</div>
 			</form>
 		</div>
diff --git a/app/src/routes/wifi/ap/Accesspoint.svelte b/app/src/routes/wifi/ap/Accesspoint.svelte
index fc0e116..e749fcf 100644
--- a/app/src/routes/wifi/ap/Accesspoint.svelte
+++ b/app/src/routes/wifi/ap/Accesspoint.svelte
@@ -8,13 +8,10 @@
 	import { page } from '$app/stores';
 	import { notifications } from '$lib/components/toasts/notifications';
 	import Spinner from '$lib/components/Spinner.svelte';
-	import AP from '~icons/tabler/access-point';
-	import MAC from '~icons/tabler/dna-2';
-	import Home from '~icons/tabler/home';
-	import Devices from '~icons/tabler/devices';
 	import type { ApSettings, ApStatus } from '$lib/types/models';
 	import { api } from '$lib/api';
 	import { useFeatureFlags } from '$lib/stores';
+	import { AP, Devices, Home, MAC } from '$lib/components/icons';
 
     const features = useFeatureFlags();
 
diff --git a/app/src/routes/wifi/sta/Scan.svelte b/app/src/routes/wifi/sta/Scan.svelte
index 496d085..2dc019d 100644
--- a/app/src/routes/wifi/sta/Scan.svelte
+++ b/app/src/routes/wifi/sta/Scan.svelte
@@ -2,15 +2,12 @@
 	import { closeModal } from 'svelte-modals';
 	import { focusTrap } from 'svelte-focus-trap';
 	import { fly } from 'svelte/transition';
-	import Network from '~icons/tabler/router';
-	import AP from '~icons/tabler/access-point';
-	import Cancel from '~icons/tabler/x';
-	import Reload from '~icons/tabler/reload';
+	
 	import { onMount, onDestroy } from 'svelte';
 	import RssiIndicator from '$lib/components/statusbar/RSSIIndicator.svelte';
-	import type { NetworkItem } from '$lib/types/models';
+	import type { NetworkItem, NetworkList } from '$lib/types/models';
 	import { api } from '$lib/api';
-	import type { NetworkList } from '$lib/types/models';
+	import { AP, Network, Reload, Cancel } from '$lib/components/icons';
 
 	// provided by <Modals />
 	export let isOpen: boolean;
@@ -115,8 +112,7 @@
 									<div class="flex-grow" />
 									<RssiIndicator
 										showDBm={true}
-										rssi_dbm={network.rssi}
-										class="text-base-content h-10 w-10"
+										rssi={network.rssi}
 									/>
 								</div>
 							</li>
diff --git a/app/src/routes/wifi/sta/Wifi.svelte b/app/src/routes/wifi/sta/Wifi.svelte
index 8b5b07d..449314c 100644
--- a/app/src/routes/wifi/sta/Wifi.svelte
+++ b/app/src/routes/wifi/sta/Wifi.svelte
@@ -14,29 +14,31 @@
 	import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
 	import ScanNetworks from './Scan.svelte';
 	import Spinner from '$lib/components/Spinner.svelte';
-	import AP from '~icons/tabler/access-point';
-	import Router from '~icons/tabler/router';
-	import MAC from '~icons/tabler/dna-2';
-	import Home from '~icons/tabler/home';
-	import WiFi from '~icons/tabler/wifi';
-	import SSID from '~icons/tabler/router';
-	import Down from '~icons/tabler/chevron-down';
-	import DNS from '~icons/tabler/address-book';
-	import Gateway from '~icons/tabler/torii';
-	import Subnet from '~icons/tabler/grid-dots';
-	import Channel from '~icons/tabler/antenna';
-	import Scan from '~icons/tabler/radar-2';
-	import Add from '~icons/tabler/circle-plus';
-	import Edit from '~icons/tabler/pencil';
-	import Delete from '~icons/tabler/trash';
-	import Cancel from '~icons/tabler/x';
-	import Check from '~icons/tabler/check';
 	import InfoDialog from '$lib/components/InfoDialog.svelte';
 	import type { KnownNetworkItem, WifiSettings, WifiStatus } from '$lib/types/models';
 	import { socket, useFeatureFlags } from '$lib/stores';
 	import { api } from '$lib/api';
+	import {
+		Cancel,
+		Delete,
+		Check,
+		Router,
+		AP,
+		SSID,
+		Home,
+		WiFi,
+		Down,
+		MAC,
+		Channel,
+		Gateway,
+		Subnet,
+		DNS,
+		Add,
+		Scan,
+		Edit
+	} from '$lib/components/icons';
 
-    const features = useFeatureFlags();
+	const features = useFeatureFlags();
 
 	let networkEditable: KnownNetworkItem = {
 		ssid: '',
@@ -49,7 +51,7 @@
 		dns_ip_2: undefined
 	};
 
-    let static_ip_config = false
+	let static_ip_config = false;
 
 	let newNetwork: boolean = true;
 	let showNetworkEditor: boolean = false;
@@ -75,44 +77,44 @@
 	let formErrorhostname = false;
 
 	async function getWifiStatus() {
-        const result = await api.get<WifiStatus>('/api/wifiStatus');
-            if (result.isErr()){
-                console.error(`Error occurred while fetching: `, result.inner);
-                return
-            }
-            wifiStatus = result.inner
+		const result = await api.get<WifiStatus>('/api/wifiStatus');
+		if (result.isErr()) {
+			console.error(`Error occurred while fetching: `, result.inner);
+			return;
+		}
+		wifiStatus = result.inner;
 		return wifiStatus;
 	}
 
 	async function getWifiSettings() {
-        const result = await api.get<WifiSettings>('/api/wifiSettings');
-        if (result.isErr()){
-            console.error(`Error occurred while fetching: `, result.inner);
-            return
-        }
-        wifiSettings = result.inner
-        dndNetworkList = wifiSettings.wifi_networks;
+		const result = await api.get<WifiSettings>('/api/wifiSettings');
+		if (result.isErr()) {
+			console.error(`Error occurred while fetching: `, result.inner);
+			return;
+		}
+		wifiSettings = result.inner;
+		dndNetworkList = wifiSettings.wifi_networks;
 		return wifiSettings;
 	}
 
 	onDestroy(() => socket.off('WiFiSettings'));
 
 	onMount(() => {
-        socket.on<WifiSettings>('WiFiSettings', (data) => {
-            wifiSettings = data
-            dndNetworkList = wifiSettings.wifi_networks
-        })
+		socket.on<WifiSettings>('WiFiSettings', (data) => {
+			wifiSettings = data;
+			dndNetworkList = wifiSettings.wifi_networks;
+		});
 	});
 
 	async function postWiFiSettings(data: WifiSettings) {
-        const result = await api.post<WifiSettings>('/api/wifiSettings', data);
-        if (result.isErr()){
-            console.error(`Error occurred while fetching: `, result.inner);
-            notifications.error('User not authorized.', 3000);
-            return
-        }
-        wifiSettings = result.inner
-        notifications.success('Wi-Fi settings updated.', 3000);
+		const result = await api.post<WifiSettings>('/api/wifiSettings', data);
+		if (result.isErr()) {
+			console.error(`Error occurred while fetching: `, result.inner);
+			notifications.error('User not authorized.', 3000);
+			return;
+		}
+		wifiSettings = result.inner;
+		notifications.success('Wi-Fi settings updated.', 3000);
 	}
 
 	function validateHostName() {
@@ -139,7 +141,7 @@
 			formErrors.ssid = false;
 		}
 
-        networkEditable.static_ip_config = static_ip_config;
+		networkEditable.static_ip_config = static_ip_config;
 
 		if (networkEditable.static_ip_config) {
 			// RegEx for IPv4
@@ -736,4 +738,4 @@
 			{/await}
 		</div>
 	{/if}
-</SettingsCard>
\ No newline at end of file
+</SettingsCard>