chore: migrate to UI lib icon (#22096)

This commit is contained in:
Daniel Dietzler 2025-09-16 21:40:43 +02:00 committed by GitHub
parent dac545496e
commit 7fe2f19258
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
78 changed files with 243 additions and 345 deletions

View file

@ -1,7 +1,6 @@
<script lang="ts">
import Icon from '$lib/elements/Icon.svelte';
import { TreeNode } from '$lib/utils/tree-utils';
import { IconButton } from '@immich/ui';
import { Icon, IconButton } from '@immich/ui';
import { mdiArrowUpLeft, mdiChevronRight } from '@mdi/js';
import { t } from 'svelte-i18n';
@ -55,7 +54,7 @@
<li
class="flex gap-2 items-center font-mono text-sm text-nowrap text-immich-primary dark:text-immich-dark-primary"
>
<Icon path={mdiChevronRight} class="text-gray-500 dark:text-gray-300" size={16} ariaHidden />
<Icon icon={mdiChevronRight} class="text-gray-500 dark:text-gray-300" size="16" aria-hidden />
<a class="underline hover:font-semibold whitespace-pre-wrap" href={getLink(parent.path)}>
{parent.value}
</a>
@ -65,7 +64,7 @@
<li
class="flex gap-2 items-center font-mono text-sm text-nowrap text-immich-primary dark:text-immich-dark-primary"
>
<Icon path={mdiChevronRight} class="text-gray-500 dark:text-gray-300" size={16} ariaHidden />
<Icon icon={mdiChevronRight} class="text-gray-500 dark:text-gray-300" size="16" aria-hidden />
<p class="cursor-default whitespace-pre-wrap">{node.value}</p>
</li>
</ol>

View file

@ -1,6 +1,6 @@
<script lang="ts">
import Icon from '$lib/elements/Icon.svelte';
import type { TreeNode } from '$lib/utils/tree-utils';
import { Icon } from '@immich/ui';
interface Props {
items: TreeNode[];
@ -23,7 +23,7 @@
title={item.value}
type="button"
>
<Icon path={icon} class="text-immich-primary dark:text-immich-dark-primary" size={64} />
<Icon {icon} class="text-immich-primary dark:text-immich-dark-primary" size="64" />
<p class="text-sm dark:text-gray-200 text-nowrap text-ellipsis overflow-clip w-full whitespace-pre-wrap">
{item.value}
</p>

View file

@ -1,7 +1,7 @@
<script lang="ts">
import TreeItems from '$lib/components/shared-components/tree/tree-items.svelte';
import Icon from '$lib/elements/Icon.svelte';
import { TreeNode } from '$lib/utils/tree-utils';
import { Icon } from '@immich/ui';
import { mdiChevronDown, mdiChevronRight } from '@mdi/js';
interface Props {
@ -31,15 +31,15 @@
>
{#if node.size > 0}
<button type="button" {onclick}>
<Icon path={isOpen ? mdiChevronDown : mdiChevronRight} class="text-gray-400" size={20} />
<Icon icon={isOpen ? mdiChevronDown : mdiChevronRight} class="text-gray-400" size="20" />
</button>
{/if}
<div class={node.size === 0 ? 'ml-[1.5em] ' : ''}>
<Icon
path={isActive ? icons.active : icons.default}
icon={isActive ? icons.active : icons.default}
class={isActive ? 'text-immich-primary dark:text-immich-dark-primary' : 'text-gray-400'}
color={node.color}
size={20}
size="20"
/>
</div>
<span class="text-nowrap overflow-hidden text-ellipsis font-mono ps-1 pt-1 whitespace-pre-wrap">{node.value}</span>