<template>
  <span v-bind="$attrs"
        :aria-hidden="!title ? true : null"
        :aria-label="title ? true : null"
        class="material-design-icon horse-human-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="M10 3.5C10 2.67 10.67 2 11.5 2S13 2.67 13 3.5 12.33 5 11.5 5 10 4.33 10 3.5M22 8V11.5L20.97 11.85C20.8 13.06 19.76 14 18.5 14H18.42C18.28 14.68 17.95 15.29 17.5 15.78V22H15V17C14.92 17 14.84 17 14.75 17C14.54 17 14.33 16.97 14.13 16.94L9.69 16.2L8.57 18.21L9.32 22H6.78L6 18.25C5.97 17.95 6 17.65 6.16 17.39L7.18 15.58C6.2 15.03 5.53 14 5.5 12.81C5.46 12.96 5.44 13.18 5.47 13.5C5.5 13.94 5.61 14.59 5.54 15.31C5.5 16.03 5.17 16.77 4.75 17.26C4.32 17.75 3.85 18.09 3.35 18.35L2.65 17.65C2.84 17.18 3.03 16.76 3.07 16.37C3.13 16 3.06 15.7 2.95 15.43L2.42 14.3C2.21 13.79 1.95 13.05 2 12.18C2.03 11.33 2.5 10.22 3.39 9.61C4.29 9 5.26 8.91 6.05 9.08C6.55 9.18 7.06 9.42 7.5 9.76C7.87 9.59 8.3 9.5 8.75 9.5H9V8.11C9 7.11 9.68 6.19 10.66 6.03C11.92 5.82 13 6.79 13 8V9.5H14.5V9C14.5 6.79 16.29 5 18.5 5H22L21.11 6.34C21.65 6.7 22 7.31 22 8M20 11.2L18.96 9.54C18.83 9.33 18.5 9.42 18.5 9.67V13C19.33 13 20 12.33 20 11.5V11.2Z">
        <title v-if="title">{{ title }}</title>
      </path>
    </svg>
  </span>
</template>

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