<template>
  <span
    v-bind="$attrs"
    :aria-hidden="title ? null : true"
    :aria-label="title"
    class="material-design-icon battlenet-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="M19.92,10.76C19.92,10.76 22.5,12.24 22.5,13.89C22.5,15.5 19.5,16.06 16.18,15.9C16.18,15.9 14.77,17.87 13.42,18.7C14.88,21.44 16,22.5 15.97,22.5C15.97,22.5 15.23,22.69 13,19.04C11.66,19.89 10.17,20.23 9.56,19.7C8.94,19.17 9.42,18.28 9.68,17.85C9.41,18 8,18.83 6.75,18.83C5.26,18.83 5.05,17.72 5.05,17.15C5.05,15 7.12,12 7.12,12C7.12,12 6.16,9.88 6.05,8.22C4.17,8.06 2,8.39 1.53,8.54C1.4,8.54 1.84,8.22 2,8.18C2.15,8.13 3.91,7.67 6,7.67C6,5.93 6.35,4.33 7.41,4.33C8.13,4.33 8.71,5.45 8.71,5.45C8.71,5.45 8.7,1.5 10.74,1.5C12.8,1.5 15,6.11 15,6.11C15,6.11 17.22,6.32 18.85,7.09C19.5,5.73 20.09,5.11 20.81,3C21,3.7 20.2,5.5 19.35,7.3V7.3H19.35C19.35,7.3 21.65,8.5 21.65,9.83C21.65,10.84 19.92,10.76 19.92,10.76M10.68,18.58C11.36,18.69 12.41,18.1 12.4,18.1L11.58,16.57L10.4,17.4C10.39,17.41 9.64,18.38 10.68,18.58M20.15,9.76C20.15,9.1 18.95,8.35 18.81,8.27L17.89,9.75L19.17,10.37C19.59,10.34 20.15,10.35 20.15,9.76M8,5.63C7.7,5.63 7.09,6.07 7.09,7.64L8.83,7.7L8.72,6.3C8.6,6 8.3,5.63 8,5.63M10.18,15.78C8.92,15.13 8.16,14.06 7.54,12.9C7.54,12.9 5.96,15.55 6.97,16.22C8,16.89 9.64,16.16 10.18,15.78M12.97,17.76C14.11,16.89 17.19,14.73 17.45,11.08C14.57,9.44 10.62,8.71 10.62,8.71C10.62,8.71 10.61,8.21 10.7,7.86C11.64,7.97 14.59,8.47 17.03,9.43C16.35,8.28 15.84,7.85 15.37,7.5C16.53,7.76 17.36,9.26 17.36,9.26L18.28,7.96C18.28,7.96 13.91,5.61 10.19,7.42C10.11,10.3 11.59,14.56 11.59,14.56L10.82,14.89C10.3,13.84 9.63,12.09 9,8.67C8.7,9.08 8.17,9.55 8.16,11.09C7.7,9.8 8.66,8.43 8.67,8.42L7.07,8.26C7.17,9.92 8.05,14.2 10.68,15.53C13,14.21 15.5,11.54 16.13,10.77L16.82,11.28L12.35,15.97C13.59,16 14.32,15.72 14.82,15.5C14.1,16.25 12.86,16.32 12.27,16.32C12.28,16.34 12.57,17.07 12.97,17.76M14.03,6.05C14,5.97 12.66,3.69 11.47,3.86C10.69,4.11 10.24,5.43 10.23,6.87C10.76,6.56 12,6 14.03,6.05M16.71,15.07C16.71,15.07 20,15 19.9,13.76C19.9,12.56 17.92,11.33 17.92,11.35C17.93,13.47 16.71,15.07 16.71,15.07Z">
        <title v-if="title">{{ title }}</title>
      </path>
    </svg>
  </span>
</template>

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