<template>
  <svg
    :width="size"
    :height="size"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    aria-hidden="true"
  >
    <!-- Gateway arch -->
    <path
      d="M5 15V11a7 7 0 0 1 14 0v4"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    />
    <!-- Traffic flow through gateway -->
    <path d="M4 15h5" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
    <path d="M15 15h5" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
    <!-- Luminous core -->
    <circle cx="12" cy="12" r="2.25" fill="currentColor" />
    <!-- Beacon ray -->
    <path d="M12 4.5V8" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
  </svg>
</template>

<script setup lang="ts">
withDefaults(defineProps<{ size?: number | string }>(), { size: 20 })
</script>
