<template>
  <span v-bind="$attrs"
        :aria-hidden="!title ? true : null"
        :aria-label="title ? true : null"
        class="material-design-icon khanda-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 20C19.72 18 22 15.27 22 12C22 9.34 20.46 6.9 17.89 5H17.82C19 6.35 19.68 8.09 19.68 10C19.68 13 18 15 15.5 16.83C15.5 16.84 14.38 17.54 13 18.41V17.33L15 16C15 16 14.8 15.4 14.58 14.46C16.6 13.58 18 11.69 18 9.5C18 7.34 16.64 5.47 14.65 4.57C14.84 3.63 15 3 15 3L12 1L9 3C9 3 9.16 3.63 9.35 4.57C7.37 5.47 6 7.34 6 9.5C6 11.69 7.4 13.58 9.42 14.46C9.2 15.4 9 16 9 16L11 17.33V18.41C9.62 17.54 8.5 16.84 8.5 16.83C6 15 4.32 13 4.32 10C4.32 8.09 5 6.35 6.18 5H6.12C3.54 6.9 2 9.34 2 12C2 15.27 4.29 18 8 20L9 18.5L10.92 19.73L7.34 22L8 23L11 21.07V23H13V21.07L16 23L16.66 22L13.08 19.73L15 18.5L16 20M16.75 9.5C16.75 11.09 15.76 12.46 14.31 13.19C14.14 12.23 14 11.12 14 10C14 8.67 14.2 7.15 14.42 5.86C15.81 6.6 16.75 7.95 16.75 9.5M7.25 9.5C7.25 7.95 8.19 6.6 9.59 5.86C9.8 7.15 10 8.67 10 10C10 11.12 9.86 12.23 9.69 13.19C8.24 12.46 7.25 11.09 7.25 9.5Z">
        <title v-if="title">{{ title }}</title>
      </path>
    </svg>
  </span>
</template>

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