<template>
  <span v-bind="$attrs"
        :aria-hidden="!title ? true : null"
        :aria-label="title ? true : null"
        class="material-design-icon train-car-flatbed-tank-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.22 15C21.7 14.47 22 13.77 22 13C22 11.34 20.66 10 19 10H5C3.34 10 2 11.34 2 13C2 13.77 2.3 14.47 2.78 15H1V17H2C2 18.11 2.9 19 4 19S6 18.11 6 17H18C18 18.11 18.9 19 20 19S22 18.11 22 17H23V15H21.22M19 12C19.55 12 20 12.45 20 13S19.55 14 19 14 18 13.55 18 13 18.45 12 19 12M12 12C12.55 12 13 12.45 13 13S12.55 14 12 14 11 13.55 11 13 11.45 12 12 12M5 12C5.55 12 6 12.45 6 13S5.55 14 5 14 4 13.55 4 13 4.45 12 5 12M13.62 6L13.22 4H22V6H13.62M20 9H4V8H6L7 3H12L13 8H20V9Z">
        <title v-if="title">{{ title }}</title>
      </path>
    </svg>
  </span>
</template>

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