<template><svg aria-hidden="true" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M21.707 3.707a1 1 0 0 0-1.414-1.414L18.15 4.434C16.837 2.895 14.77 2 12.657 2A7.657 7.657 0 0 0 5 9.657V10a1 1 0 1 0 2 0v-.343A5.657 5.657 0 0 1 12.657 4c1.694 0 3.186.727 4.068 1.861l-.987.987c-.72-.851-1.86-1.348-3.028-1.348A4.21 4.21 0 0 0 8.5 9.71v.179a.5.5 0 0 0 1 0V9.71a3.21 3.21 0 0 1 3.21-3.21c.96 0 1.812.413 2.314 1.062L2.293 20.292a1 1 0 1 0 1.414 1.415zM10.672 20c-.834 0-1.58-.382-2.07-.981l-1.417 1.418A4.66 4.66 0 0 0 10.673 22c2.978 0 4.724-2.71 5.255-5.089q.018-.078.037-.148L15 16.5l.965.263c.209-.765.616-1.245 1.187-1.855l.112-.118c.548-.581 1.236-1.31 1.669-2.429.477-1.232.624-2.7.63-4.052q.002-.125-.003-.248l-2.129 2.13a7 7 0 0 1-.364 1.448c-.288.744-.73 1.216-1.304 1.827l-.07.075c-.599.638-1.31 1.423-1.658 2.696a5 5 0 0 0-.059.238C13.52 18.521 12.227 20 10.672 20"/></svg></template>
<script setup lang="ts">
/**
 * HearingDisabled24 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>
