<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="M7.001 5.171C7.784 4.755 8.765 4.25 10 4.25c1.234 0 2.216.505 2.998.921l.039.02c.818.435 1.365.726 1.963.726a.75.75 0 0 1 .677.428 3.54 3.54 0 0 1 1.74.63c.714.514 1.25 1.364 1.25 2.608 0 1.314-.812 2.403-1.648 3.176a9.9 9.9 0 0 1-2.531 1.669A5.74 5.74 0 0 1 10 16.583a5.74 5.74 0 0 1-4.489-2.155 9.9 9.9 0 0 1-2.53-1.669c-.837-.772-1.648-1.862-1.648-3.176 0-1.244.535-2.094 1.25-2.608a3.54 3.54 0 0 1 1.74-.63A.75.75 0 0 1 5 5.917c.597 0 1.145-.291 1.962-.726zm8.749 5.662V7.866c.254.047.544.148.79.326.328.236.626.636.626 1.391 0 .686-.438 1.403-1.165 2.075q-.178.162-.364.313.112-.553.113-1.138m-11.5 0q0 .585.112 1.138a7 7 0 0 1-.364-.313c-.726-.672-1.165-1.389-1.165-2.075 0-.755.298-1.155.626-1.391.247-.178.537-.279.79-.326zm1.5-3.502v3.502a4.25 4.25 0 0 0 8.5 0V7.331c-.677-.15-1.281-.474-1.799-.752l-.156-.083c-.786-.418-1.471-.746-2.295-.746s-1.51.328-2.295.746l-.157.083c-.518.278-1.122.601-1.798.752M10 7c-.679 0-1.1.289-1.408.512-.313.226-.447.321-.676.321a.5.5 0 0 0 0 1c.563 0 .943-.278 1.205-.47l.057-.041C9.446 8.128 9.649 8 10 8c.35 0 .554.128.822.322l.056.041c.263.192.642.47 1.205.47a.5.5 0 1 0 0-1c-.229 0-.363-.095-.675-.321C11.1 7.289 10.678 7 10 7m-3.307 5.188a.5.5 0 0 1 .702-.078c.996.796 1.826 1.14 2.605 1.14s1.608-.344 2.604-1.14a.5.5 0 1 1 .625.78c-1.088.87-2.133 1.36-3.23 1.36-1.095 0-2.141-.49-3.228-1.36a.5.5 0 0 1-.078-.702m.576-1.819a.5.5 0 1 0-.372.929c1.086.434 2.087.66 3.103.66 1.015 0 2.016-.226 3.102-.66a.5.5 0 0 0-.371-.929c-.998.4-1.872.59-2.731.59-.86 0-1.734-.19-2.731-.59"/></svg></template>
<script setup lang="ts">
/**
 * Mask20 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>
