<template>
  <span v-bind="$attrs"
        :aria-hidden="!title ? true : null"
        :aria-label="title ? true : null"
        class="material-design-icon centos-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.07 14.93L22 12L19.07 9.07V4.93H14.93L12 2L9.07 4.93H4.93V9.07L2 12L4.93 14.93V19.07H9.07L12 22L14.93 19.07H19.07V14.93M21.41 12L19.07 14.34V12.46H13.69L13.23 12L13.69 11.54H19.07V9.66L21.41 12M18.66 14.76L17.32 16.09L14.11 12.87H18.66V14.76M12.46 13.1L12 12.65L11.54 13.1V12.46H10.9L11.36 12L10.9 11.54H11.54V10.9L12 11.36L12.46 10.9V11.54H13.1L12.65 12L13.1 12.46H12.46V13.1M14.11 11.13L17.32 7.91L18.66 9.24V11.13H14.11M18.66 5.35V8.65L17.32 7.32L13.5 11.13H12.87V10.5L16.68 6.68L15.35 5.35H18.66M12.87 9.89V5.35H14.76L16.09 6.68L12.87 9.89M12 2.59L14.34 4.93H12.46V10.31L12 10.77L11.54 10.31V4.93H9.66L12 2.59M11.13 9.89L7.91 6.68L9.24 5.35H11.13V9.89M5.35 5.35H8.65L7.32 6.68L11.13 10.5V11.13H10.5L6.68 7.32L5.35 8.65V5.35M5.35 9.24L6.68 7.91L9.89 11.13H5.35V9.24M2.59 12L4.93 9.66V11.54H10.31L10.77 12L10.31 12.46H4.93V14.34L2.59 12M9.89 12.87L6.68 16.09L5.35 14.76V12.87H9.89M5.35 18.66V15.35L6.68 16.68L10.5 12.87H11.13V13.5L7.32 17.32L8.65 18.65H5.35M11.13 14.11V18.66H9.24L7.91 17.32L11.13 14.11M12 21.41L9.66 19.07H11.54V13.69L12 13.23L12.46 13.69V19.07H14.34L12 21.41M12.87 14.11L16.09 17.32L14.76 18.66H12.87V14.11M15.35 18.66L16.68 17.32L12.87 13.5V12.87H13.5L17.32 16.68L18.65 15.35V18.66H15.35Z">
        <title v-if="title">{{ title }}</title>
      </path>
    </svg>
  </span>
</template>

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