<template><svg aria-hidden="true" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48px" height="48px"><path d="M24 4.5c5.108 0 9.8.803 13.272 2.152 1.73.673 3.233 1.511 4.329 2.519C42.698 10.18 43.5 11.47 43.5 13v22c0 1.528-.802 2.82-1.9 3.83-1.095 1.007-2.598 1.845-4.328 2.518C33.8 42.698 29.108 43.5 24 43.5s-9.8-.803-13.271-2.152c-1.731-.673-3.234-1.511-4.33-2.519S4.5 36.53 4.5 35V13c0-1.528.802-2.82 1.9-3.83 1.095-1.007 2.598-1.845 4.329-2.518C14.199 5.302 18.892 4.5 24 4.5m16.5 27.083c-.937.686-2.096 1.288-3.41 1.799C33.692 34.704 29.063 35.5 24 35.5c-4.09 0-7.896-.52-11-1.417V35a1 1 0 1 1-2 0v-1.585l-.09-.033c-1.314-.51-2.473-1.113-3.41-1.799V35c0 .405.205.954.93 1.62.726.668 1.859 1.338 3.385 1.932C14.86 39.736 19.167 40.5 24 40.5s9.14-.764 12.185-1.948c1.526-.594 2.66-1.264 3.385-1.932.725-.666.93-1.215.93-1.62zm0-7c-.937.686-2.096 1.288-3.41 1.799C33.692 27.704 29.063 28.5 24 28.5c-4.09 0-7.896-.52-11-1.417V28.5a1 1 0 1 1-2 0v-2.085l-.09-.033c-1.314-.51-2.473-1.113-3.41-1.799v4.251c.156.212.35.432.592.654.787.724 1.982 1.423 3.543 2.03C14.75 32.729 19.12 33.5 24 33.5c4.879 0 9.25-.771 12.365-1.982 1.56-.607 2.756-1.306 3.543-2.03.242-.222.436-.442.592-.654zm0-6.888c-.925.632-2.021 1.183-3.228 1.653C33.8 20.698 29.108 21.5 24 21.5c-4.066 0-7.867-.51-11-1.398V22a1 1 0 1 1-2 0v-2.552q-.137-.05-.271-.1c-1.208-.47-2.304-1.02-3.229-1.653v4.139c.156.212.35.432.592.654.787.724 1.982 1.423 3.543 2.03C14.75 25.729 19.12 26.5 24 26.5c4.879 0 9.25-.771 12.365-1.982 1.56-.607 2.756-1.306 3.543-2.03.242-.222.436-.442.592-.654zM24 7.5c-4.833 0-9.14.764-12.185 1.948-1.526.594-2.66 1.264-3.385 1.932-.725.666-.93 1.215-.93 1.62s.205.954.93 1.62c.726.668 1.859 1.338 3.385 1.932C14.86 17.736 19.167 18.5 24 18.5s9.14-.764 12.185-1.948c1.526-.594 2.66-1.264 3.385-1.932.725-.666.93-1.215.93-1.62s-.205-.954-.93-1.62c-.726-.668-1.859-1.338-3.385-1.932C33.14 8.264 28.833 7.5 24 7.5"/></svg></template>
<script setup lang="ts">
/**
 * Database48 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>
