<template>
  <span
    v-bind="$attrs"
    :aria-hidden="title ? null : true"
    :aria-label="title"
    class="material-design-icon cannabis-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="M16.62 13.42L14.5 11.32C16.84 8.94 19.83 8.11 19.83 8.11C18.87 10.6 17.73 12.27 16.62 13.42M12 2C12 2 10.86 4.3 10.41 7.21L13.72 10.5C13.92 8.45 13.61 5.63 12 2M20.84 22.73L22.11 21.46L2.39 1.73L1.11 3L8.62 10.5C6.5 8.75 4.17 8.11 4.17 8.11C5.7 12.08 7.69 14 9.28 14.97C6.47 14.59 4 16 4 16C6.68 17.19 8.64 17.23 9.94 16.95C8.53 18.1 8.03 19.81 8.03 19.81C10 19.09 11 18.13 11.5 17.35V22H12.5V17.35C13 18.13 14 19.09 15.97 19.81C15.97 19.81 15.47 18.1 14.06 16.95C14.39 17 14.77 17.07 15.2 17.09L20.84 22.73Z">
        <title v-if="title">{{ title }}</title>
      </path>
    </svg>
  </span>
</template>

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