<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="M7.5 24c0-9.113 7.387-16.5 16.5-16.5 4.016 0 7.697 1.435 10.559 3.82l-4.413 4.412-1.439-1.44A1 1 0 0 0 28 14h-8a1 1 0 0 0-.707.293L17.586 16H14a1 1 0 0 0-1 1v14a1 1 0 0 0 .885.994l-2.565 2.565A16.43 16.43 0 0 1 7.5 24m10.621 8-4.68 4.68A16.43 16.43 0 0 0 24 40.5c9.113 0 16.5-7.387 16.5-16.5 0-4.016-1.435-7.697-3.82-10.559l-2.565 2.565A1 1 0 0 1 35 17v14a1 1 0 0 1-1 1zM24 4.5C13.23 4.5 4.5 13.23 4.5 24S13.23 43.5 24 43.5 43.5 34.77 43.5 24 34.77 4.5 24 4.5m-5.293 13.207L20.414 16h7.172l1.707 1.707A1 1 0 0 0 30 18h3v12H15V18h3a1 1 0 0 0 .707-.293M17 21a1 1 0 1 0 0-2 1 1 0 0 0 0 2m7 0a3 3 0 1 0 0 6 3 3 0 0 0 0-6m-5 3a5 5 0 1 1 10 0 5 5 0 0 1-10 0"/></svg></template>
<script setup lang="ts">
/**
 * NoPicture48 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>
