chore: migrate to UI lib icon (#22096)

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

@@ -1,9 +1,8 @@
 <script lang="ts">
   import Badge from '$lib/elements/Badge.svelte';
-  import Icon from '$lib/elements/Icon.svelte';
   import { locale } from '$lib/stores/preferences.store';
   import { JobCommand, type JobCommandDto, type JobCountsDto, type QueueStatusDto } from '@immich/sdk';
-  import { IconButton } from '@immich/ui';
+  import { Icon, IconButton } from '@immich/ui';
   import {
     mdiAlertCircle,
     mdiAllInclusive,
@@ -66,7 +65,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">
-          <Icon path={icon} size="1.25em" class="hidden shrink-0 sm:block" />
+          <Icon {icon} size="1.25em" class="hidden shrink-0 sm:block" />
           <span class="uppercase">{title}</span>
         </span>
         <div class="flex gap-2">
@@ -136,7 +135,7 @@
         color="light-gray"
         onClick={() => onCommand({ command: JobCommand.Start, force: false })}
       >
-        <Icon path={mdiAlertCircle} size="36" />
+        <Icon icon={mdiAlertCircle} size="36" />
         <span class="uppercase">{$t('disabled')}</span>
       </JobTileButton>
     {/if}
@@ -144,7 +143,7 @@
     {#if !disabled && !isIdle}
       {#if waitingCount > 0}
         <JobTileButton color="gray" onClick={() => onCommand({ command: JobCommand.Empty, force: false })}>
-          <Icon path={mdiClose} size="24" />
+          <Icon icon={mdiClose} size="24" />
           <span class="uppercase">{$t('clear')}</span>
         </JobTileButton>
       {/if}
@@ -152,12 +151,12 @@
         {@const size = waitingCount > 0 ? '24' : '48'}
         <JobTileButton color="light-gray" onClick={() => onCommand({ command: JobCommand.Resume, force: false })}>
           <!-- size property is not reactive, so have to use width and height -->
-          <Icon path={mdiFastForward} {size} />
+          <Icon icon={mdiFastForward} {size} />
           <span class="uppercase">{$t('resume')}</span>
         </JobTileButton>
       {:else}
         <JobTileButton color="light-gray" onClick={() => onCommand({ command: JobCommand.Pause, force: false })}>
-          <Icon path={mdiPause} size="24" />
+          <Icon icon={mdiPause} size="24" />
           <span class="uppercase">{$t('pause')}</span>
         </JobTileButton>
       {/if}
@@ -166,25 +165,25 @@
     {#if !disabled && multipleButtons && isIdle}
       {#if allText}
         <JobTileButton color="dark-gray" onClick={() => onCommand({ command: JobCommand.Start, force: true })}>
-          <Icon path={mdiAllInclusive} size="24" />
+          <Icon icon={mdiAllInclusive} size="24" />
           <span class="uppercase">{allText}</span>
         </JobTileButton>
       {/if}
       {#if refreshText}
         <JobTileButton color="gray" onClick={() => onCommand({ command: JobCommand.Start, force: undefined })}>
-          <Icon path={mdiImageRefreshOutline} size="24" />
+          <Icon icon={mdiImageRefreshOutline} size="24" />
           <span class="uppercase">{refreshText}</span>
         </JobTileButton>
       {/if}
       <JobTileButton color="light-gray" onClick={() => onCommand({ command: JobCommand.Start, force: false })}>
-        <Icon path={mdiSelectionSearch} size="24" />
+        <Icon icon={mdiSelectionSearch} size="24" />
         <span class="uppercase">{missingText}</span>
       </JobTileButton>
     {/if}
 
     {#if !disabled && !multipleButtons && isIdle}
       <JobTileButton color="light-gray" onClick={() => onCommand({ command: JobCommand.Start, force: false })}>
-        <Icon path={mdiPlay} size="48" />
+        <Icon icon={mdiPlay} size="48" />
         <span class="uppercase">{missingText}</span>
       </JobTileButton>
     {/if}

web/src/lib/components/admin-page/server-stats/server-stats-panel.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import Icon from '$lib/elements/Icon.svelte';
   import { locale } from '$lib/stores/preferences.store';
   import { getByteUnitString, getBytesWithUnit } from '$lib/utils/byte-units';
   import type { ServerStatsResponseDto } from '@immich/sdk';
+  import { Icon } from '@immich/ui';
   import { mdiCameraIris, mdiChartPie, mdiPlayCircle } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import StatsCard from './stats-card.svelte';
@@ -47,7 +47,7 @@
       <div class="flex flex-col justify-between rounded-3xl bg-subtle p-5 dark:bg-immich-dark-gray">
         <div class="flex flex-wrap gap-x-12">
           <div class="flex place-items-center gap-4 text-immich-primary dark:text-immich-dark-primary">
-            <Icon path={mdiCameraIris} size="25" />
+            <Icon icon={mdiCameraIris} size="25" />
             <p class="uppercase">{$t('photos')}</p>
           </div>
 
@@ -59,7 +59,7 @@
         </div>
         <div class="flex flex-wrap gap-x-12">
           <div class="flex place-items-center gap-4 text-immich-primary dark:text-immich-dark-primary">
-            <Icon path={mdiPlayCircle} size="25" />
+            <Icon icon={mdiPlayCircle} size="25" />
             <p class="uppercase">{$t('videos')}</p>
           </div>
 
@@ -71,7 +71,7 @@
         </div>
         <div class="flex flex-wrap gap-x-7">
           <div class="flex place-items-center gap-4 text-immich-primary dark:text-immich-dark-primary">
-            <Icon path={mdiChartPie} size="25" />
+            <Icon icon={mdiChartPie} size="25" />
             <p class="uppercase">{$t('storage')}</p>
           </div>
 

web/src/lib/components/admin-page/server-stats/stats-card.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-  import Icon from '$lib/elements/Icon.svelte';
   import { ByteUnit } from '$lib/utils/byte-units';
-  import { Code, Text } from '@immich/ui';
+  import { Code, Icon, Text } from '@immich/ui';
 
   interface Props {
     icon: string;
@@ -23,7 +22,7 @@
 
 <div class="flex h-[140px] w-full flex-col justify-between rounded-3xl bg-subtle text-primary p-5">
   <div class="flex place-items-center gap-4">
-    <Icon path={icon} size="40" />
+    <Icon {icon} size="40" />
     <Text size="large" fontWeight="bold" class="uppercase">{title}</Text>
   </div>
 

web/src/lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte

@@ -7,7 +7,6 @@
   import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
   import { SettingInputFieldType } from '$lib/constants';
   import FormatMessage from '$lib/elements/FormatMessage.svelte';
-  import Icon from '$lib/elements/Icon.svelte';
   import {
     AudioCodec,
     CQMode,
@@ -18,6 +17,7 @@
     VideoContainer,
     type SystemConfigDto,
   } from '@immich/sdk';
+  import { Icon } from '@immich/ui';
   import { mdiHelpCircleOutline } from '@mdi/js';
   import { isEqual, sortBy } from 'lodash-es';
   import { t } from 'svelte-i18n';
@@ -45,7 +45,7 @@
     <form autocomplete="off" {onsubmit}>
       <div class="ms-4 mt-4 flex flex-col gap-4">
         <p class="text-sm dark:text-immich-dark-fg">
-          <Icon path={mdiHelpCircleOutline} class="inline" size="15" />
+          <Icon icon={mdiHelpCircleOutline} class="inline" size="15" />
           <FormatMessage key="admin.transcoding_codecs_learn_more">
             {#snippet children({ tag, message })}
               {#if tag === 'h264-link'}

web/src/lib/components/admin-page/settings/template-settings/template-settings.svelte

@@ -3,11 +3,10 @@
   import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
   import SettingTextarea from '$lib/components/shared-components/settings/setting-textarea.svelte';
   import FormatMessage from '$lib/elements/FormatMessage.svelte';
-  import Icon from '$lib/elements/Icon.svelte';
   import EmailTemplatePreviewModal from '$lib/modals/EmailTemplatePreviewModal.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { type SystemConfigDto, type SystemConfigTemplateEmailsDto, getNotificationTemplateAdmin } from '@immich/sdk';
-  import { Button, modalManager } from '@immich/ui';
+  import { Button, Icon, modalManager } from '@immich/ui';
   import { mdiEyeOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
@@ -96,7 +95,7 @@
                 onclick={() => getTemplate(templateName, config.templates.email[templateKey])}
                 title={$t('admin.template_email_preview')}
               >
-                <Icon path={mdiEyeOutline} class="me-1" />
+                <Icon icon={mdiEyeOutline} class="me-1" />
                 {$t('admin.template_email_preview')}
               </Button>
             </div>