<template>
  <span
    v-bind="$attrs"
    :aria-hidden="title ? null : true"
    :aria-label="title"
    class="material-design-icon microsoft-access-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="M14.5 2.63Q15.84 2.63 17.18 2.77L17.85 2.86Q18.3 2.93 18.84 3.04 19.37 3.15 19.93 3.31 20.5 3.47 20.96 3.69 21.42 3.91 21.71 4.19 22 4.47 22 4.81V19.19Q22 19.53 21.71 19.81 21.41 20.09 20.96 20.31 20.5 20.53 19.93 20.69 19.37 20.85 18.83 20.96 18.3 21.07 17.86 21.14 17.41 21.21 17.17 21.23 15.84 21.38 14.5 21.38 13.15 21.38 11.82 21.23 11.59 21.21 11.15 21.14 10.7 21.07 10.16 20.96 9.63 20.85 9.07 20.69 8.5 20.53 8.05 20.31 7.59 20.09 7.29 19.81 7 19.53 7 19.19V17H2.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 7H7V4.81Q7 4.47 7.29 4.19 7.59 3.91 8.05 3.69 8.5 3.47 9.07 3.31 9.63 3.15 10.17 3.04 10.7 2.93 11.14 2.86 11.59 2.8 11.83 2.77 13.15 2.63 14.5 2.63M14.5 3.88Q13.87 3.88 13.08 3.92 12.3 3.96 11.5 4.07 10.69 4.18 9.93 4.36 9.17 4.54 8.58 4.81 9.19 5.1 9.95 5.28 10.7 5.46 11.5 5.56 12.29 5.66 13.07 5.71 13.85 5.75 14.5 5.75 15.16 5.75 15.93 5.71 16.71 5.66 17.5 5.56 18.3 5.46 19.06 5.28 19.81 5.1 20.42 4.81 19.83 4.54 19.07 4.36 18.31 4.18 17.5 4.07 16.7 3.96 15.92 3.92 15.14 3.88 14.5 3.88M5.94 13.79H8.06L8.55 15.28H10.22L7.83 8.72H6.2L3.78 15.28H5.44M20.75 19V16Q20.11 16.31 19.31 16.5 18.5 16.68 17.67 16.79 16.83 16.9 16 16.95 15.19 17 14.5 17 13.79 17 13.08 16.96 12.37 16.91 11.67 16.83 11.44 17 11.17 17H8.25V19Q8.53 19.21 9 19.38 9.5 19.56 10.07 19.68 10.65 19.81 11.29 19.9 11.92 20 12.5 20.03 13.12 20.09 13.64 20.11 14.16 20.13 14.5 20.13 14.84 20.12 15.36 20.1 15.88 20.09 16.5 20.03 17.08 20 17.71 19.9 18.35 19.81 18.93 19.68 19.5 19.56 20 19.38 20.47 19.21 20.75 19M20.75 14.63V11Q20.11 11.31 19.31 11.5 18.5 11.68 17.67 11.79 16.83 11.9 16 11.95 15.19 12 14.5 12 13.88 12 13.25 11.97 12.63 11.93 12 11.87V15.62Q12.63 15.69 13.25 15.72 13.88 15.75 14.5 15.75 14.86 15.75 15.38 15.73 15.9 15.71 16.5 15.66 17.08 15.6 17.7 15.5 18.33 15.44 18.9 15.31 19.5 15.18 19.96 15 20.45 14.85 20.75 14.63M20.75 9.63V6Q20.11 6.31 19.31 6.5 18.5 6.68 17.67 6.79 16.83 6.9 16 6.95 15.19 7 14.5 7 13.81 7 13 6.95 12.17 6.9 11.33 6.79 10.5 6.68 9.69 6.5 8.89 6.31 8.25 6V7H11.17Q11.5 7 11.76 7.24 12 7.5 12 7.83V10.62Q12.63 10.69 13.25 10.72 13.88 10.75 14.5 10.75 14.86 10.75 15.38 10.73 15.9 10.71 16.5 10.66 17.08 10.6 17.7 10.5 18.33 10.44 18.9 10.31 19.5 10.18 19.96 10 20.44 9.85 20.75 9.63M6.32 12.5L7 10.5L7.65 12.5Z">
        <title v-if="title">{{ title }}</title>
      </path>
    </svg>
  </span>
</template>

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