<template>
  <span v-bind="$attrs"
        :aria-hidden="!title ? true : null"
        :aria-label="title ? true : null"
        class="material-design-icon symfony-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="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M16.37,5.7V5.7C17.39,5.67 18.15,6.13 18.21,6.84C18.22,7.15 18.04,7.75 17.42,7.77C16.95,7.79 16.63,7.5 16.62,7.09C16.61,6.93 16.88,6.42 16.88,6.33C16.87,6.06 16.47,6.05 16.36,6.06C14.86,6.11 14.46,8.13 14.14,9.78L14,10.65C14.84,10.78 15.46,10.62 15.8,10.4C16.28,10.09 15.66,9.77 15.74,9.41C15.82,9.04 16.15,8.87 16.41,8.86C16.78,8.85 17.04,9.23 17.03,9.62C17,10.26 16.17,11.14 14.5,11.1C14.28,11.1 14.09,11.08 13.91,11.06C13.3,14.16 12.92,16 11.56,17.58C10.39,18.97 9.2,19.18 8.67,19.2C7.67,19.24 7,18.71 7,18C6.97,17.32 7.57,16.94 7.97,16.93C8.5,16.91 8.87,17.3 8.88,17.74C8.9,18.11 8.7,18.23 8.57,18.3C8.5,18.37 8.35,18.45 8.36,18.6C8.36,18.67 8.43,18.82 8.65,18.81C9.07,18.8 9.34,18.59 9.54,18.45C10.5,17.65 10.88,16.24 11.37,13.68C11.63,12.23 11.82,11.3 12.1,10.38C11.42,9.87 11,9.23 10.09,9C9.46,8.81 9.08,8.96 8.81,9.3C8.5,9.71 8.6,10.23 8.9,10.54C10.05,11.82 10.39,12.38 10.26,13.14C10.06,14.35 8.62,15.27 6.92,14.75C5.47,14.3 5.2,13.28 5.37,12.71C5.53,12.22 5.92,12.12 6.31,12.24C6.73,12.37 6.89,12.87 6.77,13.26C6.75,13.3 6.55,13.67 6.5,13.79C6.41,14.1 6.83,14.31 7.12,14.4C7.77,14.6 8.4,14.26 8.55,13.73C8.7,13.25 8.4,12.91 8.27,12.78C7.38,11.8 6.76,10.93 7.06,9.95C7.18,9.58 7.42,9.18 7.78,8.91C8.53,8.36 9.35,8.26 10.12,8.5C11.13,8.77 11.61,9.44 12.24,9.95C12.59,8.93 13.08,7.92 13.81,7.07C14.47,6.3 15.35,5.74 16.37,5.7Z">
        <title v-if="title">{{ title }}</title>
      </path>
    </svg>
  </span>
</template>

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