<template><svg aria-hidden="true" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48px" height="48px"><path fill-rule="evenodd" d="M24 7.5c-5.89 0-10.902 3.774-12.744 9.037q.367-.037.744-.037a1.5 1.5 0 0 1 1.5 1.5v12a1.5 1.5 0 0 1-1.5 1.5 7.5 7.5 0 0 1-4.184-13.725C9.316 10.205 15.991 4.5 24.001 4.5s14.684 5.706 16.184 13.276A7.5 7.5 0 0 1 43.5 24a7.5 7.5 0 0 1-4.071 6.672 15.54 15.54 0 0 1-9.194 8.921C29.398 42.007 26.706 43.5 24 43.5c-3.26 0-6.5-2.167-6.5-5.5s3.24-5.5 6.5-5.5c2.69 0 5.365 1.475 6.22 3.862a12.56 12.56 0 0 0 5.478-4.892A1.5 1.5 0 0 1 34.5 30V18a1.5 1.5 0 0 1 1.5-1.5q.377 0 .746.037C34.903 11.275 29.892 7.5 24 7.5M10.5 19.756a4.502 4.502 0 0 0 0 8.488zm27 8.488a4.502 4.502 0 0 0 0-8.488zM20.5 38c0-1.086 1.237-2.5 3.5-2.5s3.5 1.414 3.5 2.5-1.237 2.5-3.5 2.5-3.5-1.414-3.5-2.5"/></svg></template>
<script setup lang="ts">
/**
 * Helpline48 is an SVG icon wrapped in a Vue component to make it easier to use.
 */
withDefaults(
  defineProps<{
    /**
     * Define the color of the icon.
     */
    color?: string;
  }>(),
  {
    color: 'currentColor',
  },
);
</script>
