<template>
  <span v-bind="$attrs"
        :aria-hidden="!title ? true : null"
        :aria-label="title ? true : null"
        class="material-design-icon gantry-crane-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="M21,6H22V4H21V3H18V4H6V3H3V4H2V6H3V20H2V22H7V20H6V6H11V7H11.5V10.62C11,10.79 10.69,11.25 10.69,11.76C10.69,12.2 10.92,12.6 11.3,12.82V14H11.92C12.26,14 12.54,14.27 12.55,14.61C12.55,14.96 12.28,15.24 11.93,15.24C11.71,15.24 11.5,15.12 11.39,14.93C11.22,14.64 10.84,14.54 10.55,14.71C10.26,14.87 10.15,15.25 10.32,15.55C10.65,16.12 11.26,16.47 11.92,16.47C12.94,16.46 13.76,15.62 13.75,14.6C13.74,13.83 13.26,13.14 12.53,12.88V12.82C13.12,12.5 13.34,11.78 13.03,11.2C12.92,11 12.74,10.81 12.53,10.7V7H13V6H18V20H17V22H22V20H21V6M5,15.29V16.71L4,17.71V16.29L5,15.29M4,20V19.24L5,18.24V19.66L4.66,20H4M4,7.29L5,6.29V7.71L4,8.71V7.29M4,10.29L5,9.29V10.71L4,11.71V10.29M4,13.29L5,12.29V13.71L4,14.71V13.24L4,13.29M20,15.29V16.71L19,17.71V16.29L20,15.29M19,20V19.24L20,18.24V19.66L19.66,20H19M19,7.29L20,6.29V7.71L19,8.71V7.29M19,10.29L20,9.29V10.71L19,11.71V10.29M19,13.29L20,12.29V13.71L19,14.71V13.24L19,13.29Z">
        <title v-if="title">{{ title }}</title>
      </path>
    </svg>
  </span>
</template>

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