<template>
  <span v-bind="$attrs"
        :aria-hidden="!title ? true : null"
        :aria-label="title ? true : null"
        class="material-design-icon ev-plug-chademo-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 9.5C6.1 9.5 5 10.6 5 12S6.1 14.5 7.5 14.5 10 13.4 10 12 8.9 9.5 7.5 9.5M16.5 9.5C15.1 9.5 14 10.6 14 12S15.1 14.5 16.5 14.5 19 13.4 19 12 17.9 9.5 16.5 9.5M12 4C16.4 4 20 7.6 20 12S16.4 20 12 20 4 16.4 4 12 7.6 4 12 4M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 5C10.6 5 9.5 6.1 9.5 7.5S10.6 10 12 10 14.5 8.9 14.5 7.5 13.4 5 12 5M13.5 7.5C13.5 7.7 13.4 7.9 13.3 8.1L12.7 7.5L13.3 6.9C13.4 7.1 13.5 7.3 13.5 7.5M12.6 6.2L12 6.8L11.4 6.2C11.6 6.1 11.8 6 12 6S12.4 6.1 12.6 6.2M10.7 8.1C10.6 7.9 10.5 7.7 10.5 7.5S10.6 7.1 10.7 6.9L11.3 7.5L10.7 8.1M11.4 8.8L12 8.2L12.6 8.8C12.4 8.9 12.2 9 12 9S11.6 8.9 11.4 8.8M12 14C10.6 14 9.5 15.1 9.5 16.5S10.6 19 12 19 14.5 17.9 14.5 16.5 13.4 14 12 14M13.5 16.5C13.5 16.7 13.4 16.9 13.3 17.1L12.7 16.5L13.3 15.9C13.4 16.1 13.5 16.3 13.5 16.5M12.6 15.2L12 15.8L11.4 15.2C11.6 15.1 11.8 15 12 15S12.4 15.1 12.6 15.2M10.7 17.1C10.6 16.9 10.5 16.7 10.5 16.5S10.6 16.1 10.7 15.9L11.3 16.5L10.7 17.1M11.4 17.8L12 17.2L12.6 17.8C12.4 17.9 12.2 18 12 18S11.6 17.9 11.4 17.8Z">
        <title v-if="title">{{ title }}</title>
      </path>
    </svg>
  </span>
</template>

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