<template><svg aria-hidden="true" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path d="M12 2c2.577 0 4.956.404 6.727 1.093.882.343 1.664.776 2.243 1.308C21.55 4.934 22 5.642 22 6.5v11c0 .858-.45 1.566-1.03 2.099-.579.532-1.361.965-2.243 1.308C16.956 21.596 14.577 22 12 22s-4.956-.404-6.727-1.093c-.882-.343-1.664-.776-2.243-1.308C2.45 19.066 2 18.358 2 17.5v-11c0-.858.45-1.566 1.03-2.099.579-.532 1.361-.965 2.243-1.308C7.044 2.404 9.423 2 12 2m8 13.962c-.42.272-.91.517-1.455.728-1.7.661-4.014 1.06-6.545 1.06-2.045 0-3.948-.261-5.5-.71v.46a.5.5 0 0 1-1 0v-.793q-.023-.008-.045-.017A8 8 0 0 1 4 15.962V17.5c0 .109.053.322.384.626.332.305.868.627 1.614.917C7.485 19.621 9.606 20 12 20s4.515-.379 6.002-.957c.746-.29 1.282-.612 1.614-.917.331-.305.384-.517.384-.626zm0-3.5c-.42.272-.91.517-1.455.728-1.7.661-4.014 1.06-6.545 1.06-2.045 0-3.948-.261-5.5-.71v.71a.5.5 0 0 1-1 0v-1.043q-.023-.008-.045-.017A8 8 0 0 1 4 12.462v2.236l.046.046c.394.362.991.711 1.771 1.015 1.558.605 3.744.991 6.183.991 2.44 0 4.625-.386 6.183-.991.78-.304 1.377-.653 1.771-1.015l.046-.046zM20 9.3a9 9 0 0 1-1.273.606C16.956 10.596 14.577 11 12 11c-2.021 0-3.92-.25-5.5-.69V11a.5.5 0 0 1-1 0V9.991q-.114-.041-.227-.084A9 9 0 0 1 4 9.301v1.897l.046.046c.394.362.991.711 1.771 1.015 1.558.605 3.744.991 6.183.991 2.44 0 4.625-.386 6.183-.991.78-.304 1.377-.653 1.771-1.015l.046-.046zM12 4c-2.394 0-4.515.379-6.002.957-.746.29-1.282.612-1.614.917C4.053 6.178 4 6.391 4 6.5s.053.322.384.626c.332.305.868.627 1.614.917C7.485 8.621 9.606 9 12 9s4.515-.379 6.002-.957c.746-.29 1.282-.612 1.614-.917.331-.304.384-.517.384-.626s-.053-.322-.384-.626c-.332-.305-.868-.627-1.614-.917C16.516 4.379 14.394 4 12 4"/></svg></template>
<script setup lang="ts">
/**
 * Database24 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>
