<template>
  <span
    v-bind="$attrs"
    :aria-hidden="title ? null : true"
    :aria-label="title"
    class="material-design-icon peanut-off-outline-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.11 21.46L20.84 22.73L17.69 19.58C17.36 20.21 16.93 20.77 16.41 21.25C14.86 22.71 12.69 23.31 10.61 22.85C7.1 22.1 4.87 18.64 5.62 15.13C5.87 13.95 6.45 12.87 7.28 12C7.62 11.64 7.62 11.08 7.28 10.72C6.63 9.91 6.21 8.95 6.04 7.93L1.11 3L2.39 1.73L22.11 21.46M15.3 19.56C15.69 19.13 16 18.63 16.19 18.08L13.75 15.64C13.57 15.87 13.29 16 13 16C12.45 16 12 15.55 12 15C12 14.71 12.13 14.43 12.36 14.25L9.55 11.44C9.53 12.18 9.24 12.88 8.73 13.41C7.03 15.22 7.13 18.07 8.94 19.77L8.95 19.78C10.76 21.47 13.61 21.37 15.3 19.56M14 17C12.71 17 12.72 19 14 19C15.28 19 15.29 17 14 17M6.9 3.7L8.43 5.23C8.68 4.71 9.05 4.25 9.5 3.89C10.2 3.31 11.09 3 12 3H12.88C13.47 3.14 14 3.41 14.5 3.79C16.22 5.17 16.5 7.69 15.12 9.41C14.7 9.93 14.46 10.58 14.45 11.25L18.32 15.12C18.07 13.97 17.5 12.92 16.72 12.06C16.37 11.7 16.33 11.13 16.62 10.72C16.62 10.72 18 9 18 7S15.97.997 12 .997 6.9 3.7 6.9 3.7M12 17C12 15.71 10 15.72 10 17C10 18.28 12 18.29 12 17M13 5C11.71 5 11.72 7 13 7C14.28 7 14.29 5 13 5Z">
        <title v-if="title">{{ title }}</title>
      </path>
    </svg>
  </span>
</template>

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