<template>
  <span v-bind="$attrs"
        :aria-hidden="!title ? true : null"
        :aria-label="title ? true : null"
        class="material-design-icon ev-plug-ccs2-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="M7.5 19C7.5 19.8 6.8 20.5 6 20.5S4.5 19.8 4.5 19 5.2 17.5 6 17.5 7.5 18.2 7.5 19M18 17.5C17.2 17.5 16.5 18.2 16.5 19S17.2 20.5 18 20.5 19.5 19.8 19.5 19 18.8 17.5 18 17.5M18 15H17.7C19.7 13.4 21 10.8 21 8S19.7 2.6 17.7 1H6.3C4.3 2.6 3 5.2 3 8S4.3 13.4 6.3 15H6C3.8 15 2 16.8 2 19S3.8 23 6 23H18C20.2 23 22 21.2 22 19S20.2 15 18 15M5 8C5 6.1 5.8 4.3 7.1 3H16.9C18.2 4.3 19 6.1 19 8C19 11.9 15.9 15 12 15S5 11.9 5 8M18 21H6C4.9 21 4 20.1 4 19S4.9 17 6 17H18C19.1 17 20 17.9 20 19S19.1 21 18 21M12.9 5.3C12.9 6 13.5 6.6 14.2 6.6C14.9 6.6 15.5 6 15.5 5.3S14.9 4 14.1 4C13.4 4 12.9 4.6 12.9 5.3M8.6 5.3C8.6 6 9.2 6.6 9.9 6.6C10.6 6.6 11.2 6 11.2 5.3S10.6 4 9.9 4C9.1 4 8.6 4.6 8.6 5.3M7.7 10C8.7 10 9.4 9.2 9.4 8.3C9.4 7.4 8.6 6.6 7.7 6.6S6 7.3 6 8.3C6 9.2 6.8 10 7.7 10M11.6 11.7C11.6 10.8 10.8 10 9.9 10C8.9 10 8.2 10.8 8.2 11.7C8.2 12.7 9 13.4 9.9 13.4C10.8 13.4 11.6 12.7 11.6 11.7M12 10C13 10 13.7 9.2 13.7 8.3C13.7 7.4 12.9 6.6 12 6.6S10.3 7.4 10.3 8.3C10.3 9.2 11.1 10 12 10M15.9 11.7C15.9 10.8 15.1 10 14.2 10C13.2 10 12.5 10.8 12.5 11.7C12.5 12.7 13.3 13.4 14.2 13.4C15.1 13.4 15.9 12.7 15.9 11.7M18 8.3C18 7.4 17.2 6.6 16.3 6.6C15.3 6.6 14.6 7.4 14.6 8.3C14.6 9.3 15.4 10 16.3 10C17.2 10 18 9.2 18 8.3">
        <title v-if="title">{{ title }}</title>
      </path>
    </svg>
  </span>
</template>

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