<template>
  <span v-bind="$attrs"
        :aria-hidden="!title ? true : null"
        :aria-label="title ? true : null"
        class="material-design-icon beehive-off-outline-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="M1.1 3L4.7 6.5C3.7 7.2 3 8.2 3 9.5C3 10.1 3.2 10.7 3.5 11.2C2 11.6 1 12.9 1 14.5C1 15.8 1.7 16.8 2.7 17.5C2.2 18 2 18.7 2 19.5C2 21.4 3.6 23 5.5 23H18.5C19.3 23 20 22.7 20.6 22.3L21.3 23L22.6 21.7L2.4 1.7L1.1 3M9.2 11H6.5C5.7 11 5 10.3 5 9.5C5 8.8 5.5 8.2 6.2 8L9.2 11M9 21H5.5C4.7 21 4 20.3 4 19.5S4.7 18 5.5 18H9V21M9.2 16H4.5C3.7 16 3 15.3 3 14.5S3.7 13 4.5 13H11.2L12.2 14H12C10.7 14 9.6 14.8 9.2 16M18.5 21H15V18H16.2L19.1 20.9C18.9 21 18.7 21 18.5 21M7.1 3.9L5.7 2.5C6.3 1.6 7.3 1 8.5 1H15.5C17.4 1 19 2.6 19 4.5C19 5.1 18.8 5.7 18.5 6.2C20 6.6 21 7.9 21 9.5C21 10.1 20.8 10.7 20.5 11.2C21.9 11.7 23 13 23 14.5C23 15.8 22.3 16.8 21.3 17.5C21.6 17.9 21.8 18.3 21.9 18.7L19.2 16H19.5C20.3 16 21 15.3 21 14.5S20.3 13 19.5 13H16.2L14.2 11H17.5C18.3 11 19 10.3 19 9.5S18.3 8 17.5 8H11.2L9.2 6H15.5C16.3 6 17 5.3 17 4.5S16.3 3 15.5 3H8.5C7.9 3 7.3 3.4 7.1 3.9Z">
        <title v-if="title">{{ title }}</title>
      </path>
    </svg>
  </span>
</template>

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