<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="M5.25 2A3.25 3.25 0 0 0 2 5.25V18.5A3.5 3.5 0 0 0 5.5 22H21a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H8.49a3.25 3.25 0 0 0-3.24-3M4 5.25v10.087a3.498 3.498 0 0 1 2.5-.192V5.25a1.25 1.25 0 0 0-2.5 0M5.5 20a1.5 1.5 0 1 1 1.2-2.4 1 1 0 0 0 1.8-.6V7H20v13zm8.777-10.416a.5.5 0 0 0-.554 0l-3 2a.5.5 0 0 0 .554.832L14 10.601l2.5 1.667V16.5H16a.5.5 0 0 0 0 1h1a.5.5 0 0 0 .5-.5v-5a.5.5 0 0 0-.223-.416zM11.5 13.75a.5.5 0 0 0-1 0v1a.5.5 0 0 0 1 0zm0 2.75a.5.5 0 0 0-1 0v.5a.5.5 0 0 0 .5.5h.5a.5.5 0 0 0 0-1m1.75 0a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1z"/></svg></template>
<script setup lang="ts">
/**
 * Project24 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>
