<template><svg aria-hidden="true" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path d="M12 5.5c2.722 0 5.081 1.579 6.677 3.005a19.2 19.2 0 0 1 2.449 2.657l.141.191.039.054.011.016.003.005.001.002h.001l.078.135a1 1 0 0 1 0 .87l-.078.134v.001l-.002.002q0 .002-.003.005l-.011.016-.039.053q-.049.069-.141.192a19.2 19.2 0 0 1-2.45 2.657C17.082 16.921 14.722 18.5 12 18.5s-5.082-1.579-6.677-3.005a19.2 19.2 0 0 1-2.45-2.657l-.14-.191-.039-.054-.011-.016-.003-.005-.001-.002h-.001a1 1 0 0 1 0-1.14l.002-.002q0-.002.003-.005l.011-.016.038-.053A17 17 0 0 1 3.4 10.5a19 19 0 0 1 1.923-1.995C6.918 7.079 9.278 5.5 12 5.5m0 2c-1.973 0-3.863 1.171-5.344 2.495a17 17 0 0 0-1.72 1.786q-.096.116-.178.219.082.103.177.219c.408.489.997 1.139 1.721 1.786C8.137 15.329 10.027 16.5 12 16.5s3.863-1.171 5.344-2.495a17 17 0 0 0 1.72-1.786q.095-.116.177-.219-.082-.103-.177-.219a17 17 0 0 0-1.72-1.786C15.863 8.671 13.973 7.5 12 7.5M12 9a3 3 0 1 1 0 6 3 3 0 0 1 0-6m0 2a1 1 0 1 0 0 2 1 1 0 0 0 0-2"/></svg></template>
<script setup lang="ts">
/**
 * Eye24 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>
