<script lang="ts">
  let { size = 18, color = 'currentColor', dir = 'right' }: { size?: number; color?: string; dir?: 'right' | 'left' | 'up' | 'down' } = $props();
  const rot = { right: 0, left: 180, up: -90, down: 90 }[dir];
</script>
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" style="transform: rotate({rot}deg)">
  <path d="M9 6l6 6-6 6" />
</svg>
