<template><svg aria-hidden="true" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48px" height="48px"><g clip-path="url(#ui_eye_48__a)"><path d="M24 11.5c5.256 0 9.858 3.055 13.02 5.882a38 38 0 0 1 4.832 5.243 22 22 0 0 1 .351.479l.02.029.008.009.001.003h.001c0 .001-.01.009-1.233.855 1.223.846 1.234.854 1.233.855l-.002.003-.007.01-.02.029-.075.103q-.097.135-.276.375a38 38 0 0 1-4.832 5.243C33.858 33.445 29.255 36.5 24 36.5s-9.858-3.055-13.02-5.882a38 38 0 0 1-4.833-5.243A22 22 0 0 1 5.871 25l-.074-.104-.02-.029q-.005-.005-.007-.009l-.002-.003h-.001c0-.001.01-.009 1.233-.855a239 239 0 0 1-1.233-.855l.003-.003.006-.01.02-.029.075-.103a34 34 0 0 1 1.313-1.68 38 38 0 0 1 3.795-3.938C14.143 14.555 18.744 11.5 24 11.5m0 3c-4.133 0-8.03 2.445-11.021 5.118A35 35 0 0 0 8.875 24a35 35 0 0 0 4.103 4.382C15.97 31.055 19.869 33.5 24 33.5c4.133 0 8.03-2.445 11.022-5.118A35 35 0 0 0 39.124 24a35 35 0 0 0-4.102-4.382C32.03 16.945 28.132 14.5 24 14.5m0 4a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11m0 3a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M7 24l-1.233.854a1.5 1.5 0 0 1 0-1.707zm35.233-.854a1.5 1.5 0 0 1 0 1.707L41 24z"/></g><defs><clipPath id="ui_eye_48__a"><path fill="#fff" d="M0 0h48v48H0z"/></clipPath></defs></svg></template>
<script setup lang="ts">
/**
 * Eye48 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>
