<template>
  <span v-bind="$attrs"
        :aria-hidden="!title ? true : null"
        :aria-label="title ? true : null"
        class="material-design-icon microsoft-windows-classic-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="M2.67,5.3V5.91L1.96,6.21V5.6L2.67,5.3M2.67,11.24V11.86L1.96,12.15V11.56L2.67,11.24M2.67,17.27V17.89L1.96,18.18V17.59L2.67,17.27M2.6,7.29V7.84L2.03,8.1V7.56L2.6,7.29M2.6,9.28V9.82L2.03,10.08V9.54L2.6,9.28M2.6,13.31V13.84L2.03,14.1V13.56L2.6,13.31M2.6,15.33V15.87L2.03,16.13V15.6L2.6,15.33M4.5,5.64V6.36L3.5,6.73V6L4.5,5.64M4.5,11.66V12.37L3.5,12.74V12.03L4.5,11.66M4.5,17.7V18.41L3.5,18.81V18.1L4.5,17.7M4.43,7.72V8.38L3.64,8.68V8L4.43,7.72M4.43,9.73V10.37L3.65,10.67V10L4.43,9.73M4.43,13.74V14.38L3.65,14.69V14.03L4.43,13.74M4.43,15.76V16.41L3.65,16.72V16.06L4.43,15.76M6.31,6.09V6.94L5.05,7.43V6.59L6.31,6.09M6.31,12.11V12.96L5.05,13.45V12.61L6.31,12.11M6.31,18.08V18.93L5.05,19.43V18.58L6.31,18.08M6.25,8.18V8.94L5.19,9.34V8.61L6.25,8.18M6.25,10.18V10.93L5.19,11.35V10.6L6.25,10.18M6.25,14.19V14.94L5.19,15.37V14.62L6.25,14.19M6.25,16.14V16.9L5.19,17.32V16.57L6.25,16.14M8.29,6.04V7.16L6.72,7.78V6.67L8.29,6.04M8.29,12.06V13.19L6.72,13.8V12.68L8.29,12.06M8.29,18.03V19.15L6.72,19.77V18.66L8.29,18.03M8.2,8.13V9.16L6.89,9.69V8.66L8.2,8.13M8.2,10.13V11.15L6.89,11.68V10.65L8.2,10.13M8.2,14.15V15.18L6.89,15.7V14.67L8.2,14.15M8.2,16.1V17.12L6.89,17.64V16.63L8.2,16.1M10.34,5.85V7.32L8.61,8V6.56L10.34,5.85M10.34,11.87V13.33L8.61,14.03V12.56L10.34,11.87M10.34,17.84V19.3L8.61,20V18.54L10.34,17.84M10.26,8.05V9.28L8.78,9.87V8.64L10.26,8.05M10.26,9.97V11.2L8.78,11.78V10.56L10.26,9.97M10.26,14.06V15.31L8.78,15.88V14.65L10.26,14.06M10.26,16V17.25L8.78,17.84V16.6L10.26,16M12.45,5.12V7.12L10.59,7.89V6C11.23,5.65 11.85,5.35 12.45,5.12M12.45,7.33V9.06L10.59,9.84V8.1L12.45,7.33M12.45,9.28V11.04L10.59,11.82V10.06L12.45,9.28M12.45,11.25V13L10.59,13.77V12L12.45,11.25M12.45,13.21V15L10.59,15.78V14L12.45,13.21M12.45,15.21V16.96L10.59,17.76V16L12.45,15.21M12.45,17.17V19.04C11.72,19.32 11.1,19.59 10.59,19.84V17.96L12.45,17.17M22.04,5.18V19.23C20.85,18.44 19.37,18.05 17.59,18.05C16.12,18.05 14.47,18.35 12.65,18.96V17.06C13.62,16.69 14.68,16.42 15.84,16.26V11.69C14.86,11.81 13.8,12.15 12.65,12.71V11.4C13.64,10.94 14.71,10.63 15.84,10.46V6C14.82,6.18 13.76,6.53 12.65,7V5.03C14.27,4.34 15.86,4 17.41,4C19.09,4 20.63,4.39 22.04,5.18M20.15,6.41C19.39,6 18.5,5.82 17.42,5.82C17.29,5.82 17.17,5.83 17.05,5.84V10.38L17.46,10.37C18.37,10.37 19.27,10.5 20.15,10.8V6.41M20.15,12.1C19.34,11.74 18.43,11.56 17.44,11.56C17.31,11.56 17.18,11.57 17.05,11.58V16.16H17.46C18.45,16.16 19.35,16.28 20.15,16.53V12.1H20.15Z">
        <title v-if="title">{{ title }}</title>
      </path>
    </svg>
  </span>
</template>

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