<template>
  <span v-bind="$attrs"
        :aria-hidden="!title ? true : null"
        :aria-label="title ? true : null"
        class="material-design-icon peanut-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="M12 23C11.53 23 11.07 22.95 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.72C5.2 8.14 5.6 4.36 8.18 2.28S14.54.607 16.62 3.19C18.39 5.38 18.39 8.5 16.62 10.72C16.33 11.13 16.37 11.7 16.72 12.06C19.17 14.68 19.04 18.8 16.41 21.25C15.22 22.37 13.64 23 12 23M12 3C11.09 3 10.2 3.31 9.5 3.89C8.55 4.65 8 5.79 8 7C8 7.91 8.31 8.79 8.88 9.5C9.84 10.64 9.77 12.33 8.73 13.41C7.03 15.22 7.13 18.07 8.94 19.77S13.6 21.38 15.3 19.56C16.92 17.83 16.92 15.14 15.3 13.41C14.23 12.32 14.15 10.6 15.12 9.41C16.5 7.69 16.22 5.17 14.5 3.79C14 3.41 13.47 3.14 12.88 3C12.59 3 12.29 3 12 3M12 6C12 6.55 12.45 7 13 7S14 6.55 14 6 13.55 5 13 5 12 5.45 12 6M14 19C14.55 19 15 18.55 15 18S14.55 17 14 17 13 17.45 13 18 13.45 19 14 19M13 16C13.55 16 14 15.55 14 15S13.55 14 13 14 12 14.45 12 15 12.45 16 13 16M11 18C11.55 18 12 17.55 12 17S11.55 16 11 16 10 16.45 10 17 10.45 18 11 18Z">
        <title v-if="title">{{ title }}</title>
      </path>
    </svg>
  </span>
</template>

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