<template>
  <span v-bind="$attrs"
        :aria-hidden="!title ? true : null"
        :aria-label="title ? true : null"
        class="material-design-icon rabbit-variant-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="M17 14C16.76 13.76 16.56 13.5 16.35 13.25C17.5 11.5 19 8.56 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.56 6.5 11.5 7.65 13.25C7.44 13.5 7.24 13.76 7 14C6.75 14.25 5 15.39 5 17.5C5 20 7 22 9.5 22C11 22 12 21.5 12 21.5S13 22 14.5 22C17 22 19 20 19 17.5C19 15.39 17.25 14.25 17 14M16.88 4.03C16.94 4.2 17 4.5 17 5C17 7.84 15.89 10.24 14.93 11.78C14.55 11.5 14.1 11.3 13.53 11.16C13.77 6.64 15.97 4.33 16.88 4.03M7 5C7 4.5 7.06 4.2 7.12 4.03C8.03 4.33 10.23 6.64 10.5 11.16C9.9 11.3 9.45 11.5 9.08 11.78C8.11 10.24 7 7.84 7 5M14.5 20C13.5 20 12.7 19.67 12.28 19.44C12.7 19.26 13 18.73 13 18.5C13 18.22 12.55 18 12 18S11 18.22 11 18.5C11 18.73 11.3 19.26 11.72 19.44C11.3 19.67 10.5 20 9.5 20C8.12 20 7 18.88 7 17.5C7 16.8 7.43 16.26 8 15.77C8.44 15.41 8.61 15.25 9.3 14.4C10.06 13.45 10.39 13 12 13S13.94 13.45 14.7 14.4C15.39 15.25 15.56 15.41 16 15.77C16.57 16.26 17 16.8 17 17.5C17 18.88 15.88 20 14.5 20M14 16C14 16.41 13.78 16.75 13.5 16.75S13 16.41 13 16 13.22 15.25 13.5 15.25 14 15.59 14 16M11 16C11 16.41 10.78 16.75 10.5 16.75S10 16.41 10 16 10.22 15.25 10.5 15.25 11 15.59 11 16Z">
        <title v-if="title">{{ title }}</title>
      </path>
    </svg>
  </span>
</template>

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