<template>
  <span
    v-bind="$attrs"
    :aria-hidden="title ? null : true"
    :aria-label="title"
    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="M14 4.5C14 4.22 14.22 4 14.5 4S15 4.22 15 4.5 14.78 5 14.5 5 14 4.78 14 4.5M20 19C20 21.21 18.21 23 16 23H8C5.79 23 4 21.21 4 19C4 16.79 5.79 15 8 15H8.13C5.67 13.64 4 11 4 8C4 5.61 5.06 3.47 6.72 2H17.28C18.94 3.47 20 5.61 20 8C20 11 18.33 13.64 15.87 15H16C18.21 15 20 16.79 20 19M16.5 12C16.5 10.9 15.61 10 14.5 10S12.5 10.9 12.5 12C12.5 13.11 13.4 14 14.5 14S16.5 13.11 16.5 12M17 6C15.9 6 15 6.9 15 8C15 9.11 15.9 10 17 10S19 9.11 19 8C19 6.9 18.11 6 17 6M13 4.5C13 5.33 13.67 6 14.5 6S16 5.33 16 4.5 15.33 3 14.5 3 13 3.67 13 4.5M12 6C10.9 6 10 6.9 10 8C10 9.11 10.9 10 12 10S14 9.11 14 8C14 6.9 13.11 6 12 6M8 4.5C8 5.33 8.67 6 9.5 6S11 5.33 11 4.5 10.33 3 9.5 3 8 3.67 8 4.5M7 10C8.11 10 9 9.11 9 8C9 6.9 8.11 6 7 6S5 6.9 5 8C5 9.11 5.9 10 7 10M9.5 14C10.61 14 11.5 13.11 11.5 12C11.5 10.9 10.61 10 9.5 10S7.5 10.9 7.5 12C7.5 13.11 8.4 14 9.5 14M11 19C11 17.34 9.66 16 8 16S5 17.34 5 19 6.34 22 8 22 11 20.66 11 19M19 19C19 17.34 17.66 16 16 16S13 17.34 13 19 14.34 22 16 22 19 20.66 19 19M17 8.5C17.28 8.5 17.5 8.28 17.5 8S17.28 7.5 17 7.5 16.5 7.72 16.5 8 16.72 8.5 17 8.5M14.5 11.5C14.22 11.5 14 11.72 14 12S14.22 12.5 14.5 12.5 15 12.28 15 12 14.78 11.5 14.5 11.5M16 18C15.45 18 15 18.45 15 19C15 19.55 15.45 20 16 20S17 19.55 17 19C17 18.45 16.55 18 16 18M12 8.5C12.28 8.5 12.5 8.28 12.5 8S12.28 7.5 12 7.5 11.5 7.72 11.5 8 11.72 8.5 12 8.5M8 18C7.45 18 7 18.45 7 19C7 19.55 7.45 20 8 20S9 19.55 9 19C9 18.45 8.55 18 8 18M7 7.5C6.72 7.5 6.5 7.72 6.5 8S6.72 8.5 7 8.5 7.5 8.28 7.5 8 7.28 7.5 7 7.5M9.5 5C9.78 5 10 4.78 10 4.5S9.78 4 9.5 4 9 4.22 9 4.5 9.22 5 9.5 5M10 12C10 11.72 9.78 11.5 9.5 11.5S9 11.72 9 12 9.22 12.5 9.5 12.5 10 12.28 10 12Z">
        <title v-if="title">{{ title }}</title>
      </path>
    </svg>
  </span>
</template>

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