refactor(web): material icons (#4636)

web/src/lib/components/admin-page/jobs/job-tile.svelte

@@ -1,25 +1,27 @@
 <script lang="ts">
-  import type Icon from 'svelte-material-icons/AbTesting.svelte';
-  import SelectionSearch from 'svelte-material-icons/SelectionSearch.svelte';
-  import Play from 'svelte-material-icons/Play.svelte';
-  import Pause from 'svelte-material-icons/Pause.svelte';
-  import FastForward from 'svelte-material-icons/FastForward.svelte';
-  import AllInclusive from 'svelte-material-icons/AllInclusive.svelte';
-  import Close from 'svelte-material-icons/Close.svelte';
-  import AlertCircle from 'svelte-material-icons/AlertCircle.svelte';
   import { locale } from '$lib/stores/preferences.store';
   import { createEventDispatcher } from 'svelte';
   import { JobCommand, JobCommandDto, JobCountsDto, QueueStatusDto } from '@api';
   import Badge from '$lib/components/elements/badge.svelte';
   import JobTileButton from './job-tile-button.svelte';
   import JobTileStatus from './job-tile-status.svelte';
+  import Icon from '$lib/components/elements/icon.svelte';
+  import {
+    mdiAlertCircle,
+    mdiAllInclusive,
+    mdiClose,
+    mdiFastForward,
+    mdiPause,
+    mdiPlay,
+    mdiSelectionSearch,
+  } from '@mdi/js';
 
   export let title: string;
   export let subtitle: string | undefined = undefined;
   export let jobCounts: JobCountsDto;
   export let queueStatus: QueueStatusDto;
   export let allowForceCommand = true;
-  export let icon: typeof Icon;
+  export let icon: string;
   export let disabled = false;
 
   export let allText: string;
@@ -47,7 +49,7 @@
     <div class="flex flex-col gap-2 p-5 sm:p-7 md:p-9">
       <div class="flex items-center gap-4 text-xl font-semibold text-immich-primary dark:text-immich-dark-primary">
         <span class="flex items-center gap-2">
-          <svelte:component this={icon} size="1.25em" class="hidden shrink-0 sm:block" />
+          <Icon path={icon} size="1.25em" class="hidden shrink-0 sm:block" />
           {title.toUpperCase()}
         </span>
         <div class="flex gap-2">
@@ -102,12 +104,12 @@
         color="light-gray"
         on:click={() => dispatch('command', { command: JobCommand.Start, force: false })}
       >
-        <AlertCircle size="36" /> DISABLED
+        <Icon path={mdiAlertCircle} size="36" /> DISABLED
       </JobTileButton>
     {:else if !isIdle}
       {#if waitingCount > 0}
         <JobTileButton color="gray" on:click={() => dispatch('command', { command: JobCommand.Empty, force: false })}>
-          <Close size="24" /> CLEAR
+          <Icon path={mdiClose} size="24" /> CLEAR
         </JobTileButton>
       {/if}
       {#if queueStatus.isPaused}
@@ -117,26 +119,26 @@
           on:click={() => dispatch('command', { command: JobCommand.Resume, force: false })}
         >
           <!-- size property is not reactive, so have to use width and height -->
-          <FastForward width={size} height={size} /> RESUME
+          <Icon path={mdiFastForward} {size} /> RESUME
         </JobTileButton>
       {:else}
         <JobTileButton
           color="light-gray"
           on:click={() => dispatch('command', { command: JobCommand.Pause, force: false })}
         >
-          <Pause size="24" /> PAUSE
+          <Icon path={mdiPause} size="24" /> PAUSE
         </JobTileButton>
       {/if}
     {:else if allowForceCommand}
       <JobTileButton color="gray" on:click={() => dispatch('command', { command: JobCommand.Start, force: true })}>
-        <AllInclusive size="24" />
+        <Icon path={mdiAllInclusive} size="24" />
         {allText}
       </JobTileButton>
       <JobTileButton
         color="light-gray"
         on:click={() => dispatch('command', { command: JobCommand.Start, force: false })}
       >
-        <SelectionSearch size="24" />
+        <Icon path={mdiSelectionSearch} size="24" />
         {missingText}
       </JobTileButton>
     {:else}
@@ -144,7 +146,7 @@
         color="light-gray"
         on:click={() => dispatch('command', { command: JobCommand.Start, force: false })}
       >
-        <Play size="48" /> START
+        <Icon path={mdiPlay} size="48" /> START
       </JobTileButton>
     {/if}
   </div>

web/src/lib/components/admin-page/jobs/jobs-panel.svelte

@@ -7,16 +7,17 @@
   import { handleError } from '$lib/utils/handle-error';
   import { AllJobStatusResponseDto, api, JobCommand, JobCommandDto, JobName } from '@api';
   import type { ComponentType } from 'svelte';
-  import type Icon from 'svelte-material-icons/DotsVertical.svelte';
-  import FaceRecognition from 'svelte-material-icons/FaceRecognition.svelte';
-  import FileJpgBox from 'svelte-material-icons/FileJpgBox.svelte';
-  import FileXmlBox from 'svelte-material-icons/FileXmlBox.svelte';
-  import LibraryShelves from 'svelte-material-icons/LibraryShelves.svelte';
-  import FolderMove from 'svelte-material-icons/FolderMove.svelte';
-  import Table from 'svelte-material-icons/Table.svelte';
-  import TagMultiple from 'svelte-material-icons/TagMultiple.svelte';
-  import VectorCircle from 'svelte-material-icons/VectorCircle.svelte';
-  import Video from 'svelte-material-icons/Video.svelte';
+  import {
+    mdiFaceRecognition,
+    mdiFileJpgBox,
+    mdiFileXmlBox,
+    mdiFolderMove,
+    mdiLibraryShelves,
+    mdiTable,
+    mdiTagMultiple,
+    mdiVectorCircle,
+    mdiVideo,
+  } from '@mdi/js';
   import ConfirmDialogue from '../../shared-components/confirm-dialogue.svelte';
   import JobTile from './job-tile.svelte';
   import StorageMigrationDescription from './storage-migration-description.svelte';
@@ -29,7 +30,7 @@
     allText?: string;
     missingText?: string;
     disabled?: boolean;
-    icon: typeof Icon;
+    icon: string;
     allowForceCommand?: boolean;
     component?: ComponentType;
     handleCommand?: (jobId: JobName, jobCommand: JobCommandDto) => Promise<void>;
@@ -53,17 +54,17 @@
 
   $: jobDetails = <Partial<Record<JobName, JobDetails>>>{
     [JobName.ThumbnailGeneration]: {
-      icon: FileJpgBox,
+      icon: mdiFileJpgBox,
       title: api.getJobName(JobName.ThumbnailGeneration),
       subtitle: 'Regenerate JPEG and WebP thumbnails',
     },
     [JobName.MetadataExtraction]: {
-      icon: Table,
+      icon: mdiTable,
       title: api.getJobName(JobName.MetadataExtraction),
       subtitle: 'Extract metadata information i.e. GPS, resolution...etc',
     },
     [JobName.Library]: {
-      icon: LibraryShelves,
+      icon: mdiLibraryShelves,
       title: api.getJobName(JobName.Library),
       subtitle: 'Perform library tasks',
       allText: 'ALL',
@@ -71,44 +72,44 @@
     },
     [JobName.Sidecar]: {
       title: api.getJobName(JobName.Sidecar),
-      icon: FileXmlBox,
+      icon: mdiFileXmlBox,
       subtitle: 'Discover or synchronize sidecar metadata from the filesystem',
       allText: 'SYNC',
       missingText: 'DISCOVER',
       disabled: !$featureFlags.sidecar,
     },
     [JobName.ObjectTagging]: {
-      icon: TagMultiple,
+      icon: mdiTagMultiple,
       title: api.getJobName(JobName.ObjectTagging),
       subtitle: 'Run machine learning to tag objects\nNote that some assets may not have any objects detected',
       disabled: !$featureFlags.tagImage,
     },
     [JobName.ClipEncoding]: {
-      icon: VectorCircle,
+      icon: mdiVectorCircle,
       title: api.getJobName(JobName.ClipEncoding),
       subtitle: 'Run machine learning to generate clip embeddings',
       disabled: !$featureFlags.clipEncode,
     },
     [JobName.RecognizeFaces]: {
-      icon: FaceRecognition,
+      icon: mdiFaceRecognition,
       title: api.getJobName(JobName.RecognizeFaces),
       subtitle: 'Run machine learning to recognize faces',
       handleCommand: handleFaceCommand,
       disabled: !$featureFlags.facialRecognition,
     },
     [JobName.VideoConversion]: {
-      icon: Video,
+      icon: mdiVideo,
       title: api.getJobName(JobName.VideoConversion),
       subtitle: 'Transcode videos not in the desired format',
     },
     [JobName.StorageTemplateMigration]: {
-      icon: FolderMove,
+      icon: mdiFolderMove,
       title: api.getJobName(JobName.StorageTemplateMigration),
       allowForceCommand: false,
       component: StorageMigrationDescription,
     },
     [JobName.Migration]: {
-      icon: FolderMove,
+      icon: mdiFolderMove,
       title: api.getJobName(JobName.Migration),
       subtitle: 'Migrate thumbnails for assets and faces to the latest folder structure',
       allowForceCommand: false,