<template>
  <span v-bind="$attrs"
        :aria-hidden="!title ? true : null"
        :aria-label="title ? true : null"
        class="material-design-icon cigar-off-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="M20.84 22.73L18.11 20H18V19.89L17 18.89V20H12V18.73C12.3 18.56 12.55 18.31 12.73 18C13.28 17.05 12.96 15.83 12 15.27V14H12.11L1.11 3L2.39 1.73L22.11 21.46L20.84 22.73M14.5 9.7H16C17.07 9.66 17.96 10.5 18 11.56C18 11.61 18 11.65 18 11.7V13H19.5V11.36C19.42 9.53 17.88 8.12 16.05 8.2L16 8.2H14.5C13.45 8.12 12.65 7.25 12.65 6.2C12.67 5.22 13.5 4.43 14.46 4.45L14.5 4.45V3C12.65 3 11.15 4.5 11.15 6.35S12.65 9.7 14.5 9.7M20.5 10.7L20.5 10.77V13H22V10.76C22 8.62 20.78 6.66 18.85 5.73H18.82C19.58 5 19.9 4 19.8 3H18.32C18.34 3.11 18.35 3.23 18.35 3.35C18.35 4.37 17.5 5.2 16.5 5.2H16.5V6.7C18.71 6.7 20.5 8.5 20.5 10.7M9.27 16C9.45 15.7 9.7 15.45 10 15.27V14H5C4.21 14 3.44 14.32 2.88 14.88C1.71 16.05 1.71 17.95 2.88 19.12C3.45 19.68 4.21 20 5 20H10V18.73C9.05 18.18 8.72 16.95 9.27 16M18 14.8L19.5 16.3V14H18V14.8M20.5 17.3L22 18.8V14H20.5V17.3M11 16C10.45 16 10 16.45 10 17S10.45 18 11 18 12 17.55 12 17 11.55 16 11 16Z">
        <title v-if="title">{{ title }}</title>
      </path>
    </svg>
  </span>
</template>

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