<template>
  <span v-bind="$attrs"
        :aria-hidden="!title ? true : null"
        :aria-label="title ? true : null"
        class="material-design-icon rabbit-variant-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.84 14.5C16.58 14.33 16.22 13.89 16.05 13.68C17.24 12 19 8.87 19 5C19 3.05 18.26 2 17 2C15.46 2 13.04 4.06 12 7.97C10.96 4.06 8.54 2 7 2C5.74 2 5 3.05 5 5C5 8.87 6.76 12 7.95 13.68C7.78 13.89 7.42 14.33 7.16 14.5C6.66 14.93 5.5 15.89 5.5 17.5C5.5 19.71 7.29 21.5 9.5 21.5C11.05 21.5 12 20.94 12 20.94S12.95 21.5 14.5 21.5C16.71 21.5 18.5 19.71 18.5 17.5C18.5 15.89 17.34 14.93 16.84 14.5M9.35 12.2C8.34 10.7 7 8.12 7 5C7 4.5 7.06 4.2 7.12 4.03C8.06 4.34 10.36 6.74 10.5 11.67C10.03 11.79 9.66 11.97 9.35 12.2M10.5 16.75C10.22 16.75 10 16.41 10 16S10.22 15.25 10.5 15.25 11 15.59 11 16 10.78 16.75 10.5 16.75M12 19.5C11.45 19.5 11 18.78 11 18.5S11.45 18 12 18 13 18.22 13 18.5 12.55 19.5 12 19.5M13.5 16.75C13.22 16.75 13 16.41 13 16S13.22 15.25 13.5 15.25 14 15.59 14 16 13.78 16.75 13.5 16.75M13.5 11.67C13.64 6.74 15.94 4.34 16.88 4.03C16.94 4.2 17 4.5 17 5C17 8.12 15.66 10.7 14.65 12.2C14.34 11.97 13.97 11.79 13.5 11.67Z">
        <title v-if="title">{{ title }}</title>
      </path>
    </svg>
  </span>
</template>

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