<template>
  <span
    v-bind="$attrs"
    :aria-hidden="title ? null : true"
    :aria-label="title"
    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="M16 15H15.59C17.63 13.78 19 11.55 19 9C19 5.47 16.39 2.57 13 2.08V.949H11V2.08C7.61 2.57 5 5.47 5 9C5 11.55 6.37 13.78 8.41 15H8C5.79 15 4 16.79 4 19S5.79 23 8 23H16C18.21 23 20 21.21 20 19S18.21 15 16 15M17.5 11C17.5 11.83 16.83 12.5 16 12.5S14.5 11.83 14.5 11 15.17 9.5 16 9.5 17.5 10.17 17.5 11M15 5C16.11 5 17 5.9 17 7S16.11 9 15 9 13 8.11 13 7 13.9 5 15 5M9 5C10.11 5 11 5.9 11 7S10.11 9 9 9 7 8.11 7 7 7.9 5 9 5M8 12.5C7.17 12.5 6.5 11.83 6.5 11S7.17 9.5 8 9.5 9.5 10.17 9.5 11 8.83 12.5 8 12.5M9 21.82V21H7V21.82C5.84 21.4 5 20.3 5 19C5 17.34 6.34 16 8 16S11 17.34 11 19C11 20.3 10.16 21.4 9 21.82M10 12C10 10.9 10.9 10 12 10S14 10.9 14 12 13.11 14 12 14 10 13.11 10 12M17 21.82V21H15V21.82C13.84 21.4 13 20.3 13 19C13 17.34 14.34 16 16 16S19 17.34 19 19C19 20.3 18.16 21.4 17 21.82M14.5 7C14.5 6.72 14.72 6.5 15 6.5S15.5 6.72 15.5 7 15.28 7.5 15 7.5 14.5 7.28 14.5 7M8.5 7C8.5 6.72 8.72 6.5 9 6.5S9.5 6.72 9.5 7 9.28 7.5 9 7.5 8.5 7.28 8.5 7M9 19C9 19.55 8.55 20 8 20S7 19.55 7 19 7.45 18 8 18 9 18.45 9 19M17 19C17 19.55 16.55 20 16 20S15 19.55 15 19 15.45 18 16 18 17 18.45 17 19M12.5 12C12.5 12.28 12.28 12.5 12 12.5S11.5 12.28 11.5 12 11.72 11.5 12 11.5 12.5 11.72 12.5 12Z">
        <title v-if="title">{{ title }}</title>
      </path>
    </svg>
  </span>
</template>

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