<template>
  <span v-bind="$attrs"
        :aria-hidden="!title ? true : null"
        :aria-label="title ? true : null"
        class="material-design-icon ev-plug-ccs1-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 20C7.5 20.8 6.8 21.5 6 21.5S4.5 20.8 4.5 20 5.2 18.5 6 18.5 7.5 19.2 7.5 20M18 18.5C17.2 18.5 16.5 19.2 16.5 20S17.2 21.5 18 21.5 19.5 20.8 19.5 20 18.8 18.5 18 18.5M22 20C22 22.2 20.2 24 18 24H6C3.8 24 2 22.2 2 20S3.8 16 6 16H6.3C4.3 14.4 3 11.8 3 9C3 4 7 0 12 0S21 4 21 9C21 11.8 19.7 14.4 17.7 16H18C20.2 16 22 17.8 22 20M12 16C15.9 16 19 12.9 19 9S15.9 2 12 2 5 5.1 5 9 8.1 16 12 16M20 20C20 18.9 19.1 18 18 18H6C4.9 18 4 18.9 4 20S4.9 22 6 22H18C19.1 22 20 21.1 20 20M12.9 6.3C12.9 5.3 13.7 4.5 14.7 4.5S16.5 5.3 16.5 6.3 15.7 8.1 14.7 8.1 12.9 7.3 12.9 6.3M7.5 6.3C7.5 5.3 8.3 4.5 9.3 4.5S11.1 5.3 11.1 6.3 10.3 8.1 9.3 8.1 7.5 7.3 7.5 6.3M9.3 10.2C9.3 10.8 8.8 11.3 8.2 11.3C7.6 11.3 7.1 10.8 7.1 10.2S7.5 9 8.1 9C8.8 9 9.3 9.6 9.3 10.2M13.8 12.7C13.8 13.7 13 14.5 12 14.5S10.2 13.7 10.2 12.7 11 10.9 12 10.9 13.8 11.7 13.8 12.7M17 10.2C17 10.8 16.5 11.3 15.9 11.3C15.3 11.3 14.8 10.8 14.8 10.2S15.2 9 15.9 9C16.5 9 17 9.6 17 10.2">
        <title v-if="title">{{ title }}</title>
      </path>
    </svg>
  </span>
</template>

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