adata-ui 0.3.64 → 0.3.66

package/src/components/MailTo/MailTo.vue

@@ -1,258 +1,258 @@
-<template>
-  <div class="mail">
-    <div class="mail__img-wrapper">
-      <svg
-        class="mail__img"
-        width="100"
-        height="85"
-        viewBox="0 0 100 85"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <g clip-path="url(#clip0_518_22722)">
-          <path
-            d="M82.8046 8.94045L4.49388 25.7383C1.69026 26.3397 -0.0932329 29.0916 0.510373 31.8849L11.0206 80.5231C11.6242 83.3164 14.3863 85.0933 17.1899 84.4919L95.5007 67.6941C98.3043 67.0927 100.088 64.3408 99.4842 61.5475L88.974 12.9093C88.3704 10.116 85.6083 8.33906 82.8046 8.94045Z"
-            fill="white"
-            stroke="#9DA3AC"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-          <path
-            opacity="0.6"
-            d="M49.0286 56.5055C44.9588 57.3783 41.6457 53.0141 34.6371 48.6815C20.4367 39.9133 7.646 31.4705 7.646 31.4705L9.48575 40.199L39.0732 58.9098C43.8518 61.3776 51.8161 60.1 55.9974 54.7677C55.0656 54.5138 53.9187 55.458 49.0286 56.5055Z"
-            fill="#BDC7CE"
-            fill-opacity="0.4"
-          />
-          <path
-            opacity="0.6"
-            d="M22.9133 72.2794C22.1016 72.4542 21.2633 72.4679 20.4463 72.3196C19.6294 72.1713 18.8498 71.8639 18.1522 71.415C17.4546 70.9662 16.8527 70.3847 16.3809 69.7038C15.9092 69.0229 15.5768 68.256 15.4029 67.447L7.49433 30.8586L2.6122 28.2003C1.92726 28.3511 0.0158305 29.581 0.748548 32.9613L10.7916 79.405C10.9655 80.2132 11.2976 80.9794 11.7689 81.6596C12.2401 82.3399 12.8412 82.9211 13.5379 83.3698C14.2346 83.8186 15.0132 84.1262 15.8293 84.275C16.6454 84.4239 17.4828 84.4112 18.2939 84.2375L94.401 67.9151C96.0335 67.5519 97.4571 66.5636 98.3645 65.1636C99.272 63.7637 99.5905 62.0643 99.2513 60.4324L98.3115 56.0919L22.9133 72.2794Z"
-            fill="#BDC7CE"
-            fill-opacity="0.4"
-          />
-          <path
-            d="M1.9668 27.7336L44.0343 54.8397C45.1788 55.5767 46.4581 56.0814 47.7988 56.3248C49.1396 56.5682 50.5153 56.5455 51.8471 56.258C53.179 55.9704 54.4408 55.4238 55.5602 54.6494C56.6796 53.8749 57.6344 52.888 58.3701 51.745L85.3692 9.68939"
-            stroke="#9DA3AC"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-          <path
-            d="M65.7535 40.3973L97.7063 65.5276"
-            stroke="#9DA3AC"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-          <path
-            d="M31.2595 46.9918L13.8813 83.5087"
-            stroke="#9DA3AC"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-          <path
-            d="M85.7678 19.6789C91.222 19.6789 95.6435 15.2736 95.6435 9.83943C95.6435 4.40526 91.222 0 85.7678 0C80.3135 0 75.892 4.40526 75.892 9.83943C75.892 15.2736 80.3135 19.6789 85.7678 19.6789Z"
-            fill="#E83949"
-          />
-          <path
-            d="M88.1413 14.433L86.4927 14.7901L85.075 8.20403C84.8998 7.41053 84.7883 6.7916 84.7246 6.32343C84.637 6.45833 84.5335 6.60909 84.406 6.77572C84.2786 6.94236 83.8485 7.48987 83.1158 8.36273L82.0645 7.49781L84.5653 4.49837L85.9352 4.19684L88.1413 14.433Z"
-            fill="white"
-          />
-        </g>
-        <defs>
-          <clipPath id="clip0_518_22722">
-            <rect width="100" height="85" fill="white" />
-          </clipPath>
-        </defs>
-      </svg>
-    </div>
-    <p class="mail__title">Интересует больше данных?</p>
-    <p class="mail__text">
-      Оставьте комментарий мы обязательно ответим <br />Вам в кратчайшие сроки
-    </p>
-    <form class="mail__form" novalidate>
-      <a-text-field
-        class="mail__form-input"
-        label="Введите email"
-        :error-text="emailError"
-        v-model="email"
-        @input="setEmail"
-        required
-      />
-      <a-text-field
-        class="mail__form-input"
-        label="Введите номер телефона"
-        v-mask="'8 (###) ###-##-##'"
-        v-model="phoneNumber"
-      />
-      <a-text-area
-        class="mail__form-input"
-        label="Ваш комментарий"
-        :error-text="messageError"
-        v-model="message"
-        required
-      />
-      <a-button class="mail__form-btn" @click.prevent="onSubmitForm">
-        <loader v-if="isLoading" small />
-        {{ isLoading ? "" : "Отправить" }}
-      </a-button>
-    </form>
-  </div>
-</template>
-
-<script>
-import Loader from "../Loader/Loader.vue";
-
-export default {
-  name: "MailToTemplate",
-  components: {
-    Loader,
-  },
-  props: {
-    userEmail: {
-      type: String,
-      default: "",
-    },
-  },
-  data() {
-    return {
-      email: this.userEmail || "",
-      phoneNumber: "",
-      message: "",
-      emailError: "",
-      messageError: "",
-      isLoading: false,
-    };
-  },
-  methods: {
-    setEmail(data) {
-      this.email = data;
-    },
-    onSubmitForm() {
-      this.isLoading = true;
-      const regex = new RegExp("^[\\w-\\.]+@([\\w-]+\\.)+[\\w-]{2,4}$");
-
-      if (!this.email.length || !regex.test(this.email)) {
-        this.emailError = "Введите валидный email";
-        this.isLoading = false;
-      } else {
-        this.emailError = "";
-      }
-
-      if (this.message.length < 20) {
-        this.messageError = "Введите больше чем 20 символов";
-        this.isLoading = false;
-      } else {
-        this.messageError = "";
-      }
-
-      if(this.email.length && regex.test(this.email) && this.message.length >= 20) {
-        this.requestSupport();
-      }
-    },
-    async requestSupport() {
-      const requestBody = {
-        sender_name: this.email,
-        email: this.email,
-        phone_number: this.phoneNumber ? this.phoneNumber : this.email,
-        message: this.message,
-      };
-
-      try {
-        const response = await fetch(
-          "https://users.adata.kz/api/v1/message/regards",
-          {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-            },
-            body: JSON.stringify(requestBody),
-          }
-        );
-
-        const result = await response.json();
-        this.isLoading = false;
-        if (result.success) {
-          this.phoneNumber = "";
-          this.sender_name = "";
-          this.message = "";
-          this.$emit("success", result);
-        }
-      } catch (e) {
-        this.isLoading = false;
-        this.$emit("error", e);
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-* {
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-}
-.mail {
-  padding: 50px 0px;
-  @media (max-width: 560px) {
-    padding: 32px 0;
-  }
-  &__title {
-    font-size: 24px;
-    line-height: 32px;
-    color: #2c3e50;
-    font-weight: 700;
-    text-align: center;
-    margin-bottom: 16px;
-    @media (max-width: 560px) {
-      font-size: 16px;
-      line-height: 22px;
-    }
-  }
-  &__img-wrapper {
-    padding: 24px;
-    display: flex;
-    justify-content: center;
-    position: relative;
-    &::before {
-      content: " ";
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      z-index: 1;
-      width: 100px;
-      height: 100px;
-      transform: translate(-50%, -50%);
-      background: rgba(189, 199, 206, 0.15);
-      border-radius: 100%;
-      padding: 20px;
-    }
-  }
-  &__img {
-    width: 120px;
-    height: 120px;
-    object-fit: contain;
-    position: relative;
-    z-index: 2;
-  }
-  &__text {
-    font-size: 14px;
-    color: #71757A;
-    font-weight: 400;
-    line-height: 20px;
-    text-align: center;
-    margin-bottom: 16px;
-  }
-  &__form {
-    max-width: 370px;
-    margin: 0 auto;
-    &-input {
-      margin-bottom: 16px;
-    }
-    &-btn {
-      margin: 0 auto;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-  }
-}
-</style>
+<template>
+  <div class="mail">
+    <div class="mail__img-wrapper">
+      <svg
+        class="mail__img"
+        width="100"
+        height="85"
+        viewBox="0 0 100 85"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g clip-path="url(#clip0_518_22722)">
+          <path
+            d="M82.8046 8.94045L4.49388 25.7383C1.69026 26.3397 -0.0932329 29.0916 0.510373 31.8849L11.0206 80.5231C11.6242 83.3164 14.3863 85.0933 17.1899 84.4919L95.5007 67.6941C98.3043 67.0927 100.088 64.3408 99.4842 61.5475L88.974 12.9093C88.3704 10.116 85.6083 8.33906 82.8046 8.94045Z"
+            fill="white"
+            stroke="#9DA3AC"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            opacity="0.6"
+            d="M49.0286 56.5055C44.9588 57.3783 41.6457 53.0141 34.6371 48.6815C20.4367 39.9133 7.646 31.4705 7.646 31.4705L9.48575 40.199L39.0732 58.9098C43.8518 61.3776 51.8161 60.1 55.9974 54.7677C55.0656 54.5138 53.9187 55.458 49.0286 56.5055Z"
+            fill="#BDC7CE"
+            fill-opacity="0.4"
+          />
+          <path
+            opacity="0.6"
+            d="M22.9133 72.2794C22.1016 72.4542 21.2633 72.4679 20.4463 72.3196C19.6294 72.1713 18.8498 71.8639 18.1522 71.415C17.4546 70.9662 16.8527 70.3847 16.3809 69.7038C15.9092 69.0229 15.5768 68.256 15.4029 67.447L7.49433 30.8586L2.6122 28.2003C1.92726 28.3511 0.0158305 29.581 0.748548 32.9613L10.7916 79.405C10.9655 80.2132 11.2976 80.9794 11.7689 81.6596C12.2401 82.3399 12.8412 82.9211 13.5379 83.3698C14.2346 83.8186 15.0132 84.1262 15.8293 84.275C16.6454 84.4239 17.4828 84.4112 18.2939 84.2375L94.401 67.9151C96.0335 67.5519 97.4571 66.5636 98.3645 65.1636C99.272 63.7637 99.5905 62.0643 99.2513 60.4324L98.3115 56.0919L22.9133 72.2794Z"
+            fill="#BDC7CE"
+            fill-opacity="0.4"
+          />
+          <path
+            d="M1.9668 27.7336L44.0343 54.8397C45.1788 55.5767 46.4581 56.0814 47.7988 56.3248C49.1396 56.5682 50.5153 56.5455 51.8471 56.258C53.179 55.9704 54.4408 55.4238 55.5602 54.6494C56.6796 53.8749 57.6344 52.888 58.3701 51.745L85.3692 9.68939"
+            stroke="#9DA3AC"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M65.7535 40.3973L97.7063 65.5276"
+            stroke="#9DA3AC"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M31.2595 46.9918L13.8813 83.5087"
+            stroke="#9DA3AC"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M85.7678 19.6789C91.222 19.6789 95.6435 15.2736 95.6435 9.83943C95.6435 4.40526 91.222 0 85.7678 0C80.3135 0 75.892 4.40526 75.892 9.83943C75.892 15.2736 80.3135 19.6789 85.7678 19.6789Z"
+            fill="#E83949"
+          />
+          <path
+            d="M88.1413 14.433L86.4927 14.7901L85.075 8.20403C84.8998 7.41053 84.7883 6.7916 84.7246 6.32343C84.637 6.45833 84.5335 6.60909 84.406 6.77572C84.2786 6.94236 83.8485 7.48987 83.1158 8.36273L82.0645 7.49781L84.5653 4.49837L85.9352 4.19684L88.1413 14.433Z"
+            fill="white"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_518_22722">
+            <rect width="100" height="85" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+    </div>
+    <p class="mail__title">Интересует больше данных?</p>
+    <p class="mail__text">
+      Оставьте комментарий мы обязательно ответим <br />Вам в кратчайшие сроки
+    </p>
+    <form class="mail__form" novalidate>
+      <a-text-field
+        class="mail__form-input"
+        label="Введите email"
+        :error-text="emailError"
+        v-model="email"
+        @input="setEmail"
+        required
+      />
+      <a-text-field
+        class="mail__form-input"
+        label="Введите номер телефона"
+        v-mask="'8 (###) ###-##-##'"
+        v-model="phoneNumber"
+      />
+      <a-text-area
+        class="mail__form-input"
+        label="Ваш комментарий"
+        :error-text="messageError"
+        v-model="message"
+        required
+      />
+      <a-button class="mail__form-btn" @click.prevent="onSubmitForm">
+        <loader v-if="isLoading" small />
+        {{ isLoading ? "" : "Отправить" }}
+      </a-button>
+    </form>
+  </div>
+</template>
+
+<script>
+import Loader from "../Loader/Loader.vue";
+
+export default {
+  name: "MailToTemplate",
+  components: {
+    Loader,
+  },
+  props: {
+    userEmail: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      email: this.userEmail || "",
+      phoneNumber: "",
+      message: "",
+      emailError: "",
+      messageError: "",
+      isLoading: false,
+    };
+  },
+  methods: {
+    setEmail(data) {
+      this.email = data;
+    },
+    onSubmitForm() {
+      this.isLoading = true;
+      const regex = new RegExp("^[\\w-\\.]+@([\\w-]+\\.)+[\\w-]{2,4}$");
+
+      if (!this.email.length || !regex.test(this.email)) {
+        this.emailError = "Введите валидный email";
+        this.isLoading = false;
+      } else {
+        this.emailError = "";
+      }
+
+      if (this.message.length < 20) {
+        this.messageError = "Введите больше чем 20 символов";
+        this.isLoading = false;
+      } else {
+        this.messageError = "";
+      }
+
+      if(this.email.length && regex.test(this.email) && this.message.length >= 20) {
+        this.requestSupport();
+      }
+    },
+    async requestSupport() {
+      const requestBody = {
+        sender_name: this.email,
+        email: this.email,
+        phone_number: this.phoneNumber ? this.phoneNumber : this.email,
+        message: this.message,
+      };
+
+      try {
+        const response = await fetch(
+          "https://users.adata.kz/api/v1/message/regards",
+          {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify(requestBody),
+          }
+        );
+
+        const result = await response.json();
+        this.isLoading = false;
+        if (result.success) {
+          this.phoneNumber = "";
+          this.sender_name = "";
+          this.message = "";
+          this.$emit("success", result);
+        }
+      } catch (e) {
+        this.isLoading = false;
+        this.$emit("error", e);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+.mail {
+  padding: 50px 0px;
+  @media (max-width: 560px) {
+    padding: 32px 0;
+  }
+  &__title {
+    font-size: 24px;
+    line-height: 32px;
+    color: #2c3e50;
+    font-weight: 700;
+    text-align: center;
+    margin-bottom: 16px;
+    @media (max-width: 560px) {
+      font-size: 16px;
+      line-height: 22px;
+    }
+  }
+  &__img-wrapper {
+    padding: 24px;
+    display: flex;
+    justify-content: center;
+    position: relative;
+    &::before {
+      content: " ";
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      z-index: 1;
+      width: 100px;
+      height: 100px;
+      transform: translate(-50%, -50%);
+      background: rgba(189, 199, 206, 0.15);
+      border-radius: 100%;
+      padding: 20px;
+    }
+  }
+  &__img {
+    width: 120px;
+    height: 120px;
+    object-fit: contain;
+    position: relative;
+    z-index: 2;
+  }
+  &__text {
+    font-size: 14px;
+    color: #71757A;
+    font-weight: 400;
+    line-height: 20px;
+    text-align: center;
+    margin-bottom: 16px;
+  }
+  &__form {
+    max-width: 370px;
+    margin: 0 auto;
+    &-input {
+      margin-bottom: 16px;
+    }
+    &-btn {
+      margin: 0 auto;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}
+</style>

package/src/components/NavIcon/ANavIcon.vue

@@ -1,50 +1,50 @@
-<template>
-  <div v-html="svgTemplate[iconName]" class="nav-icon"></div>
-</template>
-
-<script>
-export default {
-  name: "ANavIcon",
-  props: {
-    iconName: {
-      type: String,
-      required: true
-    },
-  },
-  computed: {
-    svgTemplate() {
-      return {
-        adata: "<svg width=\"20\" height=\"21\" viewBox=\"0 0 20 21\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n" +
-            "<path d=\"M9.84155 6.85486H9.77656C9.74876 7.20053 9.68052 7.54175 9.57322 7.87152L8.30322 11.8332H11.2899L10.0366 7.91152C9.93515 7.567 9.8698 7.21288 9.84155 6.85486Z\" fill=\"#2C3E50\"/>\n" +
-            "<path d=\"M18 0.5H2C1.46957 0.5 0.96086 0.710712 0.585787 1.08578C0.210715 1.46086 0 1.96957 0 2.5V18.5C0 19.0304 0.210715 19.5391 0.585787 19.9142C0.96086 20.2893 1.46957 20.5 2 20.5H18C18.5304 20.5 19.0391 20.2893 19.4142 19.9142C19.7893 19.5391 20 19.0304 20 18.5V2.5C20 1.96957 19.7893 1.46086 19.4142 1.08578C19.0391 0.710712 18.5304 0.5 18 0.5ZM12.7217 16.4417L11.8883 13.845H7.73833L6.91667 16.4417H4.07167L8.32 4.775H11.4367L15.5867 16.4417H12.7217Z\" fill=\"#2C3E50\"/>\n" +
-            "</svg>\n",
-        service: "<svg width=\"25\" height=\"25\" viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n" +
-            "<path d=\"M21.5 14.5H14.5V21.5H21.5V14.5Z\" stroke=\"#2C3E50\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n" +
-            "<path d=\"M10.5 14.5H3.5V21.5H10.5V14.5Z\" stroke=\"#2C3E50\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n" +
-            "<path d=\"M21.5 3.5H14.5V10.5H21.5V3.5Z\" stroke=\"#2C3E50\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n" +
-            "<path d=\"M10.5 3.5H3.5V10.5H10.5V3.5Z\" stroke=\"#2C3E50\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n" +
-            "</svg>\n",
-        favorite: "<svg width=\"25\" height=\"25\" viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n" +
-            "<path d=\"M5.5 2.5H19.5C19.7652 2.5 20.0196 2.60536 20.2071 2.79289C20.3946 2.98043 20.5 3.23478 20.5 3.5V22.643C20.5001 22.7324 20.4763 22.8202 20.4309 22.8973C20.3855 22.9743 20.3204 23.0378 20.2421 23.0811C20.1639 23.1244 20.0755 23.1459 19.9861 23.1434C19.8968 23.141 19.8097 23.1146 19.734 23.067L12.5 18.53L5.266 23.066C5.19037 23.1135 5.10339 23.1399 5.0141 23.1424C4.92482 23.1449 4.83649 23.1235 4.7583 23.0803C4.6801 23.0371 4.61491 22.9738 4.56948 22.8969C4.52406 22.82 4.50007 22.7323 4.5 22.643V3.5C4.5 3.23478 4.60536 2.98043 4.79289 2.79289C4.98043 2.60536 5.23478 2.5 5.5 2.5ZM18.5 4.5H6.5V19.932L12.5 16.171L18.5 19.932V4.5Z\" fill=\"#2C3E50\"/>\n" +
-            "</svg>\n",
-        sign: "<svg width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n" +
-            "<path d=\"M10 17.5L15 12.5L10 7.5\" stroke=\"#2C3E50\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n" +
-            "<path d=\"M15 12.5H3\" stroke=\"#2C3E50\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n" +
-            "<path d=\"M15 3.5H19C19.5304 3.5 20.0391 3.71071 20.4142 4.08579C20.7893 4.46086 21 4.96957 21 5.5V19.5C21 20.0304 20.7893 20.5391 20.4142 20.9142C20.0391 21.2893 19.5304 21.5 19 21.5H15\" stroke=\"#2C3E50\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n" +
-            "</svg>\n",
-        template: "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n" +
-            "<path d=\"M9 10H10C10.2652 10 10.5196 9.89464 10.7071 9.70711C10.8946 9.51957 11 9.26522 11 9C11 8.73478 10.8946 8.48043 10.7071 8.29289C10.5196 8.10536 10.2652 8 10 8H9C8.73478 8 8.48043 8.10536 8.29289 8.29289C8.10536 8.48043 8 8.73478 8 9C8 9.26522 8.10536 9.51957 8.29289 9.70711C8.48043 9.89464 8.73478 10 9 10ZM9 12C8.73478 12 8.48043 12.1054 8.29289 12.2929C8.10536 12.4804 8 12.7348 8 13C8 13.2652 8.10536 13.5196 8.29289 13.7071C8.48043 13.8946 8.73478 14 9 14H15C15.2652 14 15.5196 13.8946 15.7071 13.7071C15.8946 13.5196 16 13.2652 16 13C16 12.7348 15.8946 12.4804 15.7071 12.2929C15.5196 12.1054 15.2652 12 15 12H9ZM20 8.94C19.9896 8.84813 19.9695 8.75763 19.94 8.67V8.58C19.8919 8.47718 19.8278 8.38267 19.75 8.3L13.75 2.3C13.6673 2.22222 13.5728 2.15808 13.47 2.11C13.4402 2.10576 13.4099 2.10576 13.38 2.11C13.2784 2.05174 13.1662 2.01434 13.05 2H7C6.20435 2 5.44129 2.31607 4.87868 2.87868C4.31607 3.44129 4 4.20435 4 5V19C4 19.7956 4.31607 20.5587 4.87868 21.1213C5.44129 21.6839 6.20435 22 7 22H17C17.7956 22 18.5587 21.6839 19.1213 21.1213C19.6839 20.5587 20 19.7956 20 19V9C20 9 20 9 20 8.94ZM14 5.41L16.59 8H15C14.7348 8 14.4804 7.89464 14.2929 7.70711C14.1054 7.51957 14 7.26522 14 7V5.41ZM18 19C18 19.2652 17.8946 19.5196 17.7071 19.7071C17.5196 19.8946 17.2652 20 17 20H7C6.73478 20 6.48043 19.8946 6.29289 19.7071C6.10536 19.5196 6 19.2652 6 19V5C6 4.73478 6.10536 4.48043 6.29289 4.29289C6.48043 4.10536 6.73478 4 7 4H12V7C12 7.79565 12.3161 8.55871 12.8787 9.12132C13.4413 9.68393 14.2044 10 15 10H18V19ZM15 16H9C8.73478 16 8.48043 16.1054 8.29289 16.2929C8.10536 16.4804 8 16.7348 8 17C8 17.2652 8.10536 17.5196 8.29289 17.7071C8.48043 17.8946 8.73478 18 9 18H15C15.2652 18 15.5196 17.8946 15.7071 17.7071C15.8946 17.5196 16 17.2652 16 17C16 16.7348 15.8946 16.4804 15.7071 16.2929C15.5196 16.1054 15.2652 16 15 16Z\" fill=\"#2C3E50\"/>\n" +
-            "</svg>\n"
-      }
-    }
-  },
-}
-</script>
-
-<style scoped lang="scss">
-.nav-icon {
-  width: 24px;
-  height: 24px;
-  max-width: 24px;
-}
+<template>
+  <div v-html="svgTemplate[iconName]" class="nav-icon"></div>
+</template>
+
+<script>
+export default {
+  name: "ANavIcon",
+  props: {
+    iconName: {
+      type: String,
+      required: true
+    },
+  },
+  computed: {
+    svgTemplate() {
+      return {
+        adata: "<svg width=\"20\" height=\"21\" viewBox=\"0 0 20 21\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n" +
+            "<path d=\"M9.84155 6.85486H9.77656C9.74876 7.20053 9.68052 7.54175 9.57322 7.87152L8.30322 11.8332H11.2899L10.0366 7.91152C9.93515 7.567 9.8698 7.21288 9.84155 6.85486Z\" fill=\"#2C3E50\"/>\n" +
+            "<path d=\"M18 0.5H2C1.46957 0.5 0.96086 0.710712 0.585787 1.08578C0.210715 1.46086 0 1.96957 0 2.5V18.5C0 19.0304 0.210715 19.5391 0.585787 19.9142C0.96086 20.2893 1.46957 20.5 2 20.5H18C18.5304 20.5 19.0391 20.2893 19.4142 19.9142C19.7893 19.5391 20 19.0304 20 18.5V2.5C20 1.96957 19.7893 1.46086 19.4142 1.08578C19.0391 0.710712 18.5304 0.5 18 0.5ZM12.7217 16.4417L11.8883 13.845H7.73833L6.91667 16.4417H4.07167L8.32 4.775H11.4367L15.5867 16.4417H12.7217Z\" fill=\"#2C3E50\"/>\n" +
+            "</svg>\n",
+        service: "<svg width=\"25\" height=\"25\" viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n" +
+            "<path d=\"M21.5 14.5H14.5V21.5H21.5V14.5Z\" stroke=\"#2C3E50\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n" +
+            "<path d=\"M10.5 14.5H3.5V21.5H10.5V14.5Z\" stroke=\"#2C3E50\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n" +
+            "<path d=\"M21.5 3.5H14.5V10.5H21.5V3.5Z\" stroke=\"#2C3E50\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n" +
+            "<path d=\"M10.5 3.5H3.5V10.5H10.5V3.5Z\" stroke=\"#2C3E50\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n" +
+            "</svg>\n",
+        favorite: "<svg width=\"25\" height=\"25\" viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n" +
+            "<path d=\"M5.5 2.5H19.5C19.7652 2.5 20.0196 2.60536 20.2071 2.79289C20.3946 2.98043 20.5 3.23478 20.5 3.5V22.643C20.5001 22.7324 20.4763 22.8202 20.4309 22.8973C20.3855 22.9743 20.3204 23.0378 20.2421 23.0811C20.1639 23.1244 20.0755 23.1459 19.9861 23.1434C19.8968 23.141 19.8097 23.1146 19.734 23.067L12.5 18.53L5.266 23.066C5.19037 23.1135 5.10339 23.1399 5.0141 23.1424C4.92482 23.1449 4.83649 23.1235 4.7583 23.0803C4.6801 23.0371 4.61491 22.9738 4.56948 22.8969C4.52406 22.82 4.50007 22.7323 4.5 22.643V3.5C4.5 3.23478 4.60536 2.98043 4.79289 2.79289C4.98043 2.60536 5.23478 2.5 5.5 2.5ZM18.5 4.5H6.5V19.932L12.5 16.171L18.5 19.932V4.5Z\" fill=\"#2C3E50\"/>\n" +
+            "</svg>\n",
+        sign: "<svg width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n" +
+            "<path d=\"M10 17.5L15 12.5L10 7.5\" stroke=\"#2C3E50\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n" +
+            "<path d=\"M15 12.5H3\" stroke=\"#2C3E50\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n" +
+            "<path d=\"M15 3.5H19C19.5304 3.5 20.0391 3.71071 20.4142 4.08579C20.7893 4.46086 21 4.96957 21 5.5V19.5C21 20.0304 20.7893 20.5391 20.4142 20.9142C20.0391 21.2893 19.5304 21.5 19 21.5H15\" stroke=\"#2C3E50\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n" +
+            "</svg>\n",
+        template: "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n" +
+            "<path d=\"M9 10H10C10.2652 10 10.5196 9.89464 10.7071 9.70711C10.8946 9.51957 11 9.26522 11 9C11 8.73478 10.8946 8.48043 10.7071 8.29289C10.5196 8.10536 10.2652 8 10 8H9C8.73478 8 8.48043 8.10536 8.29289 8.29289C8.10536 8.48043 8 8.73478 8 9C8 9.26522 8.10536 9.51957 8.29289 9.70711C8.48043 9.89464 8.73478 10 9 10ZM9 12C8.73478 12 8.48043 12.1054 8.29289 12.2929C8.10536 12.4804 8 12.7348 8 13C8 13.2652 8.10536 13.5196 8.29289 13.7071C8.48043 13.8946 8.73478 14 9 14H15C15.2652 14 15.5196 13.8946 15.7071 13.7071C15.8946 13.5196 16 13.2652 16 13C16 12.7348 15.8946 12.4804 15.7071 12.2929C15.5196 12.1054 15.2652 12 15 12H9ZM20 8.94C19.9896 8.84813 19.9695 8.75763 19.94 8.67V8.58C19.8919 8.47718 19.8278 8.38267 19.75 8.3L13.75 2.3C13.6673 2.22222 13.5728 2.15808 13.47 2.11C13.4402 2.10576 13.4099 2.10576 13.38 2.11C13.2784 2.05174 13.1662 2.01434 13.05 2H7C6.20435 2 5.44129 2.31607 4.87868 2.87868C4.31607 3.44129 4 4.20435 4 5V19C4 19.7956 4.31607 20.5587 4.87868 21.1213C5.44129 21.6839 6.20435 22 7 22H17C17.7956 22 18.5587 21.6839 19.1213 21.1213C19.6839 20.5587 20 19.7956 20 19V9C20 9 20 9 20 8.94ZM14 5.41L16.59 8H15C14.7348 8 14.4804 7.89464 14.2929 7.70711C14.1054 7.51957 14 7.26522 14 7V5.41ZM18 19C18 19.2652 17.8946 19.5196 17.7071 19.7071C17.5196 19.8946 17.2652 20 17 20H7C6.73478 20 6.48043 19.8946 6.29289 19.7071C6.10536 19.5196 6 19.2652 6 19V5C6 4.73478 6.10536 4.48043 6.29289 4.29289C6.48043 4.10536 6.73478 4 7 4H12V7C12 7.79565 12.3161 8.55871 12.8787 9.12132C13.4413 9.68393 14.2044 10 15 10H18V19ZM15 16H9C8.73478 16 8.48043 16.1054 8.29289 16.2929C8.10536 16.4804 8 16.7348 8 17C8 17.2652 8.10536 17.5196 8.29289 17.7071C8.48043 17.8946 8.73478 18 9 18H15C15.2652 18 15.5196 17.8946 15.7071 17.7071C15.8946 17.5196 16 17.2652 16 17C16 16.7348 15.8946 16.4804 15.7071 16.2929C15.5196 16.1054 15.2652 16 15 16Z\" fill=\"#2C3E50\"/>\n" +
+            "</svg>\n"
+      }
+    }
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.nav-icon {
+  width: 24px;
+  height: 24px;
+  max-width: 24px;
+}
 </style>

package/src/components/NavIcon/NavIcon.stories.js

@@ -1,15 +1,15 @@
-import ANavIcon from "./ANavIcon";
-
-export default {
-    title: "NavIcon",
-    component: ANavIcon,
-    template: "<a-nav-icon></a-nav-icon>"
-}
-
-const Template = (args, { argTypes }) => ({
-    component: { ANavIcon },
-    props: Object.keys(argTypes),
-    template: "<a-nav-icon v-bind='$props'></a-nav-icon>"
-})
-
+import ANavIcon from "./ANavIcon";
+
+export default {
+    title: "NavIcon",
+    component: ANavIcon,
+    template: "<a-nav-icon></a-nav-icon>"
+}
+
+const Template = (args, { argTypes }) => ({
+    component: { ANavIcon },
+    props: Object.keys(argTypes),
+    template: "<a-nav-icon v-bind='$props'></a-nav-icon>"
+})
+
 export const NavIcon = Template.bind({})