<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.5h1.946c1.966 0 2.704-2.575 1.037-3.617-3.441-2.15-2.982-7.3.786-8.806l11.16-4.464c1.003-.401 1.507-1.29 1.387-2.089C39.122 13.586 32.27 7.5 24 7.5M4.5 24C4.5 13.23 13.23 4.5 24 4.5c9.777 0 17.872 7.194 19.282 16.578.367 2.436-1.205 4.507-3.24 5.32l-11.159 4.464c-1.487.595-1.669 2.628-.31 3.477 4.223 2.64 2.353 9.161-2.628 9.161H24C13.23 43.5 4.5 34.77 4.5 24M16 17a1 1 0 1 0 0 2 1 1 0 0 0 0-2m-3 1a3 3 0 1 1 6 0 3 3 0 0 1-6 0m.5 9a1 1 0 1 1 2 0 1 1 0 0 1-2 0m1-3a3 3 0 1 0 0 6 3 3 0 0 0 0-6M24 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2m-3 1a3 3 0 1 1 6 0 3 3 0 0 1-6 0m10 4a1 1 0 1 1 2 0 1 1 0 0 1-2 0m1-3a3 3 0 1 0 0 6 3 3 0 0 0 0-6"/></svg></template>
<script setup lang="ts">
/**
 * Palette48 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>
