<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.503 4.342a1 1 0 0 0-1.506 0l-1.75 2A1 1 0 0 0 2 7v12a1 1 0 0 0 1 1h3.5a1 1 0 0 0 1-1v-1.5h1.75V19a1 1 0 0 0 1 1h3.5a1 1 0 0 0 1-1v-1.5h1.75V19a1 1 0 0 0 1 1H21a1 1 0 0 0 1-1V7a1 1 0 0 0-.247-.658l-1.75-2a1 1 0 0 0-1.506 0l-1.75 2A1 1 0 0 0 16.5 7v2.5h-1.75V7a1 1 0 0 0-.247-.658l-1.75-2a1 1 0 0 0-1.506 0l-1.75 2A1 1 0 0 0 9.25 7v2.5H7.5V7a1 1 0 0 0-.247-.658zM7.5 10.5v1h1.75v-1zm1.75 2H7.5v2h1.75zm0 3H7.5v1h1.75zm5.5-5v1h1.75v-1zm1.75 2h-1.75v2h1.75zm0 3h-1.75v1h1.75zM4 18V7.376l.75-.857.75.857V18zm7.25 0V7.376l.75-.857.75.857V18zM18.5 7.376V18H20V7.376l-.75-.857z"/></svg></template>
<script setup lang="ts">
/**
 * Garden24 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>
