<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="M8.355 6.117C9.294 5.618 10.49 5 12 5s2.706.618 3.645 1.117l.027.014c1 .53 1.636.869 2.328.869a1 1 0 0 1 1 1v.037a3.8 3.8 0 0 1 1.667.657C21.421 9.237 22 10.137 22 11.5c0 1.41-.874 2.617-1.848 3.517a11.4 11.4 0 0 1-2.106 1.514A7 7 0 0 1 12 20a7 7 0 0 1-6.045-3.469 11.4 11.4 0 0 1-2.107-1.514C2.874 14.117 2 12.91 2 11.5c0-1.363.58-2.263 1.333-2.806A3.8 3.8 0 0 1 5 8.037V8a1 1 0 0 1 1-1c.692 0 1.329-.338 2.328-.869zM19 13V9.051c.348.068.741.209 1.083.455.496.357.917.957.917 1.994 0 .99-.626 1.95-1.527 2.783a9 9 0 0 1-.73.605c.167-.6.257-1.234.257-1.888M5 13c0 .654.09 1.288.258 1.888a9 9 0 0 1-.731-.605C3.626 13.45 3 12.49 3 11.5c0-1.037.42-1.637.917-1.994A2.8 2.8 0 0 1 5 9.05zm2-4.123V13a5 5 0 0 0 10 0V8.877c-.796-.192-1.504-.571-2.103-.892l-.19-.102C13.764 7.382 12.961 7 12 7s-1.764.382-2.707.883l-.19.102c-.599.32-1.307.7-2.103.892m5-.377c-.782 0-1.265.33-1.631.595l-.011.008c-.363.262-.55.397-.858.397a.5.5 0 0 0 0 1c.642 0 1.073-.315 1.388-.546l.067-.049C11.28 9.67 11.547 9.5 12 9.5s.72.17 1.045.405l.067.049c.315.23.747.546 1.388.546a.5.5 0 0 0 0-1c-.309 0-.495-.135-.857-.397l-.012-.008C13.265 8.83 12.781 8.5 12 8.5m-3.89 6.188a.5.5 0 0 1 .702-.078C10.017 15.573 11.034 16 12 16s1.983-.427 3.188-1.39a.5.5 0 1 1 .624.78C14.517 16.427 13.284 17 12 17s-2.517-.573-3.812-1.61a.5.5 0 0 1-.078-.702m.576-2.152a.5.5 0 1 0-.372.928c1.294.518 2.483.786 3.686.786s2.392-.268 3.686-.786a.5.5 0 1 0-.372-.928c-1.206.482-2.267.714-3.314.714s-2.108-.232-3.314-.714"/></svg></template>
<script setup lang="ts">
/**
 * Mask24 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>
