<template><svg aria-hidden="true" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32px" height="32px"><path fill-rule="evenodd" d="M20 3a1 1 0 0 0-.707.293l-16 16a1 1 0 0 0 0 1.414l8 8a1 1 0 0 0 1.414 0l2.625-2.625A7.63 7.63 0 0 0 20 27.667c1.757 0 3.375-.591 4.668-1.585l2.625 2.625a1 1 0 0 0 1.414-1.414l-2.625-2.625A7.63 7.63 0 0 0 27.667 20c0-1.757-.591-3.375-1.585-4.668l2.625-2.625A1 1 0 0 0 29 12V4a1 1 0 0 0-1-1zm4.668 10.918L27 11.586V5h-6.586l-15 15L12 26.586l1.918-1.918a7.667 7.667 0 0 1 10.75-10.75M14.333 20a5.667 5.667 0 1 1 11.334 0 5.667 5.667 0 0 1-11.334 0m9-10a1.333 1.333 0 1 0 0-2.667 1.333 1.333 0 0 0 0 2.667"/></svg></template>
<script setup lang="ts">
/**
 * SearchProduct32 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>
