chore: migrate to UI lib icon (#22096)

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

@@ -3,7 +3,6 @@
   import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
   import SupporterBadge from '$lib/components/shared-components/side-bar/supporter-badge.svelte';
   import { AppRoute } from '$lib/constants';
-  import Icon from '$lib/elements/Icon.svelte';
   import Portal from '$lib/elements/Portal.svelte';
   import PurchaseModal from '$lib/modals/PurchaseModal.svelte';
   import { purchaseStore } from '$lib/stores/purchase.store';
@@ -12,7 +11,7 @@
   import { handleError } from '$lib/utils/handle-error';
   import { getButtonVisibility } from '$lib/utils/purchase-utils';
   import { updateMyPreferences } from '@immich/sdk';
-  import { Button, IconButton, modalManager } from '@immich/ui';
+  import { Button, Icon, IconButton, modalManager } from '@immich/ui';
   import { mdiClose, mdiInformationOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import { SvelteDate } from 'svelte/reactivity';
@@ -104,7 +103,7 @@
 
         <div>
           <Icon
-            path={mdiInformationOutline}
+            icon={mdiInformationOutline}
             class="hidden sidebar:flex text-immich-primary dark:text-immich-dark-primary font-medium"
             size="18"
           />

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

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import Icon from '$lib/elements/Icon.svelte';
   import ServerAboutModal from '$lib/modals/ServerAboutModal.svelte';
   import { userInteraction } from '$lib/stores/user.svelte';
   import { websocketStore } from '$lib/stores/websocket';
@@ -10,7 +9,7 @@
     type ServerAboutResponseDto,
     type ServerVersionHistoryResponseDto,
   } from '@immich/sdk';
-  import { modalManager } from '@immich/ui';
+  import { Icon, modalManager } from '@immich/ui';
   import { mdiAlert } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -60,7 +59,7 @@
         class="dark:text-immich-gray flex gap-1"
       >
         {#if isMain}
-          <Icon path={mdiAlert} size="1.5em" color="#ffcc4d" /> {info?.sourceRef}
+          <Icon icon={mdiAlert} size="1.5em" color="#ffcc4d" /> {info?.sourceRef}
         {:else}
           {version}
         {/if}

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

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { page } from '$app/state';
-  import Icon from '$lib/elements/Icon.svelte';
+  import { Icon } from '@immich/ui';
   import { mdiChevronDown, mdiChevronLeft } from '@mdi/js';
   import type { Snippet } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -42,11 +42,11 @@
         onclick={() => (dropdownOpen = !dropdownOpen)}
       >
         <Icon
-          path={dropdownOpen ? mdiChevronDown : mdiChevronLeft}
+          icon={dropdownOpen ? mdiChevronDown : mdiChevronLeft}
           size="1em"
           class="shrink-0 delay-100 duration-100 "
           flipped={flippedLogo}
-          ariaHidden
+          aria-hidden
         />
       </button>
     </span>
@@ -62,7 +62,7 @@
       : ''}"
   >
     <div class="flex w-full place-items-center gap-4 ps-5 overflow-hidden truncate">
-      <Icon path={icon} size="1.5em" class="shrink-0" flipped={flippedLogo} ariaHidden />
+      <Icon {icon} size="1.5em" class="shrink-0" flipped={flippedLogo} aria-hidden />
       <span class="text-sm font-medium">{title}</span>
     </div>
     <div></div>