chore: migrate to UI lib icon (#22096)

web/src/lib/components/assets/thumbnail/image-thumbnail.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import BrokenAsset from '$lib/components/assets/broken-asset.svelte';
-  import Icon from '$lib/elements/Icon.svelte';
   import { cancelImageUrl } from '$lib/utils/sw-messaging';
+  import { Icon } from '@immich/ui';
   import { mdiEyeOffOutline } from '@mdi/js';
   import type { ActionReturn } from 'svelte/action';
   import type { ClassValue } from 'svelte/elements';
@@ -97,6 +97,7 @@
 
 {#if hidden}
   <div class="absolute start-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] transform">
-    <Icon {title} path={mdiEyeOffOutline} size="2em" class={hiddenIconClass} />
+    <!-- TODO fix `title` type -->
+    <Icon title={title ?? undefined} icon={mdiEyeOffOutline} size="2em" class={hiddenIconClass} />
   </div>
 {/if}

web/src/lib/components/assets/thumbnail/thumbnail.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { ProjectionType } from '$lib/constants';
-  import Icon from '$lib/elements/Icon.svelte';
   import { locale, playVideoThumbnailOnHover } from '$lib/stores/preferences.store';
   import { getAssetPlaybackUrl, getAssetThumbnailUrl } from '$lib/utils';
   import { timeToSeconds } from '$lib/utils/date-time';
@@ -23,6 +22,7 @@
   import { moveFocus } from '$lib/utils/focus-util';
   import { currentUrlReplaceAssetId } from '$lib/utils/navigation';
   import { TUNABLES } from '$lib/utils/tunables';
+  import { Icon } from '@immich/ui';
   import { onMount } from 'svelte';
   import type { ClassValue } from 'svelte/elements';
   import { fade } from 'svelte/transition';
@@ -263,20 +263,20 @@
         <!-- Favorite asset star -->
         {#if !authManager.isSharedLink && asset.isFavorite}
           <div class="absolute bottom-2 start-2">
-            <Icon path={mdiHeart} size="24" class="text-white" />
+            <Icon icon={mdiHeart} size="24" class="text-white" />
           </div>
         {/if}
 
         {#if !authManager.isSharedLink && showArchiveIcon && asset.visibility === AssetVisibility.Archive}
           <div class={['absolute start-2', asset.isFavorite ? 'bottom-10' : 'bottom-2']}>
-            <Icon path={mdiArchiveArrowDownOutline} size="24" class="text-white" />
+            <Icon icon={mdiArchiveArrowDownOutline} size="24" class="text-white" />
           </div>
         {/if}
 
         {#if asset.isImage && asset.projectionType === ProjectionType.EQUIRECTANGULAR}
           <div class="absolute end-0 top-0 flex place-items-center gap-1 text-xs font-medium text-white">
             <span class="pe-2 pt-2">
-              <Icon path={mdiRotate360} size="24" />
+              <Icon icon={mdiRotate360} size="24" />
             </span>
           </div>
         {/if}
@@ -291,7 +291,7 @@
           >
             <span class="pe-2 pt-2 flex place-items-center gap-1">
               <p>{asset.stack.assetCount.toLocaleString($locale)}</p>
-              <Icon path={mdiCameraBurst} size="24" />
+              <Icon icon={mdiCameraBurst} size="24" />
             </span>
           </div>
         {/if}
@@ -378,13 +378,13 @@
         {disabled}
       >
         {#if disabled}
-          <Icon path={mdiCheckCircle} size="24" class="text-zinc-800" />
+          <Icon icon={mdiCheckCircle} size="24" class="text-zinc-800" />
         {:else if selected}
           <div class="rounded-full bg-[#D9DCEF] dark:bg-[#232932]">
-            <Icon path={mdiCheckCircle} size="24" class="text-primary" />
+            <Icon icon={mdiCheckCircle} size="24" class="text-primary" />
           </div>
         {:else}
-          <Icon path={mdiCheckCircle} size="24" class="text-white/80 hover:text-white" />
+          <Icon icon={mdiCheckCircle} size="24" class="text-white/80 hover:text-white" />
         {/if}
       </button>
     {/if}

web/src/lib/components/assets/thumbnail/video-thumbnail.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
-  import Icon from '$lib/elements/Icon.svelte';
+  import { Icon } from '@immich/ui';
   import { mdiAlertCircleOutline, mdiPauseCircleOutline, mdiPlayCircleOutline } from '@mdi/js';
   import { Duration } from 'luxon';
 
@@ -105,12 +105,12 @@
       {#if loading}
         <LoadingSpinner />
       {:else if error}
-        <Icon path={mdiAlertCircleOutline} size="24" class="text-red-600" />
+        <Icon icon={mdiAlertCircleOutline} size="24" class="text-red-600" />
       {:else}
-        <Icon path={pauseIcon} size="24" />
+        <Icon icon={pauseIcon} size="24" />
       {/if}
     {:else}
-      <Icon path={playIcon} size="24" />
+      <Icon icon={playIcon} size="24" />
     {/if}
   </span>
 </div>