<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="M4.988 5.076c.15-.082.408-.16.846-.16v-1.5c-.604 0-1.128.106-1.563.342a2.17 2.17 0 0 0-.937.998C2.999 5.458 3 6.336 3 7.002v.081c0 .785-.015 1.321-.187 1.683a.68.68 0 0 1-.3.324c-.151.083-.408.16-.846.16v1.5c.438 0 .695.077.846.16.139.075.23.177.3.324.172.362.187.898.187 1.683v.081c0 .665-.001 1.543.334 2.246.19.4.49.754.937.997.435.237.959.342 1.563.342v-1.5c-.438 0-.695-.077-.846-.16a.68.68 0 0 1-.3-.324c-.172-.361-.188-.898-.188-1.682v-.082c.001-.665.002-1.543-.333-2.246a2.3 2.3 0 0 0-.402-.59c.169-.176.3-.376.402-.588.335-.703.334-1.58.333-2.246v-.082c0-.784.016-1.32.188-1.683a.68.68 0 0 1 .3-.324m10.025 0c-.151-.082-.408-.16-.846-.16v-1.5c.604 0 1.128.106 1.563.342.447.244.747.598.937.998.335.702.334 1.58.333 2.246v.081c0 .785.016 1.321.188 1.683.07.147.161.249.3.324.15.083.408.16.846.16v1.5c-.438 0-.695.077-.846.16a.68.68 0 0 0-.3.324c-.172.361-.188.898-.188 1.682v.082c.001.665.002 1.543-.333 2.246-.19.4-.49.754-.937.997-.435.237-.96.342-1.563.342v-1.5c.438 0 .695-.077.846-.16a.68.68 0 0 0 .3-.324c.172-.362.187-.898.187-1.683v-.081c0-.665-.001-1.543.334-2.246q.15-.321.402-.59a2.3 2.3 0 0 1-.402-.588c-.335-.703-.334-1.58-.334-2.246v-.082c0-.784-.015-1.32-.187-1.683a.68.68 0 0 0-.3-.324M6.527 7.5h1.238l1.312 4.344H8.034l-.225-.807H6.427l-.218.807h-1zm1.05 2.712-.475-1.68-.456 1.68zM9.65 7.5h1.456q.462 0 .819.169.362.169.562.493.206.325.206.77 0 .455-.206.787-.206.331-.569.506a1.9 1.9 0 0 1-.825.169h-.475v1.45H9.65zm1.38 2.069q.314 0 .488-.163.182-.163.182-.469 0-.3-.175-.45-.17-.156-.47-.156h-.437V9.57zm3.305-2.07h-.968v4.345h.968z"/></svg></template>
<script setup lang="ts">
/**
 * Api20 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>
