<template><svg aria-hidden="true" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20px" height="20px"><path d="M9.5 1.75c4.385 0 7.875 3.73 7.875 8.25s-3.49 8.25-7.875 8.25S1.625 14.52 1.625 10 5.115 1.75 9.5 1.75m0 1.5c-3.485 0-6.375 2.985-6.375 6.75s2.89 6.75 6.375 6.75 6.375-2.985 6.375-6.75-2.89-6.75-6.375-6.75m-.203 5.195a.75.75 0 0 1 .953.722v3.417h.438a.75.75 0 0 1 0 1.5H8.312a.75.75 0 0 1 0-1.5h.438v-2.427l-.234.067a.75.75 0 0 1-.407-1.444zm-.193-2.862c.587 0 1.041.497 1.042 1.083 0 .586-.455 1.084-1.042 1.084s-1.041-.498-1.041-1.084.455-1.083 1.041-1.083"/></svg></template>
<script setup lang="ts">
/**
 * InfoCircle20 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>
