Merge branch 'ASTRA-158' into 'master'

[WIP] Добавил базовую иконку, перевел часть иконок в компоненты See merge request andrusyakka/urban-couscous!468
2023-07-11 15:08:14 +00:00
parent a5bbd9d895 daf07924a6
commit 9f656ab9df
21 changed files with 356 additions and 0 deletions
--- a/src/components/base/BaseIcon.vue
+++ b/src/components/base/BaseIcon.vue
@@ -0,0 +1,31 @@
+<template lang="pug">
+  svg(
+    :width="width" 
+    :height="height" 
+    :viewBox="`0 0 ${width} ${height}`" 
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    )
+      g(:fill="iconColor")
+        slot
+</template>
+
+<script>
+export default {
+  name: "BaseIcon",
+  props: {
+    width: {
+      type: [Number, String],
+      default: 24,
+    },
+    height: {
+      type: [Number, String],
+      default: 24,
+    },
+    iconColor: {
+      type: String,
+      default: "currentColor",
+    },
+  },
+};
+</script>
--- a/src/components/icons/BigPlus.vue
+++ b/src/components/icons/BigPlus.vue
@@ -0,0 +1,16 @@
+<template lang="pug">
+  base-icon(:icon-color="color")
+    path(fill-rule="evenodd" clip-rule="evenodd" d="M12 3.25C12.4142 3.25 12.75 3.58579 12.75 4V11.25H20C20.4142 11.25 20.75 11.5858 20.75 12C20.75 12.4142 20.4142 12.75 20 12.75H12.75V20C12.75 20.4142 12.4142 20.75 12 20.75C11.5858 20.75 11.25 20.4142 11.25 20V12.75H4C3.58579 12.75 3.25 12.4142 3.25 12C3.25 11.5858 3.58579 11.25 4 11.25H11.25V4C11.25 3.58579 11.5858 3.25 12 3.25Z")
+</template>
+
+<script>
+import BaseIcon from "@/components/base/BaseIcon.vue";
+
+export default {
+  name: "BigPlus",
+  components: { BaseIcon },
+  props: {
+    color: String,
+  },
+};
+</script>
--- a/src/components/icons/CancelMini.vue
+++ b/src/components/icons/CancelMini.vue
@@ -0,0 +1,16 @@
+<template lang="pug">
+  base-icon(:icon-color="color")
+    path(fill-rule="evenodd" clip-rule="evenodd" d="M6.46968 6.46967C6.76257 6.17678 7.23745 6.17678 7.53034 6.46967L12 10.9393L16.4697 6.46967C16.7626 6.17678 17.2374 6.17678 17.5303 6.46967C17.8232 6.76256 17.8232 7.23744 17.5303 7.53033L13.0607 12L17.5303 16.4697C17.8232 16.7626 17.8232 17.2374 17.5303 17.5303C17.2374 17.8232 16.7626 17.8232 16.4697 17.5303L12 13.0607L7.53033 17.5303C7.23744 17.8232 6.76256 17.8232 6.46967 17.5303C6.17678 17.2374 6.17678 16.7626 6.46967 16.4697L10.9393 12L6.46968 7.53033C6.17679 7.23744 6.17679 6.76256 6.46968 6.46967Z")
+</template>
+
+<script>
+import BaseIcon from "@/components/base/BaseIcon.vue";
+
+export default {
+  name: "CancelMini",
+  components: { BaseIcon },
+  props: {
+    color: String,
+  },
+};
+</script>
--- a/src/components/icons/DblArrow.vue
+++ b/src/components/icons/DblArrow.vue
@@ -0,0 +1,17 @@
+<template lang="pug">
+  base-icon(:icon-color="color")
+    path(d="M12.2803 16.2197C12.5732 16.5126 12.5732 16.9874 12.2803 17.2803C11.9874 17.5732 11.5126 17.5732 11.2197 17.2803L6.21967 12.2803C5.92678 11.9874 5.92678 11.5126 6.21967 11.2197L11.2197 6.21967C11.5126 5.92678 11.9874 5.92678 12.2803 6.21967C12.5732 6.51256 12.5732 6.98744 12.2803 7.28033L7.81066 11.75L12.2803 16.2197Z")
+    path(d="M17.2803 16.2197C17.5732 16.5126 17.5732 16.9874 17.2803 17.2803C16.9874 17.5732 16.5126 17.5732 16.2197 17.2803L11.2197 12.2803C10.9268 11.9874 10.9268 11.5126 11.2197 11.2197L16.2197 6.21967C16.5126 5.92678 16.9874 5.92678 17.2803 6.21967C17.5732 6.51256 17.5732 6.98744 17.2803 7.28033L12.8107 11.75L17.2803 16.2197Z")
+</template>
+
+<script>
+import BaseIcon from "@/components/base/BaseIcon.vue";
+
+export default {
+  name: "DblArrow",
+  components: { BaseIcon },
+  props: {
+    color: String,
+  },
+};
+</script>
--- a/src/components/icons/DblArrowCircle.vue
+++ b/src/components/icons/DblArrowCircle.vue
@@ -0,0 +1,17 @@
+<template lang="pug">
+  base-icon(:icon-color="color")
+    path(d="M18.5464 12.223C18.5476 11.8088 18.8844 11.474 19.2986 11.4753C19.7128 11.4765 20.0476 11.8133 20.0463 12.2275L20.0248 19.2986C20.0236 19.7128 19.6868 20.0476 19.2726 20.0463L12.2015 20.0248C11.7873 20.0235 11.4525 19.6867 11.4538 19.2725C11.4551 18.8583 11.7919 18.5235 12.2061 18.5248L18.5271 18.544L18.5464 12.223Z")
+    path(d="M15.0216 8.67671C15.0229 8.2625 15.3597 7.92773 15.7739 7.92899C16.1881 7.93025 16.5228 8.26706 16.5216 8.68127L16.5001 15.7523C16.4988 16.1665 16.162 16.5013 15.7478 16.5L8.67676 16.4785C8.26255 16.4773 7.92779 16.1404 7.92905 15.7262C7.93031 15.312 8.26711 14.9773 8.68132 14.9785L15.0024 14.9977L15.0216 8.67671Z")
+</template>
+
+<script>
+import BaseIcon from "@/components/base/BaseIcon.vue";
+
+export default {
+  name: "DblArrowCircle",
+  components: { BaseIcon },
+  props: {
+    color: String,
+  },
+};
+</script>
--- a/src/components/icons/DocOk.vue
+++ b/src/components/icons/DocOk.vue
@@ -0,0 +1,16 @@
+<template lang="pug">
+  base-icon(:icon-color="color")
+    path(fill-rule="evenodd" clip-rule="evenodd" d="M8.26772 3.75C8.38903 2.90193 9.11838 2.25 10 2.25H14C14.8816 2.25 15.611 2.90193 15.7323 3.75H18C18.9665 3.75 19.75 4.5335 19.75 5.5V20C19.75 20.9665 18.9665 21.75 18 21.75H6C5.0335 21.75 4.25 20.9665 4.25 20V5.5C4.25 4.5335 5.0335 3.75 6 3.75H8.26772ZM8.26772 5.25H6C5.86193 5.25 5.75 5.36193 5.75 5.5V20C5.75 20.1381 5.86193 20.25 6 20.25H18C18.1381 20.25 18.25 20.1381 18.25 20V5.5C18.25 5.36193 18.1381 5.25 18 5.25H15.7323C15.611 6.09807 14.8816 6.75 14 6.75H10C9.11838 6.75 8.38903 6.09807 8.26772 5.25ZM10 3.75C9.86193 3.75 9.75 3.86193 9.75 4V5C9.75 5.13807 9.86193 5.25 10 5.25H14C14.1381 5.25 14.25 5.13807 14.25 5V4C14.25 3.86193 14.1381 3.75 14 3.75H10ZM15.5304 11.4697C15.8232 11.7626 15.8232 12.2374 15.5304 12.5303L11.3303 16.7304C11.1897 16.871 10.9989 16.95 10.8 16.95C10.6011 16.95 10.4103 16.871 10.2696 16.7304L8.46972 14.9303C8.17683 14.6374 8.17684 14.1626 8.46974 13.8697C8.76264 13.5768 9.23752 13.5768 9.5304 13.8697L10.8 15.1394L14.4697 11.4697C14.7626 11.1768 15.2375 11.1768 15.5304 11.4697Z")
+</template>
+
+<script>
+import BaseIcon from "@/components/base/BaseIcon.vue";
+
+export default {
+  name: "DocOk",
+  components: { BaseIcon },
+  props: {
+    color: String,
+  },
+};
+</script>
--- a/src/components/icons/IconArrow.vue
+++ b/src/components/icons/IconArrow.vue
@@ -0,0 +1,16 @@
+<template lang="pug">
+  base-icon(:icon-color="color")
+    path(fill-rule="evenodd" clip-rule="evenodd" d="M6.46967 9.46967C6.76256 9.17678 7.23744 9.17678 7.53033 9.46967L12 13.9393L16.4697 9.46967C16.7626 9.17678 17.2374 9.17678 17.5303 9.46967C17.8232 9.76256 17.8232 10.2374 17.5303 10.5303L12.5303 15.5303C12.2374 15.8232 11.7626 15.8232 11.4697 15.5303L6.46967 10.5303C6.17678 10.2374 6.17678 9.76256 6.46967 9.46967Z")
+</template>
+
+<script>
+import BaseIcon from "@/components/base/BaseIcon.vue";
+
+export default {
+  name: "IconArrow",
+  components: { BaseIcon },
+  props: {
+    color: String,
+  },
+};
+</script>
--- a/src/components/icons/IconBasket.vue
+++ b/src/components/icons/IconBasket.vue
@@ -0,0 +1,16 @@
+<template lang="pug">
+  base-icon(:icon-color="color")
+    path(fill-rule="evenodd" clip-rule="evenodd" d="M8.79324 5.6107H3C2.58579 5.6107 2.25 5.94649 2.25 6.3607C2.25 6.77492 2.58579 7.1107 3 7.1107H4.13657L5.74765 20.2136C5.85552 21.0909 6.60067 21.75 7.48457 21.75H16.5154C17.3993 21.75 18.1445 21.0909 18.2523 20.2136L19.8634 7.1107H21C21.4142 7.1107 21.75 6.77492 21.75 6.3607C21.75 5.94649 21.4142 5.6107 21 5.6107H15.2068C15.1928 5.11308 15.0958 4.54741 14.859 4.0209C14.6521 3.56051 14.3282 3.10897 13.8393 2.77428C13.3463 2.43679 12.7319 2.25 12 2.25C11.2681 2.25 10.6537 2.43679 10.1607 2.77428C9.67181 3.10897 9.34794 3.56051 9.14095 4.0209C8.90424 4.54741 8.80716 5.11308 8.79324 5.6107ZM10.294 5.6107H13.706C13.6929 5.30168 13.6318 4.94922 13.491 4.63599C13.3729 4.3735 13.2093 4.16082 12.9919 4.01201C12.7787 3.86599 12.4681 3.75 12 3.75C11.5319 3.75 11.2213 3.86599 11.0081 4.01201C10.7907 4.16082 10.6271 4.3735 10.509 4.63599C10.3682 4.94922 10.3071 5.30168 10.294 5.6107ZM18.3521 7.1107H5.64787L7.23644 20.0305C7.25185 20.1558 7.3583 20.25 7.48457 20.25H16.5154C16.6417 20.25 16.7481 20.1558 16.7636 20.0305L18.3521 7.1107ZM10.2 9.55205C10.6142 9.55205 10.95 9.88784 10.95 10.3021V17.0587C10.95 17.4729 10.6142 17.8087 10.2 17.8087C9.78579 17.8087 9.45 17.4729 9.45 17.0587V10.3021C9.45 9.88784 9.78579 9.55205 10.2 9.55205ZM13.8 9.55205C14.2142 9.55205 14.55 9.88784 14.55 10.3021V17.0587C14.55 17.4729 14.2142 17.8087 13.8 17.8087C13.3858 17.8087 13.05 17.4729 13.05 17.0587V10.3021C13.05 9.88784 13.3858 9.55205 13.8 9.55205Z")
+</template>
+
+<script>
+import BaseIcon from "@/components/base/BaseIcon.vue";
+
+export default {
+  name: "BasketIcon",
+  components: { BaseIcon },
+  props: {
+    color: String,
+  },
+};
+</script>
--- a/src/components/icons/IconCalendar.vue
+++ b/src/components/icons/IconCalendar.vue
@@ -0,0 +1,17 @@
+<template lang="pug">
+  base-icon(:icon-color="color")
+    path(fill-rule="evenodd" clip-rule="evenodd" d="M4 7.86487V20C4 20.5523 4.44772 21 5 21H19C19.5523 21 20 20.5523 20 20V7.86487H4Z" fill="white")
+    path(fill-rule="evenodd" clip-rule="evenodd" d="M8.36364 2.25C8.77785 2.25 9.11364 2.58579 9.11364 3V4.19595H15.3712V3C15.3712 2.58579 15.707 2.25 16.1212 2.25C16.5354 2.25 16.8712 2.58579 16.8712 3V4.19595H19C19.9665 4.19595 20.75 4.97945 20.75 5.94594V20C20.75 20.9665 19.9665 21.75 19 21.75H5C4.0335 21.75 3.25 20.9665 3.25 20V5.94595C3.25 4.97945 4.0335 4.19595 5 4.19595H7.61364V3C7.61364 2.58579 7.94942 2.25 8.36364 2.25ZM5 5.69595C4.86193 5.69595 4.75 5.80787 4.75 5.94595V7.11486H19.25V5.94594C19.25 5.80788 19.1381 5.69595 19 5.69595H5ZM19.25 8.61486H4.75V20C4.75 20.1381 4.86193 20.25 5 20.25H19C19.1381 20.25 19.25 20.1381 19.25 20V8.61486ZM6.25 11.4372C6.25 11.0229 6.58579 10.6872 7 10.6872H17C17.4142 10.6872 17.75 11.0229 17.75 11.4372C17.75 11.8514 17.4142 12.1872 17 12.1872H7C6.58579 12.1872 6.25 11.8514 6.25 11.4372ZM6.25 14.4372C6.25 14.0229 6.58579 13.6872 7 13.6872H17C17.4142 13.6872 17.75 14.0229 17.75 14.4372C17.75 14.8514 17.4142 15.1872 17 15.1872H7C6.58579 15.1872 6.25 14.8514 6.25 14.4372ZM6.25 17.4372C6.25 17.0229 6.58579 16.6872 7 16.6872H17C17.4142 16.6872 17.75 17.0229 17.75 17.4372C17.75 17.8514 17.4142 18.1872 17 18.1872H7C6.58579 18.1872 6.25 17.8514 6.25 17.4372Z")
+</template>
+
+<script>
+import BaseIcon from "@/components/base/BaseIcon.vue";
+
+export default {
+  name: "IconCalendar",
+  components: { BaseIcon },
+  props: {
+    color: String,
+  },
+};
+</script>
--- a/src/components/icons/IconCancel.vue
+++ b/src/components/icons/IconCancel.vue
@@ -0,0 +1,16 @@
+<template lang="pug">
+  base-icon(:icon-color="color")
+    path(fill-rule="evenodd" clip-rule="evenodd" d="M4.46968 4.46967C4.76258 4.17678 5.23745 4.17678 5.53034 4.46967L12 10.9393L18.4697 4.46967C18.7626 4.17678 19.2374 4.17678 19.5303 4.46967C19.8232 4.76256 19.8232 5.23744 19.5303 5.53033L13.0607 12L19.5304 18.4697C19.8232 18.7626 19.8232 19.2374 19.5304 19.5303C19.2375 19.8232 18.7626 19.8232 18.4697 19.5303L12 13.0607L5.53033 19.5303C5.23744 19.8232 4.76256 19.8232 4.46967 19.5303C4.17678 19.2374 4.17678 18.7626 4.46967 18.4697L10.9394 12L4.46968 5.53033C4.17679 5.23744 4.17679 4.76256 4.46968 4.46967Z")
+</template>
+
+<script>
+import BaseIcon from "@/components/base/BaseIcon.vue";
+
+export default {
+  name: "IconCancel",
+  components: { BaseIcon },
+  props: {
+    color: String,
+  },
+};
+</script>
--- a/src/components/icons/IconFolder.vue
+++ b/src/components/icons/IconFolder.vue
@@ -0,0 +1,16 @@
+<template lang="pug">
+  base-icon(:icon-color="color")
+    path(fill-rule="evenodd" clip-rule="evenodd" d="M2.25 6C2.25 5.0335 3.0335 4.25 4 4.25H9.08579C9.54991 4.25 9.99503 4.43437 10.3232 4.76256L11.7374 6.17678C11.7843 6.22366 11.8479 6.25 11.9142 6.25H20C20.9665 6.25 21.75 7.0335 21.75 8V18C21.75 18.9665 20.9665 19.75 20 19.75H4C3.0335 19.75 2.25 18.9665 2.25 18V6ZM4 5.75C3.86193 5.75 3.75 5.86193 3.75 6V9.25H20.25V8C20.25 7.86193 20.1381 7.75 20 7.75H11.9142C11.4501 7.75 11.005 7.56563 10.6768 7.23744L9.26256 5.82322C9.21568 5.77634 9.15209 5.75 9.08579 5.75H4ZM20.25 10.75H3.75V18C3.75 18.1381 3.86193 18.25 4 18.25H20C20.1381 18.25 20.25 18.1381 20.25 18V10.75Z")
+</template>
+
+<script>
+import BaseIcon from "@/components/base/BaseIcon.vue";
+
+export default {
+  name: "IconFolder",
+  components: { BaseIcon },
+  props: {
+    color: String,
+  },
+};
+</script>
--- a/src/components/icons/IconMail.vue
+++ b/src/components/icons/IconMail.vue
@@ -0,0 +1,16 @@
+<template lang="pug">
+  base-icon(:icon-color="color")
+    path(fill-rule="evenodd" clip-rule="evenodd" d="M2.76256 4.76256C3.07843 4.4467 3.51696 4.25 4 4.25H20C20.483 4.25 20.9216 4.4467 21.2374 4.76256C21.5533 5.07843 21.75 5.51696 21.75 6V18C21.75 18.9665 20.9665 19.75 20 19.75H4C3.0335 19.75 2.25 18.9665 2.25 18V6C2.25 5.51696 2.4467 5.07843 2.76256 4.76256ZM4.81067 5.75L11.1161 12.0554L10.6211 12.5504L11.1161 12.0554C11.6043 12.5436 12.3957 12.5436 12.8839 12.0554L13.4142 12.5857L12.8839 12.0554L19.1893 5.75H4.81067ZM20.25 6.81065L13.9445 13.1161C12.8706 14.19 11.1294 14.19 10.0555 13.1161L10.5858 12.5857L10.0555 13.1161L3.75 6.81065V18C3.75 18.1381 3.86193 18.25 4 18.25H20C20.1381 18.25 20.25 18.1381 20.25 18V6.81065Z")
+</template>
+
+<script>
+import BaseIcon from "@/components/base/BaseIcon.vue";
+
+export default {
+  name: "IconMail",
+  components: { BaseIcon },
+  props: {
+    color: String,
+  },
+};
+</script>
--- a/src/components/icons/IconMinus.vue
+++ b/src/components/icons/IconMinus.vue
@@ -0,0 +1,16 @@
+<template lang="pug">
+  base-icon(:icon-color="color")
+    path(d="M12.75 11.25H17C17.4142 11.25 17.75 11.5858 17.75 12C17.75 12.4142 17.4142 12.75 17 12.75H12.75H11.25H7C6.58579 12.75 6.25 12.4142 6.25 12C6.25 11.5858 6.58579 11.25 7 11.25H11.25H12.75Z")
+</template>
+
+<script>
+import BaseIcon from "@/components/base/BaseIcon.vue";
+
+export default {
+  name: "IconMinus",
+  components: { BaseIcon },
+  props: {
+    color: String,
+  },
+};
+</script>
--- a/src/components/icons/IconOk.vue
+++ b/src/components/icons/IconOk.vue
@@ -0,0 +1,16 @@
+<template lang="pug">
+  base-icon(:icon-color="color")
+    path(fill-rule="evenodd" clip-rule="evenodd" d="M17.5304 8.46967C17.8233 8.76256 17.8233 9.23744 17.5304 9.53033L10.5304 16.5303C10.2375 16.8232 9.76261 16.8232 9.46971 16.5304L6.46967 13.5303C6.17678 13.2374 6.17678 12.7626 6.46967 12.4697C6.76256 12.1768 7.23743 12.1768 7.53033 12.4697L10 14.9394L16.4697 8.46967C16.7626 8.17678 17.2375 8.17678 17.5304 8.46967Z")
+</template>
+
+<script>
+import BaseIcon from "@/components/base/BaseIcon.vue";
+
+export default {
+  name: "IconOk",
+  components: { BaseIcon },
+  props: {
+    color: String,
+  },
+};
+</script>
--- a/src/components/icons/IconPerson.vue
+++ b/src/components/icons/IconPerson.vue
@@ -0,0 +1,16 @@
+<template lang="pug">
+  base-icon(:icon-color="color")
+    path(fill-rule="evenodd" clip-rule="evenodd" d="M12 3.75C10.2051 3.75 8.75 5.20507 8.75 7C8.75 8.79493 10.2051 10.25 12 10.25C13.7949 10.25 15.25 8.79493 15.25 7C15.25 5.20507 13.7949 3.75 12 3.75ZM7.25 7C7.25 4.37665 9.37665 2.25 12 2.25C14.6234 2.25 16.75 4.37665 16.75 7C16.75 9.62335 14.6234 11.75 12 11.75C9.37665 11.75 7.25 9.62335 7.25 7ZM3.25 19C3.25 16.3766 5.37665 14.25 8 14.25H16C18.6234 14.25 20.75 16.3766 20.75 19V20C20.75 20.9665 19.9665 21.75 19 21.75H5C4.0335 21.75 3.25 20.9665 3.25 20V19ZM8 15.75C6.20507 15.75 4.75 17.2051 4.75 19V20C4.75 20.1381 4.86193 20.25 5 20.25H19C19.1381 20.25 19.25 20.1381 19.25 20V19C19.25 17.2051 17.7949 15.75 16 15.75H8Z")
+</template>
+
+<script>
+import BaseIcon from "@/components/base/BaseIcon.vue";
+
+export default {
+  name: "IconPerson",
+  components: { BaseIcon },
+  props: {
+    color: String,
+  },
+};
+</script>
--- a/src/components/icons/IconPhone.vue
+++ b/src/components/icons/IconPhone.vue
@@ -0,0 +1,16 @@
+<template lang="pug">
+  base-icon(:icon-color="color")
+    path(fill-rule="evenodd" clip-rule="evenodd" d="M20.1841 16.1183C20.1837 16.097 20.1838 16.0756 20.1843 16.0543C20.1862 15.98 20.1606 15.9072 20.1119 15.8497C20.1161 15.8547 20.1138 15.853 20.1036 15.8454C20.0651 15.8168 19.9139 15.7044 19.5688 15.5448C19.1839 15.3667 18.6939 15.1914 18.1713 15.0433C17.6506 14.8958 17.1331 14.7853 16.7013 14.7254C16.4856 14.6955 16.307 14.6804 16.1701 14.6769C16.0459 14.6736 15.993 14.6811 15.9929 14.6806C15.9929 14.6805 15.9951 14.6801 15.9992 14.6792C15.8561 14.7097 15.7442 14.7656 15.5925 14.8897C15.5065 14.96 15.4119 15.049 15.2884 15.1736C15.2335 15.2289 15.1785 15.2855 15.1163 15.3496L15.0918 15.3747C15.0217 15.4469 14.9436 15.5271 14.8614 15.6091C14.3842 16.0854 13.6479 16.1847 13.0615 15.852C11.9098 15.1984 10.9906 14.6211 10.1876 13.8645C9.37197 13.0959 8.74299 12.2068 8.06061 11.0091C7.72583 10.4215 7.82564 9.68257 8.30431 9.20485C8.89211 8.61822 9.19007 8.21392 9.27161 7.83233C9.32142 7.59925 9.30838 6.80243 9.10544 5.84744C9.0113 5.40443 8.89114 5.00159 8.76024 4.6893C8.64899 4.42387 8.56525 4.30919 8.54421 4.28036C8.53758 4.27128 8.53717 4.27072 8.54407 4.27664C8.39996 4.15295 8.22138 4.01078 8.05679 3.90753C8.01892 3.88377 7.98785 3.86594 7.96362 3.85293H4.33607C4.31963 3.86004 4.29267 3.87317 4.25501 3.89616C4.14127 3.96558 3.99746 4.08541 3.85701 4.24887C3.71719 4.41159 3.61309 4.57991 3.55264 4.7191C3.51649 4.80236 3.50635 4.85033 3.50357 4.86511C3.506 4.90011 3.5072 4.9352 3.50718 4.9703C3.50076 13.106 10.571 20.2016 18.7688 20.1952C18.8141 20.1951 18.8595 20.1971 18.9047 20.2012C18.9814 20.2081 19.1468 20.2037 19.377 20.1565C19.5991 20.111 19.8256 20.037 20.0176 19.9467C20.1198 19.8986 20.196 19.8536 20.2501 19.8169L20.1841 16.1183ZM21.7547 20.0653C21.759 21.1012 19.8158 21.7895 18.7699 21.6952C9.74355 21.7022 2.00011 13.9349 2.00718 4.96911C1.91299 3.92888 3.24345 2.35391 4.27799 2.35293H8.10716C8.54639 2.34862 9.18798 2.85257 9.52101 3.1384C10.4678 3.95106 10.9728 7.04928 10.7385 8.14579C10.5556 9.00187 9.95063 9.68102 9.36392 10.2666C10.6523 12.5279 11.536 13.2616 13.8018 14.5474C13.8837 14.4657 13.9627 14.3843 14.0404 14.3044C14.5196 13.8111 14.9489 13.3692 15.687 13.2121C16.7873 12.9779 20.4459 13.9256 21.2553 14.879C21.5424 15.217 21.6949 15.6486 21.6839 16.0916L21.7547 20.0653ZM8.1219 3.85286C8.11882 3.85289 8.11577 3.85291 8.11275 3.85291L8.1219 3.85286ZM7.90779 3.8257C7.89903 3.82279 7.89851 3.82196 7.90703 3.82539C7.90728 3.82549 7.90753 3.82559 7.90779 3.8257Z")
+</template>
+
+<script>
+import BaseIcon from "@/components/base/BaseIcon.vue";
+
+export default {
+  name: "IconPhone",
+  components: { BaseIcon },
+  props: {
+    color: String,
+  },
+};
+</script>
--- a/src/components/icons/IconPlus.vue
+++ b/src/components/icons/IconPlus.vue
@@ -0,0 +1,16 @@
+<template lang="pug">
+  base-icon(:icon-color="color")
+    path(fill-rule="evenodd" clip-rule="evenodd" d="M12 6.25C12.4142 6.25 12.75 6.58579 12.75 7V11.25H17C17.4142 11.25 17.75 11.5858 17.75 12C17.75 12.4142 17.4142 12.75 17 12.75H12.75V17C12.75 17.4142 12.4142 17.75 12 17.75C11.5858 17.75 11.25 17.4142 11.25 17V12.75H7C6.58579 12.75 6.25 12.4142 6.25 12C6.25 11.5858 6.58579 11.25 7 11.25H11.25V7C11.25 6.58579 11.5858 6.25 12 6.25Z")
+</template>
+
+<script>
+import BaseIcon from "@/components/base/BaseIcon.vue";
+
+export default {
+  name: "IconPlus",
+  components: { BaseIcon },
+  props: {
+    color: String,
+  },
+};
+</script>
--- a/src/components/icons/IconTime.vue
+++ b/src/components/icons/IconTime.vue
@@ -0,0 +1,16 @@
+<template lang="pug">
+  base-icon(:icon-color="color")
+    path(fill-rule="evenodd" clip-rule="evenodd" d="M12 3.75C7.44365 3.75 3.75 7.44365 3.75 12C3.75 16.5563 7.44365 20.25 12 20.25C16.5563 20.25 20.25 16.5563 20.25 12C20.25 7.44365 16.5563 3.75 12 3.75ZM2.25 12C2.25 6.61522 6.61522 2.25 12 2.25C17.3848 2.25 21.75 6.61522 21.75 12C21.75 17.3848 17.3848 21.75 12 21.75C6.61522 21.75 2.25 17.3848 2.25 12ZM12 7.25C12.4142 7.25 12.75 7.58579 12.75 8V11.6893L14.5303 13.4697C14.8232 13.7626 14.8232 14.2374 14.5303 14.5303C14.2374 14.8232 13.7626 14.8232 13.4697 14.5303L11.4697 12.5303C11.329 12.3897 11.25 12.1989 11.25 12V8C11.25 7.58579 11.5858 7.25 12 7.25Z")
+</template>
+
+<script>
+import BaseIcon from "@/components/base/BaseIcon.vue";
+
+export default {
+  name: "IconTime",
+  components: { BaseIcon },
+  props: {
+    color: String,
+  },
+};
+</script>
--- a/src/components/icons/LongArrow.vue
+++ b/src/components/icons/LongArrow.vue
@@ -0,0 +1,16 @@
+<template lang="pug">
+  base-icon(:icon-color="color")
+    path(fill-rule="evenodd" clip-rule="evenodd" d="M10.9472 5.48705C11.2305 5.78923 11.2151 6.26386 10.913 6.54716L5.89659 11.25L20 11.25C20.4142 11.25 20.75 11.5858 20.75 12C20.75 12.4142 20.4142 12.75 20 12.75L5.89659 12.75L10.913 17.4529C11.2151 17.7361 11.2305 18.2108 10.9472 18.513C10.6639 18.8151 10.1892 18.8305 9.88704 18.5472L3.48704 12.5472C3.33581 12.4054 3.25 12.2073 3.25 12C3.25 11.7927 3.33581 11.5946 3.48704 11.4528L9.88704 5.45285C10.1892 5.16955 10.6639 5.18486 10.9472 5.48705Z")
+</template>
+
+<script>
+import BaseIcon from "@/components/base/BaseIcon.vue";
+
+export default {
+  name: "LongArrow",
+  components: { BaseIcon },
+  props: {
+    color: String,
+  },
+};
+</script>
--- a/src/components/icons/NoName.vue
+++ b/src/components/icons/NoName.vue
@@ -0,0 +1,18 @@
+<template lang="pug">
+  base-icon(:icon-color="color")
+    path(fill-rule="evenodd" clip-rule="evenodd" d="M3.25 19C3.25 16.3766 5.37665 14.25 8 14.25H16C18.6234 14.25 20.75 16.3766 20.75 19V20C20.75 20.9665 19.9665 21.75 19 21.75H5C4.0335 21.75 3.25 20.9665 3.25 20V19ZM8 15.75C6.20507 15.75 4.75 17.2051 4.75 19V20C4.75 20.1381 4.86193 20.25 5 20.25H19C19.1381 20.25 19.25 20.1381 19.25 20V19C19.25 17.2051 17.7949 15.75 16 15.75H8Z")
+    path(fill-rule="evenodd" clip-rule="evenodd" d="M10.4219 4.32209C10.2271 4.63736 10.2084 5.07049 10.2084 5.63572C10.2084 6.04993 9.87262 6.38573 9.45841 6.38574C9.0442 6.38574 8.7084 6.04996 8.7084 5.63575C8.7084 5.61806 8.70837 5.59983 8.70834 5.5811C8.70766 5.08919 8.70648 4.24461 9.14584 3.53359C9.65552 2.70877 10.6058 2.25537 12.062 2.25537C12.8526 2.25537 13.497 2.37673 14.0038 2.63963C14.5331 2.9142 14.8645 3.31883 15.0492 3.77838C15.2238 4.21256 15.2557 4.66634 15.2565 5.04119C15.2569 5.23193 15.2489 5.41988 15.2416 5.5857L15.2412 5.59597C15.2339 5.76375 15.2276 5.90616 15.2276 6.03828C15.2277 6.62693 14.9287 7.05796 14.6077 7.35296C14.3022 7.63366 13.9203 7.84403 13.6226 8.00269C13.57 8.03074 13.5199 8.05723 13.4723 8.08244C13.2149 8.21869 13.0281 8.31754 12.8856 8.42303C12.8516 8.44822 12.8279 8.46814 12.812 8.48287V9.21454C12.812 9.62875 12.4762 9.96454 12.062 9.96454C11.6478 9.96454 11.312 9.62875 11.312 9.21454V8.40036C11.312 7.8016 11.7164 7.42224 11.9933 7.21733C12.2359 7.03773 12.5434 6.87588 12.7943 6.74385C12.8371 6.72133 12.8782 6.69967 12.9171 6.67895C13.2233 6.51574 13.4453 6.38399 13.5928 6.24848C13.7247 6.12727 13.7276 6.06799 13.7276 6.03838C13.7276 5.87261 13.7352 5.70069 13.742 5.54433C13.7424 5.53627 13.7427 5.52826 13.7431 5.52028C13.7504 5.35119 13.7568 5.19592 13.7565 5.04436C13.7559 4.7346 13.7257 4.50743 13.6575 4.33793C13.5996 4.19381 13.5076 4.07205 13.3131 3.97114C13.0961 3.85856 12.7162 3.75537 12.062 3.75537C10.9146 3.75537 10.5631 4.09353 10.4219 4.32209Z")
+    path(d="M12.7918 12C12.7918 12.4373 12.4373 12.7918 12 12.7918C11.5627 12.7918 11.2082 12.4373 11.2082 12C11.2082 11.5627 11.5627 11.2082 12 11.2082C12.4373 11.2082 12.7918 11.5627 12.7918 12Z")
+</template>
+
+<script>
+import BaseIcon from "@/components/base/BaseIcon.vue";
+
+export default {
+  name: "NoName",
+  components: { BaseIcon },
+  props: {
+    color: String,
+  },
+};
+</script>
--- a/src/components/icons/UserData.vue
+++ b/src/components/icons/UserData.vue
@@ -0,0 +1,16 @@
+<template lang="pug">
+  base-icon(:icon-color="color")
+    path(fill-rule="evenodd" clip-rule="evenodd" d="M8.26772 3.75C8.38903 2.90193 9.11838 2.25 10 2.25H14C14.8816 2.25 15.611 2.90193 15.7323 3.75H18C18.9665 3.75 19.75 4.5335 19.75 5.5V20C19.75 20.9665 18.9665 21.75 18 21.75H6C5.0335 21.75 4.25 20.9665 4.25 20V5.5C4.25 4.5335 5.0335 3.75 6 3.75H8.26772ZM8.26772 5.25H6C5.86193 5.25 5.75 5.36193 5.75 5.5V20C5.75 20.1381 5.86193 20.25 6 20.25H18C18.1381 20.25 18.25 20.1381 18.25 20V5.5C18.25 5.36193 18.1381 5.25 18 5.25H15.7323C15.611 6.09807 14.8816 6.75 14 6.75H10C9.11838 6.75 8.38903 6.09807 8.26772 5.25ZM10 3.75C9.86193 3.75 9.75 3.86193 9.75 4V5C9.75 5.13807 9.86193 5.25 10 5.25H14C14.1381 5.25 14.25 5.13807 14.25 5V4C14.25 3.86193 14.1381 3.75 14 3.75H10ZM15 8.25C15.4142 8.25 15.75 8.58579 15.75 9V18C15.75 18.4142 15.4142 18.75 15 18.75C14.5858 18.75 14.25 18.4142 14.25 18V9C14.25 8.58579 14.5858 8.25 15 8.25ZM12 12.25C12.4142 12.25 12.75 12.5858 12.75 13V18C12.75 18.4142 12.4142 18.75 12 18.75C11.5858 18.75 11.25 18.4142 11.25 18V13C11.25 12.5858 11.5858 12.25 12 12.25ZM9 15.25C9.41421 15.25 9.75 15.5858 9.75 16V18C9.75 18.4142 9.41421 18.75 9 18.75C8.58579 18.75 8.25 18.4142 8.25 18V16C8.25 15.5858 8.58579 15.25 9 15.25Z")
+</template>
+
+<script>
+import BaseIcon from "@/components/base/BaseIcon.vue";
+
+export default {
+  name: "UserData",
+  components: { BaseIcon },
+  props: {
+    color: String,
+  },
+};
+</script>