<template>
  <span v-bind="$attrs"
        :aria-hidden="!title ? true : null"
        :aria-label="title ? true : null"
        class="material-design-icon nintendo-wii-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="M17.84,16.94H15.97V10.79H17.84V16.94M18,8.58C18,9.19 17.5,9.69 16.9,9.69A1.11,1.11 0 0,1 15.79,8.58C15.79,7.96 16.29,7.46 16.9,7.46C17.5,7.46 18,7.96 18,8.58M21.82,16.94H19.94V10.79H21.82V16.94M22,8.58C22,9.19 21.5,9.69 20.88,9.69A1.11,1.11 0 0,1 19.77,8.58C19.77,7.96 20.27,7.46 20.88,7.46C21.5,7.46 22,7.96 22,8.58M12.9,8.05H14.9L12.78,15.5C12.78,15.5 12.5,17.04 11.28,17.04C10.07,17.04 9.79,15.5 9.79,15.5L8.45,10.64L7.11,15.5C7.11,15.5 6.82,17.04 5.61,17.04C4.4,17.04 4.12,15.5 4.12,15.5L2,8.05H4L5.72,14.67L7.11,9.3C7.43,7.95 8.45,7.97 8.45,7.97C8.45,7.97 9.47,7.95 9.79,9.3L11.17,14.67L12.9,8.05Z">
        <title v-if="title">{{ title }}</title>
      </path>
    </svg>
  </span>
</template>

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