<template>
  <span v-bind="$attrs"
        :aria-hidden="!title ? true : null"
        :aria-label="title ? true : null"
        class="material-design-icon cow-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="M22.1 21.5L2.4 1.7L1.1 3L6.9 8.8L6.8 9C6.4 8.5 5.8 8.1 5.2 7.9C4.2 7.6 2.3 7.7 2 8.5S3.3 10.5 4.3 10.7C4.8 10.8 5.5 10.8 6 10.7V12C6 13.3 6.5 14.6 7.2 15.6C6.5 16.3 6 17.1 6 18C6 20.2 8.7 22 12 22C14.5 22 16.7 21 17.6 19.5L20.9 22.8L22.1 21.5M9.4 11.2C9.1 11.4 9 11.7 9 12C9 12.6 9.4 13 10 13C10.3 13 10.6 12.9 10.8 12.6L12.2 14H12.1C11 14 9.9 14.2 9 14.6C8.3 13.9 8 13 8 12C8 11.4 8.1 10.8 8.4 10.3L9.4 11.2M16 18C16 19.1 14.2 20 12 20S8 19.1 8 18 9.8 16 12 16C13 16 13.9 16.2 14.6 16.5L16 17.9V18M9.7 6.5L7.8 4.6C8.3 3.9 9 3.3 10 3L9.9 3.1C9.6 3.6 8.9 5 9.7 6.5M11.3 8.1L9.7 6.5C10.4 6.2 11.2 6 12 6S13.6 6.2 14.3 6.5C15.1 5 14.3 3.6 14.1 3.2L14 3C17 4 17.2 7 16.6 8.2L17.2 9C17.6 8.5 18.2 8.1 18.8 7.9C19.8 7.6 21.7 7.7 22 8.5S20.7 10.5 19.7 10.7C19.2 10.8 18.5 10.8 18 10.7V12C18 12.8 17.8 13.6 17.5 14.3L15.9 12.7C15.9 12.5 16 12.2 16 12C16 9.8 14.2 8 12 8C11.8 8 11.5 8 11.3 8.1M14 18.5C14 18.8 13.8 19 13.5 19S13 18.8 13 18.5 13.2 18 13.5 18 14 18.2 14 18.5M11 18.5C11 18.8 10.8 19 10.5 19S10 18.8 10 18.5 10.2 18 10.5 18 11 18.2 11 18.5Z">
        <title v-if="title">{{ title }}</title>
      </path>
    </svg>
  </span>
</template>

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