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
78 changed files with 243 additions and 345 deletions
@@ -32,7 +32,6 @@
import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
import Timeline from '$lib/components/timeline/Timeline.svelte';
import { AlbumPageViewMode, AppRoute } from '$lib/constants';
import Icon from '$lib/elements/Icon.svelte';
import { activityManager } from '$lib/managers/activity-manager.svelte';
import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
@@ -69,7 +68,7 @@
updateAlbumInfo,
type AlbumUserAddDto,
} from '@immich/sdk';
import { Button, IconButton, modalManager } from '@immich/ui';
import { Button, Icon, IconButton, modalManager } from '@immich/ui';
import {
mdiArrowLeft,
mdiCogOutline,
@@ -535,8 +534,8 @@
onclick={() => (viewMode = AlbumPageViewMode.SELECT_ASSETS)}
class="mt-5 bg-subtle flex w-full place-items-center gap-6 rounded-2xl border px-8 py-8 text-immich-fg transition-all hover:bg-gray-100 dark:hover:bg-gray-500/20 hover:text-immich-primary dark:border-none dark:text-immich-dark-fg dark:hover:text-immich-dark-primary"
>
<span class="text-text-immich-primary dark:text-immich-dark-primary"
><Icon path={mdiPlus} size="24" />
<span class="text-text-immich-primary dark:text-immich-dark-primary">
<Icon icon={mdiPlus} size="24" />
</span>
<span class="text-lg">{$t('select_photos')}</span>
</button>
+3 -3
View File
@@ -4,11 +4,11 @@
import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
import SingleGridRow from '$lib/components/shared-components/single-grid-row.svelte';
import { AppRoute } from '$lib/constants';
import Icon from '$lib/elements/Icon.svelte';
import { websocketEvents } from '$lib/stores/websocket';
import { getAssetThumbnailUrl, getPeopleThumbnailUrl } from '$lib/utils';
import { getMetadataSearchQuery } from '$lib/utils/metadata-search';
import { AssetMediaSize, type SearchExploreResponseDto } from '@immich/sdk';
import { Icon } from '@immich/ui';
import { mdiHeart } from '@mdi/js';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
@@ -65,7 +65,7 @@
/>
{#if person.isFavorite}
<div class="absolute top-2 start-2">
<Icon path={mdiHeart} size="24" class="text-white" />
<Icon icon={mdiHeart} size="24" class="text-white" />
</div>
{/if}
<p class="mt-2 text-ellipsis text-sm font-medium dark:text-white">{person.name}</p>
@@ -102,7 +102,7 @@
/>
</div>
<span
class="w-100 absolute bottom-2 w-full text-ellipsis px-1 text-center text-sm font-medium capitalize text-white backdrop-blur-[1px] hover:cursor-pointer"
class="absolute bottom-2 w-full text-ellipsis px-1 text-center text-sm font-medium capitalize text-white backdrop-blur-[1px] hover:cursor-pointer"
>
{item.value}
</span>
+2 -3
View File
@@ -14,7 +14,6 @@
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import { ActionQueryParameterValue, AppRoute, QueryParameter, SessionStorageKey } from '$lib/constants';
import Icon from '$lib/elements/Icon.svelte';
import PersonEditBirthDateModal from '$lib/modals/PersonEditBirthDateModal.svelte';
import PersonMergeSuggestionModal from '$lib/modals/PersonMergeSuggestionModal.svelte';
import { locale } from '$lib/stores/preferences.store';
@@ -23,7 +22,7 @@
import { handleError } from '$lib/utils/handle-error';
import { clearQueryParam } from '$lib/utils/navigation';
import { getAllPeople, getPerson, searchPerson, updatePerson, type PersonResponseDto } from '@immich/sdk';
import { Button, modalManager } from '@immich/ui';
import { Button, Icon, modalManager } from '@immich/ui';
import { mdiAccountOff, mdiEyeOutline } from '@mdi/js';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
@@ -389,7 +388,7 @@
{:else}
<div class="flex min-h-[calc(66vh-11rem)] w-full place-content-center items-center dark:text-white">
<div class="flex flex-col content-center items-center text-center">
<Icon path={mdiAccountOff} size="3.5em" />
<Icon icon={mdiAccountOff} size="3.5em" />
<p class="mt-5 text-3xl font-medium max-w-lg line-clamp-2 overflow-hidden">
{$t(searchName ? 'search_no_people_named' : 'search_no_people', { values: { name: searchName } })}
</p>
@@ -22,7 +22,6 @@
import TagAction from '$lib/components/timeline/actions/TagAction.svelte';
import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
import { AppRoute, QueryParameter } from '$lib/constants';
import Icon from '$lib/elements/Icon.svelte';
import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
import type { TimelineAsset, Viewport } from '$lib/managers/timeline-manager/types';
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
@@ -45,7 +44,7 @@
searchSmart,
type SmartSearchDto,
} from '@immich/sdk';
import { IconButton } from '@immich/ui';
import { Icon, IconButton } from '@immich/ui';
import { mdiArrowLeft, mdiDotsVertical, mdiImageOffOutline, mdiPlus, mdiSelectAll } from '@mdi/js';
import { tick } from 'svelte';
import { t } from 'svelte-i18n';
@@ -390,7 +389,7 @@
{:else if !isLoading}
<div class="flex min-h-[calc(66vh-11rem)] w-full place-content-center items-center dark:text-white">
<div class="flex flex-col content-center items-center text-center">
<Icon path={mdiImageOffOutline} size="3.5em" />
<Icon icon={mdiImageOffOutline} size="3.5em" />
<p class="mt-5 text-3xl font-medium">{$t('no_results')}</p>
<p class="text-base font-normal">{$t('no_results_description')}</p>
</div>
+2 -3
View File
@@ -6,7 +6,6 @@
notificationController,
} from '$lib/components/shared-components/notification/notification';
import { AppRoute } from '$lib/constants';
import Icon from '$lib/elements/Icon.svelte';
import UserCreateModal from '$lib/modals/UserCreateModal.svelte';
import UserDeleteConfirmModal from '$lib/modals/UserDeleteConfirmModal.svelte';
import UserRestoreConfirmModal from '$lib/modals/UserRestoreConfirmModal.svelte';
@@ -16,7 +15,7 @@
import { websocketEvents } from '$lib/stores/websocket';
import { getByteUnitString } from '$lib/utils/byte-units';
import { UserStatus, searchUsersAdmin, type UserAdminResponseDto } from '@immich/sdk';
import { Button, HStack, IconButton, Text, modalManager } from '@immich/ui';
import { Button, HStack, Icon, IconButton, Text, modalManager } from '@immich/ui';
import { mdiDeleteRestore, mdiEyeOutline, mdiInfinity, mdiPlusBoxOutline, mdiTrashCanOutline } from '@mdi/js';
import { DateTime } from 'luxon';
import { onMount } from 'svelte';
@@ -116,7 +115,7 @@
{#if immichUser.quotaSizeInBytes !== null && immichUser.quotaSizeInBytes >= 0}
{getByteUnitString(immichUser.quotaSizeInBytes, $locale)}
{:else}
<Icon path={mdiInfinity} size="16" />
<Icon icon={mdiInfinity} size="16" />
{/if}
</div>
</td>