<template><svg aria-hidden="true" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12m4.106-3.947a1 1 0 0 1 1.341-.447c.837.418 2.687.894 4.553.894s3.716-.476 4.553-.894a1 1 0 1 1 .894 1.788c-.887.444-2.36.854-3.947 1.024v1.85a42 42 0 0 1 .729 1.581c.44 1.008.97 2.322 1.241 3.408a1 1 0 1 1-1.94.485c-.229-.913-.7-2.099-1.134-3.091a43 43 0 0 0-.396-.879c-.118.254-.254.553-.396.879-.434.992-.905 2.178-1.134 3.092a1 1 0 1 1-1.94-.485c.271-1.087.8-2.401 1.241-3.409a46 46 0 0 1 .729-1.581v-1.85c-1.588-.17-3.06-.58-3.947-1.024a1 1 0 0 1-.447-1.341M13.5 6.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"/></svg></template>
<script setup lang="ts">
/**
 * A11y24 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>
