<template>
  <span v-bind="$attrs"
        :aria-hidden="!title ? true : null"
        :aria-label="title ? true : null"
        class="material-design-icon language-xaml-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="M16.93 7.9L19.31 12L16.95 16.09L16.33 15L17.8 12.5C17.97 12.19 17.97 11.83 17.8 11.54L16.32 9L16.93 7.9M16.92 6.57C16.89 6.57 16.85 6.59 16.83 6.62L15.56 8.87C15.5 8.94 15.5 9 15.56 9.09L17.18 11.9C17.22 11.97 17.22 12.05 17.18 12.12L15.57 14.91C15.53 14.97 15.53 15.06 15.57 15.13L16.85 17.36C16.87 17.4 16.91 17.42 16.94 17.42C17 17.42 17 17.4 17.04 17.36L20 12.23C20.08 12.09 20.08 11.92 20 11.79L17 6.62C17 6.59 16.96 6.57 16.92 6.57M21.91 11.67L17.23 3.58C17.11 3.38 16.89 3.25 16.66 3.25H7.28C7.05 3.25 6.83 3.38 6.71 3.58L2 11.67C1.91 11.87 1.91 12.13 2 12.33L6.71 20.42C6.83 20.62 7.05 20.75 7.28 20.75H16.66C16.89 20.75 17.11 20.62 17.23 20.42L21.91 12.33C22.03 12.13 22.03 11.88 21.91 11.67M7.3 3.95H16.12L11.76 11.65H6.93L10.87 4.82C10.91 4.75 10.86 4.66 10.78 4.66L8.21 4.65C8.13 4.65 8.06 4.7 8 4.76L4.04 11.65H2.84L7.3 3.95M6.17 12.46L9.74 18.63L8.5 18.63L4.87 12.35L4.67 12L4.87 11.65L8.5 5.37L9.73 5.37L6.17 11.53C6.15 11.57 6.13 11.61 6.11 11.65C6.03 11.88 6.03 12.13 6.12 12.35C6.13 12.39 6.15 12.43 6.17 12.46M7.3 20.05L2.85 12.35H4.05L8.03 19.23C8.07 19.3 8.14 19.34 8.22 19.34L10.79 19.34C10.87 19.34 10.92 19.25 10.88 19.18L6.94 12.35H11.77L16.17 20.05H7.3M16.8 19.75L12.37 12L16.78 4.21L21.29 12L16.8 19.75Z">
        <title v-if="title">{{ title }}</title>
      </path>
    </svg>
  </span>
</template>

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