immich-app/static-pages
1
0
Fork 0
mirror of https://github.com/immich-app/static-pages.git synced 2026-09-30 13:23:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): direction-aware icons (#804)

Browse Source
This commit is contained in:
Mees Frensel
2026-09-14 16:22:28 -04:00
committed by GitHub
parent cd1f66dde5
commit d2efd8cc85
10 changed files with 84 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/ui.immich.app/src/routes/(docs)/components/icon/+page.svelte
+3
View File
@@ -5,6 +5,8 @@
import basicExample from './BasicExample.svelte?raw';
import ColorExample from './ColorExample.svelte';
import colorExample from './ColorExample.svelte?raw';
import DirectionalExample from './DirectionalExample.svelte';
import directionalExample from './DirectionalExample.svelte?raw';
import IndicatorExample from './IndicatorExample.svelte';
import indicatorExample from './IndicatorExample.svelte?raw';
import OtherExample from './OtherExample.svelte';
@@ -20,6 +22,7 @@
{ title: 'Sizes', code: sizeExample, component: SizeExample },
{ title: 'Colors', code: colorExample, component: ColorExample },
{ title: 'Indicator', code: indicatorExample, component: IndicatorExample },
{ title: 'Directionality', code: directionalExample, component: DirectionalExample },
{ title: 'Other', code: otherExample, component: OtherExample },
]}
/>
apps/ui.immich.app/src/routes/(docs)/components/icon/DirectionalExample.svelte
+47
View File
@@ -0,0 +1,47 @@
<script lang="ts">
import { Heading, HStack, Icon, Stack, Text } from '@immich/ui';
import { mdiArrowRight } from '@mdi/js';
const icon = mdiArrowRight;
const size = '2em';
</script>
<HStack gap={8}>
<Stack>
<Heading size="tiny">Auto</Heading>
<div class="flex place-items-center gap-2">
<Icon {icon} {size} directional />
<Text>Normal</Text>
</div>
<div class="flex place-items-center gap-2">
<Icon {icon} {size} directional flipped />
<Text>Flipped</Text>
</div>
</Stack>
<div dir="ltr">
<Stack>
<Heading size="tiny">Left-to-right</Heading>
<div class="flex place-items-center gap-2">
<Icon {icon} {size} directional />
<Text>Normal</Text>
</div>
<div class="flex place-items-center gap-2">
<Icon {icon} {size} directional flipped />
<Text>Flipped</Text>
</div>
</Stack>
</div>
<div dir="rtl">
<Stack>
<Heading size="tiny">Right-to-left</Heading>
<div class="flex place-items-center gap-2">
<Icon {icon} {size} directional />
<Text>Normal</Text>
</div>
<div class="flex place-items-center gap-2">
<Icon {icon} {size} directional flipped />
<Text>Flipped</Text>
</div>
</Stack>
</div>
</HStack>