<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.5C14.887 7.5 7.5 14.887 7.5 24S14.887 40.5 24 40.5 40.5 33.113 40.5 24 33.113 7.5 24 7.5M4.5 24C4.5 13.23 13.23 4.5 24 4.5S43.5 13.23 43.5 24 34.77 43.5 24 43.5 4.5 34.77 4.5 24m8.158-7.67a1.5 1.5 0 0 1 2.013-.672c1.755.878 5.534 1.842 9.329 1.842s7.574-.964 9.33-1.842a1.5 1.5 0 1 1 1.34 2.684c-1.795.897-4.875 1.74-8.17 2.04v4.269l.34.705c.301.636.714 1.525 1.16 2.543.88 2.011 1.923 4.608 2.455 6.737a1.5 1.5 0 1 1-2.91.728c-.468-1.87-1.424-4.274-2.294-6.263A89 89 0 0 0 24 26.372l-.13.272a89 89 0 0 0-1.12 2.457c-.87 1.989-1.827 4.392-2.295 6.263a1.5 1.5 0 1 1-2.91-.728c.532-2.13 1.576-4.726 2.456-6.737A91 91 0 0 1 21.5 24.65v-4.268c-3.295-.301-6.375-1.144-8.17-2.041a1.5 1.5 0 0 1-.672-2.013M27 13a3 3 0 1 1-6 0 3 3 0 0 1 6 0"/></svg></template>
<script setup lang="ts">
/**
 * A11y48 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>
