<template><svg aria-hidden="true" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20px" height="20px"><path fill-rule="evenodd" d="M8.25 5.222c0-.618.197-1.112.495-1.443.291-.323.711-.529 1.255-.529s.964.206 1.255.53c.297.33.495.824.495 1.442v.695h-3.5zm-1.5.695v-.695c0-.937.302-1.804.88-2.446C8.214 2.127 9.043 1.75 10 1.75c.956 0 1.786.377 2.37 1.026.578.642.88 1.509.88 2.446v.695H15a.75.75 0 0 1 .748.692l.833 10.834a.75.75 0 0 1-.748.807H4.167a.75.75 0 0 1-.748-.807l.833-10.834A.75.75 0 0 1 5 5.917zm6.5 1.5h1.055l.718 9.333H4.976l.718-9.333H6.75v.916h.75-.75a.75.75 0 1 0 1.5 0H7.5h.75v-.916h3.5v.916h.75-.75a.75.75 0 0 0 1.5 0h-.75.75z"/></svg></template>
<script setup lang="ts">
/**
 * Handbag20 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>
