chore: migrate to UI lib icon (#22096)

web/src/lib/elements/Dropdown.svelte

@@ -12,11 +12,10 @@
 
 <script lang="ts" generics="T">
   import { clickOutside } from '$lib/actions/click-outside';
-  import { Button, Text } from '@immich/ui';
+  import { Button, Icon, Text } from '@immich/ui';
   import { mdiCheck } from '@mdi/js';
   import { isEqual } from 'lodash-es';
   import { fly } from 'svelte/transition';
-  import Icon from './Icon.svelte';
 
   interface Props {
     class?: string;
@@ -99,7 +98,7 @@
   <!-- BUTTON TITLE -->
   <Button onclick={() => (showMenu = true)} fullWidth {title} variant="ghost" color="secondary" size="small">
     {#if renderedSelectedOption?.icon}
-      <Icon path={renderedSelectedOption.icon} />
+      <Icon icon={renderedSelectedOption.icon} />
     {/if}
     <Text class={hideTextOnSmallScreen ? 'hidden sm:block' : ''}>{renderedSelectedOption.title}</Text>
   </Button>
@@ -123,7 +122,7 @@
         >
           {#if isEqual(selectedOption, option)}
             <div class="text-immich-primary dark:text-immich-dark-primary">
-              <Icon path={mdiCheck} />
+              <Icon icon={mdiCheck} />
             </div>
             <p class="justify-self-start text-immich-primary dark:text-immich-dark-primary">
               {renderedOption.title}

web/src/lib/elements/Icon.svelte

@@ -1,60 +0,0 @@
-<script lang="ts">
-  import type { AriaRole } from 'svelte/elements';
-
-  interface Props {
-    size?: string | number;
-    color?: string;
-    path: string;
-    title?: string | null;
-    desc?: string;
-    flipped?: boolean;
-    class?: string;
-    viewBox?: string;
-    role?: AriaRole;
-    ariaHidden?: boolean | undefined;
-    ariaLabel?: string | undefined;
-    ariaLabelledby?: string | undefined;
-    strokeWidth?: number;
-    strokeColor?: string;
-    spin?: boolean;
-  }
-
-  let {
-    size = '1em',
-    color = 'currentColor',
-    path,
-    title = null,
-    desc = '',
-    flipped = false,
-    class: className = '',
-    viewBox = '0 0 24 24',
-    role = 'img',
-    ariaHidden = undefined,
-    ariaLabel = undefined,
-    ariaLabelledby = undefined,
-    strokeWidth = 0,
-    strokeColor = 'currentColor',
-    spin = false,
-  }: Props = $props();
-</script>
-
-<svg
-  width={size}
-  height={size}
-  {viewBox}
-  class="{className} {flipped ? '-scale-x-100' : ''} {spin ? 'animate-spin' : ''}"
-  {role}
-  stroke={strokeColor}
-  stroke-width={strokeWidth}
-  aria-label={ariaLabel}
-  aria-hidden={ariaHidden}
-  aria-labelledby={ariaLabelledby}
->
-  {#if title}
-    <title>{title}</title>
-  {/if}
-  {#if desc}
-    <desc>{desc}</desc>
-  {/if}
-  <path d={path} fill={color} />
-</svg>

web/src/lib/elements/StarRating.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import { focusOutside } from '$lib/actions/focus-outside';
   import { shortcuts } from '$lib/actions/shortcut';
-  import Icon from '$lib/elements/Icon.svelte';
   import { generateId } from '$lib/utils/generate-id';
+  import { Icon } from '@immich/ui';
   import { t } from 'svelte-i18n';
 
   interface Props {
@@ -83,12 +83,12 @@
       >
         <span class="sr-only">{$t('rating_count', { values: { count: value } })}</span>
         <Icon
-          path={starIcon}
+          icon={starIcon}
           size="1.5em"
           strokeWidth={1}
           color={filled ? 'currentcolor' : 'transparent'}
           strokeColor={filled ? 'currentcolor' : '#c1cce8'}
-          ariaHidden
+          aria-hidden
         />
       </label>
       <input