refactor(web): material icons (#4636)

web/src/lib/components/shared-components/side-bar/admin-side-bar.svelte

@@ -4,32 +4,28 @@
   import SideBarSection from '$lib/components/shared-components/side-bar/side-bar-section.svelte';
   import StatusBox from '$lib/components/shared-components/status-box.svelte';
   import { AppRoute } from '$lib/constants';
-  import AccountMultipleOutline from 'svelte-material-icons/AccountMultipleOutline.svelte';
-  import Cog from 'svelte-material-icons/Cog.svelte';
-  import Server from 'svelte-material-icons/Server.svelte';
-  import Tools from 'svelte-material-icons/Tools.svelte';
-  import Sync from 'svelte-material-icons/Sync.svelte';
+  import { mdiAccountMultipleOutline, mdiCog, mdiServer, mdiSync, mdiTools } from '@mdi/js';
 </script>
 
 <SideBarSection>
   <a data-sveltekit-preload-data="hover" href={AppRoute.ADMIN_USER_MANAGEMENT} draggable="false">
     <SideBarButton
       title="Users"
-      logo={AccountMultipleOutline}
+      icon={mdiAccountMultipleOutline}
       isSelected={$page.route.id === AppRoute.ADMIN_USER_MANAGEMENT}
     />
   </a>
   <a data-sveltekit-preload-data="hover" href={AppRoute.ADMIN_JOBS} draggable="false">
-    <SideBarButton title="Jobs" logo={Sync} isSelected={$page.route.id === AppRoute.ADMIN_JOBS} />
+    <SideBarButton title="Jobs" icon={mdiSync} isSelected={$page.route.id === AppRoute.ADMIN_JOBS} />
   </a>
   <a data-sveltekit-preload-data="hover" href={AppRoute.ADMIN_SETTINGS} draggable="false">
-    <SideBarButton title="Settings" logo={Cog} isSelected={$page.route.id === AppRoute.ADMIN_SETTINGS} />
+    <SideBarButton title="Settings" icon={mdiCog} isSelected={$page.route.id === AppRoute.ADMIN_SETTINGS} />
   </a>
   <a data-sveltekit-preload-data="hover" href={AppRoute.ADMIN_STATS} draggable="false">
-    <SideBarButton title="Server Stats" logo={Server} isSelected={$page.route.id === AppRoute.ADMIN_STATS} />
+    <SideBarButton title="Server Stats" icon={mdiServer} isSelected={$page.route.id === AppRoute.ADMIN_STATS} />
   </a>
   <a data-sveltekit-preload-data="hover" href={AppRoute.ADMIN_REPAIR} draggable="false">
-    <SideBarButton title="Repair" logo={Tools} isSelected={$page.route.id === AppRoute.ADMIN_REPAIR} />
+    <SideBarButton title="Repair" icon={mdiTools} isSelected={$page.route.id === AppRoute.ADMIN_REPAIR} />
   </a>
   <div class="mb-6 mt-auto">
     <StatusBox />

web/src/lib/components/shared-components/side-bar/side-bar-button.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-  import type Icon from 'svelte-material-icons/AbTesting.svelte';
-  import InformationOutline from 'svelte-material-icons/InformationOutline.svelte';
-  import { fade } from 'svelte/transition';
   import { createEventDispatcher } from 'svelte';
+  import { fade } from 'svelte/transition';
+  import Icon from '$lib/components/elements/icon.svelte';
+  import { mdiInformationOutline } from '@mdi/js';
 
   export let title: string;
-  export let logo: typeof Icon;
+  export let icon: string;
   export let isSelected: boolean;
   export let flippedLogo = false;
 
@@ -27,7 +27,7 @@
   "
 >
   <div class="flex w-full place-items-center gap-4 overflow-hidden truncate">
-    <svelte:component this={logo} size="1.5em" class="shrink-0 {flippedLogo ? '-scale-x-100' : ''}" />
+    <Icon path={icon} size="1.5em" class="shrink-0" flipped={flippedLogo} />
     <p class="text-sm font-medium">{title}</p>
   </div>
 
@@ -41,7 +41,7 @@
         on:mouseleave={() => (showMoreInformation = false)}
       >
         <div class="p-1 text-gray-600 hover:cursor-help dark:text-gray-400">
-          <InformationOutline />
+          <Icon path={mdiInformationOutline} />
         </div>
 
         {#if showMoreInformation}

web/src/lib/components/shared-components/side-bar/side-bar.svelte

@@ -1,25 +1,27 @@
 <script lang="ts">
   import { page } from '$app/stores';
+  import { locale, sidebarSettings } from '$lib/stores/preferences.store';
+  import { featureFlags } from '$lib/stores/server-config.store';
   import { AssetApiGetAssetStatsRequest, api } from '@api';
-  import AccountMultipleOutline from 'svelte-material-icons/AccountMultipleOutline.svelte';
-  import AccountMultiple from 'svelte-material-icons/AccountMultiple.svelte';
-  import ImageAlbum from 'svelte-material-icons/ImageAlbum.svelte';
-  import ImageMultipleOutline from 'svelte-material-icons/ImageMultipleOutline.svelte';
-  import ImageMultiple from 'svelte-material-icons/ImageMultiple.svelte';
-  import ArchiveArrowDownOutline from 'svelte-material-icons/ArchiveArrowDownOutline.svelte';
-  import Magnify from 'svelte-material-icons/Magnify.svelte';
-  import Map from 'svelte-material-icons/Map.svelte';
-  import Account from 'svelte-material-icons/Account.svelte';
-  import TrashCanOutline from 'svelte-material-icons/TrashCanOutline.svelte';
-  import HeartMultipleOutline from 'svelte-material-icons/HeartMultipleOutline.svelte';
-  import HeartMultiple from 'svelte-material-icons/HeartMultiple.svelte';
+  import {
+    mdiAccount,
+    mdiAccountMultiple,
+    mdiAccountMultipleOutline,
+    mdiArchiveArrowDownOutline,
+    mdiHeartMultiple,
+    mdiHeartMultipleOutline,
+    mdiImageAlbum,
+    mdiImageMultiple,
+    mdiImageMultipleOutline,
+    mdiMagnify,
+    mdiMap,
+    mdiTrashCanOutline,
+  } from '@mdi/js';
   import { AppRoute } from '../../../constants';
   import LoadingSpinner from '../loading-spinner.svelte';
   import StatusBox from '../status-box.svelte';
   import SideBarButton from './side-bar-button.svelte';
-  import { locale, sidebarSettings } from '$lib/stores/preferences.store';
   import SideBarSection from './side-bar-section.svelte';
-  import { featureFlags } from '$lib/stores/server-config.store';
 
   const getStats = async (dto: AssetApiGetAssetStatsRequest) => {
     const { data: stats } = await api.assetApi.getAssetStats(dto);
@@ -45,7 +47,7 @@
   <a data-sveltekit-preload-data="hover" data-sveltekit-noscroll href={AppRoute.PHOTOS} draggable="false">
     <SideBarButton
       title="Photos"
-      logo={isPhotosSelected ? ImageMultiple : ImageMultipleOutline}
+      icon={isPhotosSelected ? mdiImageMultiple : mdiImageMultipleOutline}
       isSelected={isPhotosSelected}
     >
       <svelte:fragment slot="moreInformation">
@@ -62,23 +64,23 @@
   </a>
   {#if $featureFlags.search}
     <a data-sveltekit-preload-data="hover" data-sveltekit-noscroll href={AppRoute.EXPLORE} draggable="false">
-      <SideBarButton title="Explore" logo={Magnify} isSelected={$page.route.id === '/(user)/explore'} />
+      <SideBarButton title="Explore" icon={mdiMagnify} isSelected={$page.route.id === '/(user)/explore'} />
     </a>
   {/if}
   {#if $featureFlags.map}
     <a data-sveltekit-preload-data="hover" href={AppRoute.MAP} draggable="false">
-      <SideBarButton title="Map" logo={Map} isSelected={$page.route.id === '/(user)/map'} />
+      <SideBarButton title="Map" icon={mdiMap} isSelected={$page.route.id === '/(user)/map'} />
     </a>
   {/if}
   {#if $sidebarSettings.people}
     <a data-sveltekit-preload-data="hover" href={AppRoute.PEOPLE} draggable="false">
-      <SideBarButton title="People" logo={Account} isSelected={$page.route.id === '/(user)/people'} />
+      <SideBarButton title="People" icon={mdiAccount} isSelected={$page.route.id === '/(user)/people'} />
     </a>
   {/if}
   <a data-sveltekit-preload-data="hover" href={AppRoute.SHARING} draggable="false">
     <SideBarButton
       title="Sharing"
-      logo={isSharingSelected ? AccountMultiple : AccountMultipleOutline}
+      icon={isSharingSelected ? mdiAccountMultiple : mdiAccountMultipleOutline}
       isSelected={isSharingSelected}
     >
       <svelte:fragment slot="moreInformation">
@@ -100,7 +102,7 @@
   <a data-sveltekit-preload-data="hover" href={AppRoute.FAVORITES} draggable="false">
     <SideBarButton
       title="Favorites"
-      logo={isFavoritesSelected ? HeartMultiple : HeartMultipleOutline}
+      icon={isFavoritesSelected ? mdiHeartMultiple : mdiHeartMultipleOutline}
       isSelected={isFavoritesSelected}
     >
       <svelte:fragment slot="moreInformation">
@@ -116,7 +118,12 @@
     </SideBarButton>
   </a>
   <a data-sveltekit-preload-data="hover" href={AppRoute.ALBUMS} draggable="false">
-    <SideBarButton title="Albums" logo={ImageAlbum} flippedLogo={true} isSelected={$page.route.id === '/(user)/albums'}>
+    <SideBarButton
+      title="Albums"
+      icon={mdiImageAlbum}
+      flippedLogo={true}
+      isSelected={$page.route.id === '/(user)/albums'}
+    >
       <svelte:fragment slot="moreInformation">
         {#await getAlbumCount()}
           <LoadingSpinner />
@@ -129,7 +136,7 @@
     </SideBarButton>
   </a>
   <a data-sveltekit-preload-data="hover" href={AppRoute.ARCHIVE} draggable="false">
-    <SideBarButton title="Archive" logo={ArchiveArrowDownOutline} isSelected={$page.route.id === '/(user)/archive'}>
+    <SideBarButton title="Archive" icon={mdiArchiveArrowDownOutline} isSelected={$page.route.id === '/(user)/archive'}>
       <svelte:fragment slot="moreInformation">
         {#await getStats({ isArchived: true })}
           <LoadingSpinner />
@@ -145,7 +152,7 @@
 
   {#if $featureFlags.trash}
     <a data-sveltekit-preload-data="hover" href={AppRoute.TRASH} draggable="false">
-      <SideBarButton title="Trash" logo={TrashCanOutline} isSelected={isTrashSelected}>
+      <SideBarButton title="Trash" icon={mdiTrashCanOutline} isSelected={isTrashSelected}>
         <svelte:fragment slot="moreInformation">
           {#await getStats({ isTrashed: true })}
             <LoadingSpinner />