<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 24M24 17.5a2.5 2.5 0 0 0-2.5 2.5 1.5 1.5 0 0 1-3 0 5.5 5.5 0 1 1 11 0c0 1.012-.457 1.852-.917 2.477-.46.626-1.05 1.203-1.536 1.676l-.033.031c-.512.5-.913.89-1.204 1.264-.303.392-.31.55-.31.552a1.5 1.5 0 0 1-3 0c0-.999.493-1.814.94-2.39.423-.546.964-1.072 1.418-1.514l.095-.092c.515-.501.924-.91 1.214-1.305s.333-.607.333-.699a2.5 2.5 0 0 0-2.5-2.5M24 34a2 2 0 1 0 0-4 2 2 0 0 0 0 4"/></svg></template>
<script setup lang="ts">
/**
 * HelpCircle48 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>
