<template>
  <span v-bind="$attrs"
        :aria-hidden="!title ? true : null"
        :aria-label="title ? true : null"
        class="material-design-icon synagogue-outline-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 4C18.3 4 17 5.3 17 7V7.3L12 3L7 7.3V7C7 5.3 5.7 4 4 4S1 5.3 1 7V21H11V16C11 15.4 11.4 15 12 15S13 15.4 13 16V21H23V7C23 5.3 21.7 4 20 4M20 6C20.5 6 21 6.4 21 7V8H19V7C19 6.4 19.5 6 20 6M4 6C4.6 6 5 6.4 5 7V8H3V7C3 6.4 3.5 6 4 6M3 19V10H5V19H3M17 19H15V16C15 14.4 13.6 13 12 13S9 14.4 9 16V19H7V9.9L12 5.6L17 9.9V19M19 19V10H21V19H19M12 8.5C12.8 8.5 13.5 9.2 13.5 10S12.8 11.5 12 11.5 10.5 10.8 10.5 10 11.2 8.5 12 8.5Z">
        <title v-if="title">{{ title }}</title>
      </path>
    </svg>
  </span>
</template>

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