From 950cc687101a9fdba45ba175524576ad4b3ade66 Mon Sep 17 00:00:00 2001
From: "nicolas.marsal" <nicolas.marsal@sundayapp.com>
Date: Tue, 2 Aug 2022 12:50:29 +0200
Subject: [PATCH] feat: add icons

---
 src/components/icons/DownloadIcon.vue |  56 ++++++++++++++
 src/components/icons/EmailIcon.vue    | 104 ++++++++++++++++++++++++++
 src/components/icons/HouseIcon.vue    |  35 +++++++++
 src/components/icons/LinkedInIcon.vue |  41 ++++++++++
 src/components/icons/PhoneIcon.vue    |  77 +++++++++++++++++++
 5 files changed, 313 insertions(+)
 create mode 100644 src/components/icons/DownloadIcon.vue
 create mode 100644 src/components/icons/EmailIcon.vue
 create mode 100644 src/components/icons/HouseIcon.vue
 create mode 100644 src/components/icons/LinkedInIcon.vue
 create mode 100644 src/components/icons/PhoneIcon.vue

diff --git a/src/components/icons/DownloadIcon.vue b/src/components/icons/DownloadIcon.vue
new file mode 100644
index 0000000..61c20a0
--- /dev/null
+++ b/src/components/icons/DownloadIcon.vue
@@ -0,0 +1,56 @@
+<template>
+  <svg :width="width" :height="height" x="0px" y="0px" viewBox="0 0 32 32">
+    <line
+      fill="none"
+      :stroke="color"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-miterlimit="10"
+      x1="16"
+      y1="3"
+      x2="16"
+      y2="19"
+    />
+    <polyline
+      fill="none"
+      :stroke="color"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-miterlimit="10"
+      points="20,15 16,19 12,15 "
+    />
+    <polyline
+      fill="none"
+      :stroke="color"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-miterlimit="10"
+      points="9,13 3,16.5 3,21.5 16,29 29,21.5 29,16.5 23,13 "
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: "DownloadIcon",
+  props: {
+    width: {
+      type: [Number, String],
+      default: 16,
+    },
+    height: {
+      type: [Number, String],
+      default: 16,
+    },
+    color: {
+      type: String,
+      default: "#000000",
+    },
+  },
+};
+</script>
+
+<style scoped></style>
diff --git a/src/components/icons/EmailIcon.vue b/src/components/icons/EmailIcon.vue
new file mode 100644
index 0000000..f67b954
--- /dev/null
+++ b/src/components/icons/EmailIcon.vue
@@ -0,0 +1,104 @@
+<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>
diff --git a/src/components/icons/HouseIcon.vue b/src/components/icons/HouseIcon.vue
new file mode 100644
index 0000000..329e6fd
--- /dev/null
+++ b/src/components/icons/HouseIcon.vue
@@ -0,0 +1,35 @@
+<template>
+  <svg :width="width" :height="height" x="0px" y="0px" viewBox="0 0 32 32">
+    <polyline
+      fill="none"
+      :stroke="color"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-miterlimit="10"
+      points="13.3,11.9 16,9 23.3,17 28,17 16,4 4,17 8,17 8,28 24,28 24,21 "
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: "HouseIcon",
+  props: {
+    width: {
+      type: [Number, String],
+      default: 16,
+    },
+    height: {
+      type: [Number, String],
+      default: 16,
+    },
+    color: {
+      type: String,
+      default: "#000000",
+    },
+  },
+};
+</script>
+
+<style scoped></style>
diff --git a/src/components/icons/LinkedInIcon.vue b/src/components/icons/LinkedInIcon.vue
new file mode 100644
index 0000000..8546c93
--- /dev/null
+++ b/src/components/icons/LinkedInIcon.vue
@@ -0,0 +1,41 @@
+<template>
+  <svg viewBox="0 0 72 72" :width="width" :height="height">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+      <g transform="translate(-376.000000, -267.000000)">
+        <g transform="translate(376.000000, 267.000000)">
+          <path
+            d="M8,72 L64,72 C68.418278,72 72,68.418278 72,64 L72,8 C72,3.581722 68.418278,-8.11624501e-16 64,0 L8,0 C3.581722,8.11624501e-16 -5.41083001e-16,3.581722 0,8 L0,64 C5.41083001e-16,68.418278 3.581722,72 8,72 Z"
+            id="Rounded"
+            :fill="color"
+          ></path>
+          <path
+            d="M62,62 L51.315625,62 L51.315625,43.8021149 C51.315625,38.8127542 49.4197917,36.0245323 45.4707031,36.0245323 C41.1746094,36.0245323 38.9300781,38.9261103 38.9300781,43.8021149 L38.9300781,62 L28.6333333,62 L28.6333333,27.3333333 L38.9300781,27.3333333 L38.9300781,32.0029283 C38.9300781,32.0029283 42.0260417,26.2742151 49.3825521,26.2742151 C56.7356771,26.2742151 62,30.7644705 62,40.051212 L62,62 Z M16.349349,22.7940133 C12.8420573,22.7940133 10,19.9296567 10,16.3970067 C10,12.8643566 12.8420573,10 16.349349,10 C19.8566406,10 22.6970052,12.8643566 22.6970052,16.3970067 C22.6970052,19.9296567 19.8566406,22.7940133 16.349349,22.7940133 Z M11.0325521,62 L21.769401,62 L21.769401,27.3333333 L11.0325521,27.3333333 L11.0325521,62 Z"
+            fill="#FFFFFF"
+          ></path>
+        </g>
+      </g>
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: "LinkedInIcon",
+  props: {
+    width: {
+      type: [Number, String],
+      default: 16,
+    },
+    height: {
+      type: [Number, String],
+      default: 16,
+    },
+    color: {
+      type: String,
+      default: "#007EBB",
+    },
+  },
+};
+</script>
+
+<style scoped></style>
diff --git a/src/components/icons/PhoneIcon.vue b/src/components/icons/PhoneIcon.vue
new file mode 100644
index 0000000..14061b4
--- /dev/null
+++ b/src/components/icons/PhoneIcon.vue
@@ -0,0 +1,77 @@
+<template>
+  <svg :width="width" :height="height" x="0px" y="0px" viewBox="0 0 32 32">
+    <circle
+      fill="none"
+      :stroke="color"
+      stroke-width="2"
+      stroke-linejoin="round"
+      stroke-miterlimit="10"
+      cx="16"
+      cy="19"
+      r="3"
+    />
+    <path
+      fill="none"
+      :stroke="color"
+      stroke-width="2"
+      stroke-linejoin="round"
+      stroke-miterlimit="10"
+      d="M12.7,12h6.6c1.2,0,2.1,0.4,2.1,1.7v0c0,1.3,1,2.3,2.2,2.3H29c0-4.4-3.4-8-7.6-8H10.6C6.4,8,3,11.6,3,16h5.4
+	c1.2,0,2.2-1.1,2.2-2.3v0C10.6,12.4,11.5,12,12.7,12z"
+    />
+    <line
+      fill="none"
+      :stroke="color"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-miterlimit="10"
+      x1="23"
+      y1="25"
+      x2="23"
+      y2="27"
+    />
+    <line
+      fill="none"
+      :stroke="color"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-miterlimit="10"
+      x1="9"
+      y1="25"
+      x2="9"
+      y2="27"
+    />
+    <path
+      fill="none"
+      :stroke="color"
+      stroke-width="2"
+      stroke-linejoin="round"
+      stroke-miterlimit="10"
+      d="M9,16c-1.5,2.4-3,6.1-3,9v0h20v0c0-2.9-1.5-6.6-3-9"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: "PhoneIcon",
+  props: {
+    width: {
+      type: [Number, String],
+      default: 16,
+    },
+    height: {
+      type: [Number, String],
+      default: 16,
+    },
+    color: {
+      type: String,
+      default: "#000000",
+    },
+  },
+};
+</script>
+
+<style scoped></style>