<template>
  <svg :width="size" :height="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
    :class="className || ''">
    <path d="M21 12C21 16.9706 16.9706 21 12 21C9.69494 21 7.59227 20.1332 6.00488 18.7121" stroke="currentColor"
      stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
    <path d="M3 12C3 7.02944 7.02944 3 12 3C14.3051 3 16.4077 3.86676 17.9951 5.28793" stroke="currentColor"
      stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
    <path d="M18 5V9H14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
    <path d="M6 19V15H10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
    <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="1.5" />
  </svg>
</template>

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

<style scoped>
svg {
  display: inline-block;
  vertical-align: middle;
}
</style>
