<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="M12 4a1 1 0 0 1 .949.684l1.592 4.775 4.775 1.592a1 1 0 0 1 0 1.898l-4.775 1.592-1.592 4.775a1 1 0 0 1-1.898 0L9.46 14.541l-4.775-1.592a1 1 0 0 1 0-1.898L9.459 9.46l1.592-4.775A1 1 0 0 1 12 4m0 4.162-.801 2.404a1 1 0 0 1-.633.633L8.162 12l2.404.801a1 1 0 0 1 .633.633L12 15.838l.801-2.404a1 1 0 0 1 .633-.633L15.838 12l-2.404-.801a1 1 0 0 1-.633-.633zm17.49 5.672a1.5 1.5 0 0 0-2.98 0c-.481 4.326-1.657 7.192-3.57 9.105-1.915 1.914-4.78 3.09-9.106 3.57a1.5 1.5 0 0 0 0 2.982c4.326.48 7.191 1.656 9.105 3.57s3.09 4.78 3.57 9.105a1.5 1.5 0 0 0 2.982 0c.48-4.326 1.656-7.191 3.57-9.105s4.78-3.09 9.105-3.57a1.5 1.5 0 0 0 0-2.982c-4.326-.48-7.191-1.656-9.105-3.57s-3.09-4.78-3.57-9.105"/></svg></template>
<script setup lang="ts">
/**
 * Ai48 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>
