🍧 Collects all icons

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();
 

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;

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;

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;

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>

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">

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',

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';

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 = '';

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>

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}

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 />
 

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>

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();
 

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}>

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>

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();
 

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">

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>

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();
 

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">

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',