<template>
  <span v-bind="$attrs"
        :aria-hidden="!title ? true : null"
        :aria-label="title ? true : null"
        class="material-design-icon all-inclusive-box-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="M19 12C19 13.84 17.5 15.34 15.66 15.34C14.77 15.34 13.94 15 13.31 14.36L12.71 13.76L13.77 12.71C14.04 13 14.37 13.3 14.37 13.3C14.71 13.65 15.18 13.84 15.67 13.84C16.68 13.84 17.5 13 17.5 12S16.68 10.16 15.67 10.16C15.18 10.16 14.71 10.36 14.37 10.7L10.7 14.36C10.07 15 9.23 15.34 8.34 15.34C6.5 15.34 5 13.84 5 12S6.5 8.66 8.34 8.66C9.23 8.66 10.07 9 10.7 9.64L11.29 10.24L10.23 11.3L9.64 10.7C9.29 10.36 8.83 10.16 8.34 10.16C7.32 10.16 6.5 11 6.5 12S7.32 13.84 8.34 13.84C8.83 13.84 9.29 13.65 9.64 13.3L13.31 9.64C13.94 9 14.77 8.66 15.66 8.66C17.5 8.66 19 10.16 19 12M21 5V19C21 20.11 20.11 21 19 21H5C3.9 21 3 20.11 3 19V5C3 3.89 3.89 3 5 3H19C20.1 3 21 3.89 21 5M19 5H5V19H19V5Z">
        <title v-if="title">{{ title }}</title>
      </path>
    </svg>
  </span>
</template>

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