<template>
  <span v-bind="$attrs"
        :aria-hidden="!title"
        :aria-label="title"
        class="material-design-icon bed-clock-icon"
        role="img"
        @click="$emit('click', $event)">
    <svg :fill="fillColor"
         class="material-design-icon__svg"
         :width="size"
         :height="size"
         viewBox="0 0 24 24">
      <path d="M19.2 9.5L16 7.7V4H17.5V6.8L19.9 8.2L19.2 9.5M22.2 11.7C22.7 12.4 23 13.2 23 14V23H21V20H3V23H1V8H3V17H11V10.6C10.4 9.5 10 8.3 10 7C10 3.1 13.1 0 17 0S24 3.1 24 7C24 8.8 23.3 10.4 22.2 11.7M12 7C12 9.8 14.2 12 17 12S22 9.8 22 7 19.8 2 17 2 12 4.2 12 7M7 16C8.7 16 10 14.7 10 13S8.7 10 7 10 4 11.3 4 13 5.3 16 7 16Z">
        <title v-if="title">{{ title }}</title>
      </path>
    </svg>
  </span>
</template>

<script>
export default {
  name: "BedClockIcon",
  emits: ['click'],
  props: {
    title: {
      type: String,
    },
    fillColor: {
      type: String,
      default: "currentColor"
    },
    size: {
      type: Number,
      default: 24
    }
  }
}
</script>