<template>
  <span v-bind="$attrs"
        :aria-hidden="!title ? true : null"
        :aria-label="title ? true : null"
        class="material-design-icon diving-flippers-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="M20.28,3.66C19.28,3.44 18.54,2.25 17.57,2.04C16.6,1.83 15.4,2.59 14.42,2.37C13.38,2 12.22,2.13 11.28,2.71L11.21,17L11,18C10.64,19.62 11.67,21.22 13.29,21.58C14.9,21.93 16.5,20.91 16.86,19.29L17.07,18.29L23,5.28C22.39,4.35 21.39,3.76 20.28,3.66M14.91,18.86C14.79,19.41 14.25,19.76 13.7,19.65C13.14,19.53 12.79,19 12.91,18.43L13.77,14.5C13.86,13.97 14.37,13.6 14.92,13.69C15.46,13.78 15.83,14.3 15.74,14.84C15.74,14.88 15.73,14.91 15.72,14.95L14.91,18.86M9.72,21.34C9.33,20.73 9.08,20.05 9,19.34L8.24,16C8.1,15.47 8.41,14.92 9,14.76C9.07,14.75 9.15,14.75 9.22,14.76V3.43C8.31,3.43 7.22,2.86 6.38,3.06C5.54,3.26 4.69,4.44 3.72,4.66C2.61,4.76 1.61,5.35 1,6.28L6.93,19.28L7.14,20.28C7.5,21.9 9.09,22.92 10.71,22.57H10.81C10.38,22.22 10,21.81 9.72,21.34Z">
        <title v-if="title">{{ title }}</title>
      </path>
    </svg>
  </span>
</template>

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