<template>
  <span v-bind="$attrs"
        :aria-hidden="!title ? true : null"
        :aria-label="title ? true : null"
        class="material-design-icon sun-compass-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="M9.7 4.3L12 1L14.3 4.3C13.6 4.1 12.8 4 12 4S10.4 4.1 9.7 4.3M17.5 6.2C18.6 7.3 19.5 8.7 19.8 10.3L21.5 6.6L17.5 6.2M5 8.1C5.1 8 5.1 8 5 8.1C5.1 8 5.1 8 5.1 7.9C5.5 7.3 6 6.7 6.5 6.2L2.5 6.5L4.2 10.2C4.4 9.5 4.7 8.7 5 8.1M19.2 15.4C19.2 15.4 19.2 15.5 19.2 15.4C19.1 15.6 19 15.8 18.9 15.9V16.1C18.5 16.8 18 17.3 17.5 17.9L21.6 17.6L19.9 13.9C19.7 14.4 19.5 14.9 19.2 15.4M5.2 16.2C5.2 16.1 5.1 16.1 5.1 16C5 15.9 5 15.9 5 15.8C4.9 15.6 4.8 15.5 4.8 15.3C4.6 14.8 4.4 14.3 4.3 13.8L2.6 17.5L6.7 17.8C6 17.3 5.6 16.8 5.2 16.2M12.6 20H11.4C10.8 20 10.2 19.8 9.7 19.7L12 23L14.3 19.7C13.8 19.8 13.2 19.9 12.6 20M16.2 7.8C13.9 5.5 10.1 5.5 7.7 7.8S5.4 13.9 7.7 16.3 13.8 18.6 16.2 16.3 18.6 10.1 16.2 7.8M8.5 15.5L10.6 10.6L15.6 8.4L13.5 13.3L8.5 15.5M12.7 12.7C12.3 13.1 11.7 13.1 11.3 12.7C10.9 12.3 10.9 11.7 11.3 11.3C11.7 10.9 12.3 10.9 12.7 11.3C13.1 11.7 13.1 12.3 12.7 12.7Z">
        <title v-if="title">{{ title }}</title>
      </path>
    </svg>
  </span>
</template>

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