<template>
  <span v-bind="$attrs"
        :aria-hidden="!title ? true : null"
        :aria-label="title ? true : null"
        class="material-design-icon fedora-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 2C6.5 2 2 6.47 2 12H2V19.73H2C2 21 3 22 4.27 22H12C17.53 22 22 17.5 22 12C22 6.5 17.5 2 12 2M14.03 6.12C15.71 6.12 17.29 7.4 17.29 9.18C17.29 9.34 17.29 9.5 17.27 9.69C17.22 10.16 16.79 10.5 16.32 10.44C15.85 10.37 15.53 9.92 15.62 9.46C15.62 9.4 15.63 9.32 15.63 9.18C15.63 8.17 14.81 7.78 14.03 7.78C13.25 7.78 12.55 8.44 12.55 9.18C12.56 10.03 12.55 10.88 12.55 11.74L14 11.72C15.12 11.7 15.13 13.4 14 13.39L12.55 13.4L12.54 15.79C12.36 17.67 10.77 19.16 8.85 19.16C6.82 19.16 5.14 17.5 5.14 15.46C5.2 13.37 6.88 11.72 9 11.74L10.15 11.73V13.4L9 13.41H8.97C7.81 13.44 6.82 14.23 6.81 15.47C6.81 16.59 7.72 17.5 8.85 17.5C10 17.5 10.88 16.67 10.88 15.47C10.9 13.46 10.87 11.25 10.88 9.17C10.88 9.05 10.89 8.96 10.9 8.83C11.09 7.29 12.47 6.12 14.03 6.12">
        <title v-if="title">{{ title }}</title>
      </path>
    </svg>
  </span>
</template>

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