<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="M5.5 2.5a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 .75.75v6.75h3a.75.75 0 0 1 .75.75v7.5a.75.75 0 0 1-.75.75h-15a.75.75 0 0 1-.75-.75V10a.75.75 0 0 1 .75-.75h3zM7 9.25h6v-6H7zm9.75 1.5h-6v6h6zm-7.5 0h-6v6h6zm.3-6.386L7.887 7.693a.5.5 0 1 0 .895.447l.486-.973h1.466l.487.973a.5.5 0 1 0 .894-.447L10.45 4.364a.5.5 0 0 0-.9 0M10 5.701l.233.466h-.466zm3 8.049a1.167 1.167 0 0 1 1.938-.875.5.5 0 0 0 .662-.75 2.167 2.167 0 1 0 0 3.25.5.5 0 0 0-.662-.75A1.167 1.167 0 0 1 13 13.75m-8.083-1.667a.5.5 0 0 1 .5-.5h.833a1.333 1.333 0 0 1 1.198 1.92 1.333 1.333 0 0 1-.781 2.414h-1.25a.5.5 0 0 1-.5-.5zm1 2.834h.75a.333.333 0 0 0 0-.667h-.75zm.333-2.334h-.333v.667h.333a.333.333 0 1 0 0-.667"/></svg></template>
<script setup lang="ts">
/**
 * Kids20 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>
