<template>
  <span
    v-bind="$attrs"
    :aria-hidden="title ? null : true"
    :aria-label="title"
    class="material-design-icon quora-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="M19.7,18.8C20.2,18.2 20.1,17.7 20.1,17.7H21.6C21.6,17.7 21.6,18.1 21.5,18.6C21.4,19 21.3,19.3 21.2,19.6C21,20.3 20,21.1 20,21.1C18.9,22 17.7,21.9 17.7,21.9C17.7,21.9 16.3,22.1 15.2,21.4C14.1,20.7 13.2,19.2 13.2,19.2C13.2,19.2 8.8,20.4 5.4,17.5C2,14.6 2.2,11.1 2.2,10.8C2.2,10.1 2.6,2.3 10.8,2C15.6,1.8 18.2,4.8 19.2,7.2C19.9,8.9 19.9,10.2 19.9,10.4C19.9,10.6 19.9,11.5 19.7,12.4C19.6,13.3 19.2,14.3 18.9,14.8C18.6,15.3 18.2,16 17.7,16.5C17.2,17.1 16.6,17.6 16.5,17.7C16.5,17.7 17.5,18.9 18.1,19.1C18.3,19.1 19.2,19.4 19.7,18.8M12.7,17.3C12.8,17.2 12.4,16.7 12.2,16.4C12,16.1 12.3,16.5 11.5,15.4C11.2,14.9 10.8,14.7 10.2,14.6C10,14.6 9.7,14.6 9.5,14.6C9,14.6 8.7,14.7 8.6,14.7C8.6,14.6 8.4,14.4 8.3,14.2C8.2,14 8.2,13.7 8.2,13.7C8.2,13.5 9.7,12.8 11.4,12.8C12.8,12.8 13.8,13.6 14.2,14C14.6,14.3 14.7,14.7 15.1,15C15.1,15 15.2,15 15.2,15.1C15.6,15.4 16.1,12.1 16,9.9C15.9,7.7 15.8,6.6 15,5.5C14.3,4.5 12.8,3.7 11.4,3.7C10.7,3.7 8.4,3.8 7.4,5.5C6.2,7.5 6.4,11.1 6.4,11.1C6.4,11.1 6.1,14.3 7.8,16C9.5,17.7 11.2,17.4 12,17.4L12.7,17.3Z">
        <title v-if="title">{{ title }}</title>
      </path>
    </svg>
  </span>
</template>

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