<template>
  <span v-bind="$attrs"
        :aria-hidden="!title ? true : null"
        :aria-label="title ? true : null"
        class="material-design-icon hand-clap-off-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="M22.11 21.46L2.39 1.73L1.11 3L2.97 4.86C2.72 4.96 2.5 5.19 2.5 5.5L2 11.79C1.87 13.83 2.77 15.78 4.35 17C4.33 16.12 4.46 15.21 4.77 14.33L6.8 8.69L7.97 9.86L6.18 14.84C5.35 17.17 6 19.81 7.9 21.47C10.44 23.71 14.32 23.47 16.56 20.92L17.72 19.61L20.84 22.73L22.11 21.46M5 9.84L4.5 9.59L4.71 6.68C4.71 6.65 4.71 6.63 4.71 6.6L5.97 7.86L5 9.84M9.59 13.75L9.16 13.37L9.77 11.66L10.65 12.54L9.59 13.75M14.94 11.74L18.58 7.62C18.93 7.22 19.54 7.18 19.93 7.53C20.33 7.88 20.37 8.5 20 8.89L16.3 13.1L14.94 11.74M19.83 10.26C20.18 9.86 20.79 9.82 21.18 10.17C21.57 10.5 21.62 11.13 21.27 11.5L18.2 15L16.85 13.65L19.83 10.26M21.68 13.67C22.08 14 22.11 14.63 21.76 15L20.1 16.9L18.74 15.54L20.32 13.76C20.67 13.36 21.28 13.32 21.68 13.67M15.55 7C15.9 6.6 16.5 6.56 16.91 6.91C17.3 7.26 17.34 7.87 17 8.26L14.4 11.2L13.04 9.84L15.55 7M11.66 8.46L13.96 3.75C14.19 3.28 14.77 3.08 15.24 3.31C15.72 3.54 15.92 4.12 15.68 4.59L15.3 5.37C14.97 5.5 14.67 5.73 14.43 6L12 8.78L11.66 8.46M9.08 5.88L7.64 4.44L8.97 1.74C9.2 1.26 9.77 1.07 10.25 1.3C10.72 1.53 10.92 2.1 10.69 2.58L9.08 5.88M9.65 6.45L12.05 1.54C12.28 1.06 12.86 .865 13.33 1.1C13.81 1.33 14 1.9 13.78 2.38L11.08 7.88L9.65 6.45Z">
        <title v-if="title">{{ title }}</title>
      </path>
    </svg>
  </span>
</template>

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