<template>
  <svg x="0px" y="0px" viewBox="0 0 32 32" :width="width" :height="height">
    <rect
      x="4"
      y="7"
      fill="none"
      :stroke="color"
      stroke-width="2"
      stroke-linejoin="round"
      stroke-miterlimit="10"
      width="24"
      height="18"
    />
    <polyline
      fill="none"
      :stroke="color"
      stroke-width="2"
      stroke-linejoin="round"
      stroke-miterlimit="10"
      points="8,11 16,18 24,11 "
    />
    <line
      fill="none"
      :stroke="color"
      stroke-width="2"
      stroke-linejoin="round"
      stroke-miterlimit="10"
      x1="13.7"
      y1="16"
      x2="8"
      y2="21"
    />
    <line
      fill="none"
      :stroke="color"
      stroke-width="2"
      stroke-linejoin="round"
      stroke-miterlimit="10"
      x1="24"
      y1="21"
      x2="18.3"
      y2="16"
    />
  </svg>
</template>

<script>
export default {
  name: "EmailIcon",
  props: {
    width: {
      type: [Number, String],
      default: 16,
    },
    height: {
      type: [Number, String],
      default: 16,
    },
    color: {
      type: String,
      default: "#000000",
    },
  },
};
</script>

<style scoped>
.st0 {
  fill: none;
  stroke: #000000;
  stroke-width: 2;
  stroke-miterlimit: 10;
}
.st1 {
  fill: none;
  stroke: #000000;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}
.st2 {
  fill: none;
  stroke: #000000;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}
.st3 {
  fill: none;
  stroke: #000000;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}
.st4 {
  fill: none;
  stroke: #000000;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-dasharray: 3;
}
</style>
