<template>
  <span v-bind="$attrs"
        :aria-hidden="!title ? true : null"
        :aria-label="title ? true : null"
        class="material-design-icon food-turkey-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="M5.44 7.96L5.96 7.43C6.54 6.85 7.5 6.85 8.1 7.47L8.12 7.5C8.61 8 9.26 8.24 9.97 8.31C10.94 8.4 11.88 8.92 12.5 9.86C13.18 10.94 13.17 12.38 12.46 13.45C11.26 15.3 8.75 15.5 7.28 14C6.72 13.45 6.4 12.74 6.32 12C6.24 11.27 5.95 10.58 5.44 10.07C4.86 9.5 4.86 8.54 5.44 7.96M9.64 16C8.47 16 7.38 15.55 6.57 14.72C5.87 14 5.43 13.1 5.32 12.12C5.29 11.82 5.2 11.43 4.96 11.07C4.36 11.9 4 12.9 4 14C4 15.64 4.8 17.09 6.03 18H19V17C19 13.4 16.61 10.35 13.34 9.35C14.23 10.75 14.21 12.62 13.3 14C12.5 15.25 11.12 16 9.64 16M14.78 7.56H16.05C16.92 7.56 17.68 8.17 17.68 9.26V10H18.93V9C18.93 7.5 17.6 6.36 16.05 6.36H14.78C13.95 6.36 13.24 5.54 13.24 4.7S13.95 3.24 14.78 3.24V2C13.24 2 12 3.24 12 4.78S13.24 7.56 14.78 7.56M4.5 7.55C4.56 7.45 4.64 7.35 4.73 7.25L5.25 6.73C5.34 6.64 5.44 6.57 5.54 6.5L4.13 5.07C4.27 4.8 4.22 4.45 4 4.22C3.7 3.93 3.22 3.93 2.93 4.22C2.79 4.36 2.72 4.53 2.71 4.71C2.53 4.72 2.36 4.79 2.22 4.93C1.93 5.22 1.93 5.7 2.22 6C2.45 6.22 2.79 6.27 3.07 6.13L4.5 7.55M18.39 4.39C18.9 3.88 19.22 3.19 19.22 2.42H17.97C17.97 3.25 17.27 3.95 16.44 3.95V5.19C18.3 5.19 19.76 6.71 19.76 8.57V11H21V8.57C21 6.72 19.94 5.13 18.39 4.39M5 21H19C20.11 21 21 20.11 21 19H3C3 20.11 3.9 21 5 21Z">
        <title v-if="title">{{ title }}</title>
      </path>
    </svg>
  </span>
</template>

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