<template>
  <span v-bind="$attrs"
        :aria-hidden="!title ? true : null"
        :aria-label="title ? true : null"
        class="material-design-icon hand-front-right-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="M18.5 8C18.33 8 18.16 8 18 8.05V4.5C18 3.12 16.88 2 15.5 2C15.31 2 15.13 2 14.96 2.06C14.75 .89 13.73 0 12.5 0C11.44 0 10.54 .66 10.17 1.59C9.96 1.53 9.73 1.5 9.5 1.5C8.12 1.5 7 2.62 7 4V4.55C6.84 4.5 6.67 4.5 6.5 4.5C5.12 4.5 4 5.62 4 7V15.5C4 20.19 7.81 24 12.5 24S21 20.19 21 15.5V10.5C21 9.12 19.88 8 18.5 8M19 15.5C19 19.09 16.09 22 12.5 22S6 19.09 6 15.5V7C6 6.72 6.22 6.5 6.5 6.5S7 6.72 7 7V12H9V4C9 3.72 9.22 3.5 9.5 3.5S10 3.72 10 4V11H12V2.5C12 2.22 12.22 2 12.5 2S13 2.22 13 2.5V11H15V4.5C15 4.22 15.22 4 15.5 4S16 4.22 16 4.5V13.42C14.23 14.19 13 15.95 13 18H15C15 16.34 16.34 15 18 15V10.5C18 10.22 18.22 10 18.5 10S19 10.22 19 10.5V15.5Z">
        <title v-if="title">{{ title }}</title>
      </path>
    </svg>
  </span>
</template>

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