Spaces:
Running
Running
File size: 1,160 Bytes
6ce4ca6 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
<script lang="ts">
import { Container, SVG } from "threlte-uikit";
import { ICON } from "$lib/utils/icon";
interface Props {
color?: string;
opacity?: number;
size?: number;
direction?: 'right' | 'down' | 'left' | 'up';
minWidth?: number;
minHeight?: number;
}
let {
color = "rgb(139, 69, 219)",
opacity = 1,
size = 12,
direction = 'right',
minWidth = 20,
minHeight = 12
}: Props = $props();
</script>
<Container
flexDirection="row"
alignItems="center"
justifyContent="center"
gap={12}
{minWidth}
{minHeight}
>
{#if direction === 'right'}
<SVG
width={size}
height={size}
{color}
{opacity}
src={ICON[`icon-[formkit--arrowright]`].svg}
/>
{:else if direction === 'down'}
<SVG
width={size}
height={size}
{color}
{opacity}
src={ICON[`icon-[formkit--arrowdown]`].svg}
/>
{:else if direction === 'left'}
<SVG
width={size}
height={size}
{color}
{opacity}
src={ICON[`icon-[formkit--arrowleft]`].svg}
/>
{:else if direction === 'up'}
<SVG
width={size}
height={size}
{color}
{opacity}
src={ICON[`icon-[formkit--arrowup]`].svg}
/>
{/if}
</Container> |