<script setup lang="ts">
const id = useId()
</script>

<template>
  <svg fill="none" height="16" viewBox="0 0 17 16" width="17" xmlns="https://www.w3.org/2000/svg">
    <path
      d="M14.5 8C14.5 6.61187 14.0187 5.26668 13.1381 4.19365C12.2574 3.12061 11.032 2.38611 9.67054 2.1153C8.30908 1.84449 6.89584 2.05412 5.67162 2.70848C4.4474 3.36284 3.48794 4.42144 2.95672 5.7039C2.42551 6.98637 2.35541 8.41335 2.75836 9.7417C3.16131 11.0701 4.01239 12.2176 5.16658 12.9888C6.32077 13.76 7.70666 14.1072 9.0881 13.9711"
      :stroke="`url(#${id})`"
      stroke-linecap="round"
      stroke-width="1.3"
    />
    <defs>
      <linearGradient
        :id="id"
        gradientUnits="userSpaceOnUse"
        x1="12.64"
        x2="8.50001"
        y1="3.44"
        y2="14"
      >
        <stop offset="0.150973" stop-color="currentColor" />
        <stop offset="0.588542" stop-color="currentColor" stop-opacity="0.15" />
      </linearGradient>
    </defs>
  </svg>
</template>
