<template>
  <span
    v-bind="$attrs"
    :aria-hidden="title ? null : true"
    :aria-label="title"
    class="material-design-icon waze-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="M20.54,6.63C21.23,7.57 21.69,8.67 21.89,9.82C22.1,11.07 22,12.34 21.58,13.54C21.18,14.71 20.5,15.76 19.58,16.6C18.91,17.24 18.15,17.77 17.32,18.18C17.73,19.25 17.19,20.45 16.12,20.86C15.88,20.95 15.63,21 15.38,21C14.27,21 13.35,20.11 13.31,19C13.05,19 10.73,19 10.24,19C10.13,20.14 9.11,21 7.97,20.87C6.91,20.77 6.11,19.89 6.09,18.83C6.1,18.64 6.13,18.44 6.19,18.26C4.6,17.73 3.21,16.74 2.19,15.41C1.86,14.97 1.96,14.34 2.42,14C2.6,13.86 2.82,13.78 3.05,13.78C3.77,13.78 4.05,13.53 4.22,13.15C4.46,12.43 4.6,11.68 4.61,10.92C4.64,10.39 4.7,9.87 4.78,9.35C5.13,7.62 6.1,6.07 7.5,5C9.16,3.7 11.19,3 13.29,3C14.72,3 16.13,3.35 17.4,4C18.64,4.62 19.71,5.5 20.54,6.63M16.72,17.31C18.5,16.5 19.9,15.04 20.59,13.21C22.21,8.27 18,4.05 13.29,4.05C12.94,4.05 12.58,4.07 12.23,4.12C9.36,4.5 6.4,6.5 5.81,9.5C5.43,11.5 6,14.79 3.05,14.79C4,16 5.32,16.93 6.81,17.37C7.66,16.61 8.97,16.69 9.74,17.55C9.85,17.67 9.94,17.8 10,17.94C10.59,17.94 13.2,17.94 13.55,17.94C14.07,16.92 15.33,16.5 16.35,17.04C16.5,17.12 16.6,17.21 16.72,17.31M10.97,10.31C10.39,10.34 9.88,9.9 9.85,9.31C9.82,8.73 10.27,8.23 10.85,8.19C11.43,8.16 11.94,8.61 11.97,9.25C12,9.8 11.56,10.27 11,10.29L10.97,10.31M15.66,10.31C15.08,10.34 14.57,9.9 14.54,9.31C14.5,8.73 14.96,8.23 15.54,8.19C16.12,8.16 16.63,8.61 16.66,9.25C16.68,9.8 16.25,10.27 15.66,10.29V10.31M9.71,12.07C9.65,11.79 9.84,11.5 10.12,11.45C10.4,11.4 10.68,11.58 10.74,11.86V11.86C11.09,12.97 12.16,13.69 13.32,13.6C14.46,13.66 15.5,12.96 15.89,11.88C16.03,11.62 16.35,11.5 16.6,11.65C16.78,11.75 16.89,11.92 16.89,12.12C16.7,12.83 16.26,13.45 15.66,13.88C14.97,14.36 14.16,14.63 13.32,14.64H13.21C11.58,14.71 10.11,13.64 9.68,12.06L9.71,12.07Z">
        <title v-if="title">{{ title }}</title>
      </path>
    </svg>
  </span>
</template>

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