<template>
  <span v-bind="$attrs"
        :aria-hidden="!title ? true : null"
        :aria-label="title ? true : null"
        class="material-design-icon microsoft-sharepoint-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="M22 13.25Q22 14.29 21.6 15.2 21.21 16.1 20.53 16.78 19.85 17.46 18.94 17.86 18.03 18.25 17 18.25 16.36 18.25 15.73 18.09 15.64 18.92 15.27 19.63 14.89 20.35 14.3 20.88 13.72 21.41 12.97 21.7 12.21 22 11.38 22 10.47 22 9.67 21.65 8.88 21.31 8.28 20.72 7.69 20.13 7.35 19.33 7 18.53 7 17.63V17.31Q7.03 17.16 7.05 17H2.83Q2.5 17 2.24 16.76 2 16.5 2 16.17V7.83Q2 7.5 2.24 7.24 2.5 7 2.83 7H5.78Q5.9 5.94 6.39 5 6.87 4.11 7.63 3.44 8.38 2.76 9.34 2.38 10.3 2 11.38 2 12.54 2 13.56 2.44 14.59 2.89 15.35 3.65 16.11 4.41 16.56 5.44 17 6.46 17 7.63V7.94Q17 8.09 16.96 8.25 18 8.25 18.91 8.64 19.83 9.03 20.5 9.71 21.21 10.38 21.6 11.29 22 12.21 22 13.25M11.37 3.25Q10.56 3.25 9.83 3.54 9.09 3.82 8.5 4.32 7.94 4.82 7.55 5.5 7.17 6.2 7.05 7H11.17Q11.5 7 11.76 7.25 12 7.5 12 7.83V11.95L12.18 11.92Q12.35 11.3 12.68 10.74 13 10.17 13.47 9.72 13.92 9.27 14.5 8.93 15.04 8.6 15.67 8.43 15.75 8 15.75 7.63 15.75 6.72 15.4 5.92 15.06 5.13 14.46 4.54 13.87 3.95 13.08 3.6 12.28 3.25 11.37 3.25M7.1 15.25Q7.55 15.25 8 15.16 8.42 15.07 8.76 14.85 9.1 14.64 9.31 14.29 9.5 13.93 9.5 13.41 9.5 12.88 9.3 12.53 9.08 12.18 8.75 11.94 8.42 11.71 8.04 11.56L7.32 11.27Q7 11.14 6.77 11 6.55 10.85 6.55 10.62 6.55 10.46 6.67 10.35 6.79 10.25 6.95 10.2 7.11 10.13 7.28 10.11 7.46 10.1 7.58 10.1 8.07 10.1 8.46 10.22 8.84 10.35 9.25 10.6V9.12Q9 9.05 8.81 9 8.61 8.95 8.42 8.92 8.22 8.89 8 8.87 7.8 8.86 7.55 8.86 7.12 8.86 6.67 8.95 6.22 9.05 5.85 9.27 5.5 9.5 5.26 9.83 5.03 10.18 5.03 10.69 5.03 11.19 5.25 11.5 5.47 11.85 5.8 12.09 6.13 12.32 6.5 12.5L7.22 12.79Q7.56 12.93 7.78 13.08 8 13.24 8 13.46 8 13.65 7.89 13.76 7.79 13.87 7.63 13.92 7.5 14 7.31 14H7Q6.41 14 5.96 13.82 5.5 13.62 5.04 13.3V14.86Q6.03 15.25 7.1 15.25M11.37 20.75Q12 20.75 12.58 20.5 13.15 20.26 13.58 19.84 14 19.41 14.25 18.84 14.5 18.27 14.5 17.63 14.5 17.07 14.31 16.56 14.13 16.05 13.8 15.65 13.46 15.24 13 14.96 12.55 14.68 12 14.56V16.17Q12 16.5 11.76 16.76 11.5 17 11.17 17H8.31Q8.25 17.31 8.25 17.63 8.25 18.27 8.5 18.84 8.74 19.41 9.16 19.84 9.59 20.26 10.16 20.5 10.73 20.75 11.37 20.75M17 17Q17.77 17 18.45 16.71 19.14 16.42 19.65 15.9 20.16 15.39 20.46 14.71 20.75 14.03 20.75 13.25 20.75 12.5 20.46 11.8 20.16 11.11 19.65 10.6 19.14 10.09 18.45 9.79 17.77 9.5 17 9.5 16.23 9.5 15.55 9.8 14.87 10.1 14.36 10.61 13.85 11.12 13.55 11.8 13.25 12.5 13.25 13.25V13.46L13.27 13.68Q13.73 13.9 14.12 14.22 14.5 14.54 14.82 14.93 15.12 15.33 15.34 15.79 15.55 16.25 15.66 16.74 16.32 17 17 17Z">
        <title v-if="title">{{ title }}</title>
      </path>
    </svg>
  </span>
</template>

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