lob · NateWaldschmidt · Dec 20, 2023 · Dec 20, 2023 · Dec 20, 2023
@@ -1,5 +1,17 @@
 # CHANGELOG
 
+## v2.0.0-beta.63
+- Adds icons:
+  - `Exit`
+  - `FileAlt`
+  - `Gift`
+  - `LayerGroup`
+  - `OpenBook`
+  - `UserCircle`
+- Updates icons:
+  - `Signal`
+  - `User`
+
 ## v2.0.0-beta.62
 - Adds a `refresh` variant to `Alert`
 

@@ -1,6 +1,6 @@
 {
   "name": "@lob/ui-components",
-  "version": "2.0.0-beta.62",
+  "version": "2.0.0-beta.63",
   "engines": {
     "node": ">=14.18.2",
     "npm": ">=8.3.0"

@@ -2,24 +2,24 @@
   <svg
     :width="currentSize"
     :height="currentSize"
-    :viewBox="`0 0 ${currentSize} ${currentSize}`"
+    viewBox="0 0 20 20"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      :d="path"
+      d="M9.40964 12.743C9.3738 12.7826 9.34041 12.8243 9.30964 12.868C9.2781 12.9144 9.25288 12.9649 9.23464 13.018C9.21061 13.0652 9.19376 13.1158 9.18464 13.168C9.18055 13.2234 9.18055 13.2792 9.18464 13.3346C9.18182 13.4439 9.20466 13.5524 9.25131 13.6513C9.28873 13.7547 9.34844 13.8486 9.42621 13.9264C9.50398 14.0042 9.59789 14.0639 9.70131 14.1013C9.80106 14.1454 9.90891 14.1682 10.018 14.1682C10.127 14.1682 10.2349 14.1454 10.3346 14.1013C10.4381 14.0639 10.532 14.0042 10.6097 13.9264C10.6875 13.8486 10.7472 13.7547 10.7846 13.6513C10.8216 13.55 10.8386 13.4424 10.8346 13.3346C10.8353 13.225 10.8143 13.1162 10.7728 13.0147C10.7313 12.9132 10.6702 12.8208 10.593 12.743C10.5155 12.6649 10.4233 12.6029 10.3218 12.5606C10.2202 12.5183 10.1113 12.4965 10.0013 12.4965C9.8913 12.4965 9.78237 12.5183 9.68083 12.5606C9.57928 12.6029 9.48711 12.6649 9.40964 12.743ZM10.0013 1.66797C8.35313 1.66797 6.74196 2.15671 5.37155 3.07239C4.00114 3.98807 2.93304 5.28956 2.30231 6.81227C1.67158 8.33499 1.50655 10.0105 1.8281 11.6271C2.14964 13.2436 2.94331 14.7284 4.10875 15.8939C5.27419 17.0593 6.75905 17.853 8.37555 18.1745C9.99206 18.4961 11.6676 18.331 13.1903 17.7003C14.7131 17.0696 16.0145 16.0015 16.9302 14.6311C17.8459 13.2606 18.3346 11.6495 18.3346 10.0013C18.3346 8.90695 18.1191 7.82332 17.7003 6.81227C17.2815 5.80123 16.6677 4.88257 15.8939 4.10875C15.12 3.33492 14.2014 2.7211 13.1903 2.30231C12.1793 1.88352 11.0957 1.66797 10.0013 1.66797ZM10.0013 16.668C8.68276 16.668 7.39383 16.277 6.2975 15.5444C5.20118 14.8119 4.34669 13.7707 3.84211 12.5525C3.33752 11.3344 3.2055 9.99391 3.46274 8.7007C3.71997 7.40749 4.35491 6.21961 5.28726 5.28726C6.21961 4.35491 7.4075 3.71997 8.7007 3.46273C9.99391 3.2055 11.3344 3.33752 12.5525 3.84211C13.7707 4.34669 14.8119 5.20117 15.5444 6.2975C16.277 7.39383 16.668 8.68276 16.668 10.0013C16.668 11.7694 15.9656 13.4651 14.7154 14.7153C13.4651 15.9656 11.7694 16.668 10.0013 16.668ZM10.0013 5.83464C9.56219 5.83435 9.13075 5.94974 8.7504 6.16917C8.37004 6.38861 8.0542 6.70435 7.83464 7.08464C7.77434 7.17948 7.73386 7.28555 7.71562 7.39645C7.69738 7.50735 7.70176 7.62079 7.7285 7.72996C7.75524 7.83912 7.80378 7.94175 7.87121 8.03166C7.93864 8.12158 8.02356 8.19693 8.12086 8.25317C8.21817 8.30942 8.32585 8.3454 8.43742 8.35895C8.54899 8.3725 8.66215 8.36335 8.77009 8.33203C8.87803 8.30072 8.97852 8.24789 9.06551 8.17673C9.15251 8.10558 9.22421 8.01756 9.27631 7.91797C9.34973 7.7908 9.45545 7.68529 9.58276 7.61212C9.71008 7.53895 9.85446 7.50072 10.0013 7.5013C10.2223 7.5013 10.4343 7.5891 10.5906 7.74538C10.7468 7.90166 10.8346 8.11362 10.8346 8.33464C10.8346 8.55565 10.7468 8.76761 10.5906 8.92389C10.4343 9.08017 10.2223 9.16797 10.0013 9.16797C9.78029 9.16797 9.56833 9.25577 9.41205 9.41205C9.25577 9.56833 9.16797 9.78029 9.16797 10.0013V10.8346C9.16797 11.0556 9.25577 11.2676 9.41205 11.4239C9.56833 11.5802 9.78029 11.668 10.0013 11.668C10.2223 11.668 10.4343 11.5802 10.5906 11.4239C10.7468 11.2676 10.8346 11.0556 10.8346 10.8346V10.6846C11.3858 10.4847 11.8491 10.0973 12.1436 9.59036C12.4381 9.08339 12.5451 8.48905 12.4458 7.91121C12.3465 7.33338 12.0473 6.80882 11.6005 6.42923C11.1536 6.04965 10.5876 5.83918 10.0013 5.83464Z"
       fill="currentColor"
     />
   </svg>
 </template>
 
 <script>
 const iconInfo = {
-  xxl: { size: 24, path: 'M12 0C5.372 0 0 5.372 0 12s5.372 12 12 12 12-5.372 12-12S18.628 0 12 0zm0 21.75c-5.377 0-9.75-4.374-9.75-9.75S6.623 2.25 12 2.25s9.75 4.374 9.75 9.75-4.373 9.75-9.75 9.75zm0-6c-.844 0-1.5.656-1.5 1.5s.614 1.5 1.5 1.5c.802 0 1.5-.656 1.5-1.5s-.698-1.5-1.5-1.5zM13.552 6h-2.396a3.261 3.261 0 0 0-3.281 3.281c0 .61.516 1.125 1.125 1.125a1.14 1.14 0 0 0 1.125-1.125c0-.562.427-1.031.99-1.031h2.394c.605 0 1.116.469 1.116 1.031 0 .375-.188.661-.516.849l-2.671 1.636c-.376.234-.563.609-.563.984v.75c0 .61.516 1.125 1.125 1.125a1.14 1.14 0 0 0 1.125-1.125v-.094l2.114-1.312c.984-.61 1.594-1.688 1.594-2.813C16.875 7.453 15.422 6 13.552 6z' },
-  xl: { size: 20, path: 'M10 0C4.477 0 0 4.477 0 10s4.477 10 10 10 10-4.477 10-10S15.523 0 10 0zm0 18.125c-4.48 0-8.125-3.645-8.125-8.125S5.52 1.875 10 1.875 18.125 5.52 18.125 10 14.48 18.125 10 18.125zm0-5c-.703 0-1.25.547-1.25 1.25s.512 1.25 1.25 1.25c.668 0 1.25-.547 1.25-1.25s-.582-1.25-1.25-1.25zM11.293 5H9.297a2.718 2.718 0 0 0-2.735 2.734c0 .508.43.938.938.938a.95.95 0 0 0 .938-.938c0-.468.355-.859.824-.859h1.996c.504 0 .93.39.93.86 0 .312-.157.55-.43.706L9.53 9.805a.963.963 0 0 0-.469.82v.625c0 .508.43.938.938.938a.95.95 0 0 0 .938-.938v-.078l1.761-1.094c.82-.508 1.328-1.406 1.328-2.344C14.063 6.211 12.852 5 11.293 5z' },
-  l: { size: 18, path: 'M9 0a9 9 0 0 0-9 9 9 9 0 0 0 9 9 9 9 0 0 0 9-9 9 9 0 0 0-9-9zm0 16.313c-4.032 0-7.313-3.28-7.313-7.313 0-4.032 3.28-7.313 7.313-7.313 4.032 0 7.313 3.28 7.313 7.313 0 4.032-3.28 7.313-7.313 7.313zm0-4.5a1.11 1.11 0 0 0-1.125 1.124c0 .633.46 1.126 1.125 1.126a1.13 1.13 0 0 0 1.125-1.126A1.13 1.13 0 0 0 9 11.813zM10.164 4.5H8.367a2.446 2.446 0 0 0-2.46 2.46c0 .458.386.845.843.845a.855.855 0 0 0 .844-.844c0-.422.32-.774.742-.774h1.796c.454 0 .837.352.837.774 0 .281-.14.496-.387.636L8.578 8.824a.867.867 0 0 0-.422.739v.562c0 .457.387.844.844.844a.856.856 0 0 0 .844-.844v-.07l1.585-.985a2.508 2.508 0 0 0 1.196-2.11c.031-1.37-1.059-2.46-2.461-2.46z' },
-  m: { size: 16, path: 'M8 0a8 8 0 0 0-8 8 8 8 0 0 0 8 8 8 8 0 0 0 8-8 8 8 0 0 0-8-8zm0 14.5A6.507 6.507 0 0 1 1.5 8c0-3.584 2.916-6.5 6.5-6.5s6.5 2.916 6.5 6.5-2.916 6.5-6.5 6.5zm0-4c-.563 0-1 .438-1 1 0 .563.41 1 1 1 .534 0 1-.438 1-1 0-.563-.466-1-1-1zM9.034 4H7.437A2.174 2.174 0 0 0 5.25 6.188c0 .406.344.75.75.75a.76.76 0 0 0 .75-.75c0-.375.284-.688.66-.688h1.596c.403 0 .744.313.744.688 0 .25-.125.44-.344.565l-1.781 1.09a.77.77 0 0 0-.375.657V9c0 .406.344.75.75.75A.76.76 0 0 0 8.75 9v-.063l1.41-.874a2.23 2.23 0 0 0 1.062-1.876C11.25 4.97 10.282 4 9.034 4z' },
-  s: { size: 14, path: 'M7 0a7 7 0 0 0-7 7 7 7 0 0 0 7 7 7 7 0 0 0 7-7 7 7 0 0 0-7-7zm0 12.688A5.694 5.694 0 0 1 1.312 7 5.694 5.694 0 0 1 7 1.312 5.694 5.694 0 0 1 12.688 7 5.694 5.694 0 0 1 7 12.688zm0-3.5a.864.864 0 0 0-.875.874.85.85 0 0 0 .875.876.88.88 0 0 0 .875-.876A.88.88 0 0 0 7 9.188zM7.905 3.5H6.508a1.902 1.902 0 0 0-1.914 1.914c0 .356.3.656.656.656.355 0 .656-.3.656-.656 0-.328.25-.601.577-.601H7.88c.353 0 .651.273.651.601 0 .219-.11.386-.3.495l-1.56.954a.674.674 0 0 0-.327.574v.438c0 .355.3.656.656.656.355 0 .656-.3.656-.656V7.82l1.233-.765a1.95 1.95 0 0 0 .93-1.64C9.844 4.347 8.996 3.5 7.905 3.5z' }
+  xxl: { size: 24 },
+  xl: { size: 20 },
+  l: { size: 18 },
+  m: { size: 16 },
+  s: { size: 14 }
 };
 
 export default {
@@ -36,9 +36,6 @@ export default {
   computed: {
     currentSize () {
       return iconInfo[this.size].size;
-    },
-    path () {
-      return iconInfo[this.size].path;
     }
   }
 };

@@ -0,0 +1,45 @@
+<template>
+  <svg
+    :width="currentSize"
+    :height="currentSize"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M3.33203 10.0013C3.33203 10.2223 3.41983 10.4343 3.57611 10.5906C3.73239 10.7468 3.94435 10.8346 4.16536 10.8346H10.4904L8.5737 12.743C8.49559 12.8204 8.4336 12.9126 8.39129 13.0142C8.34898 13.1157 8.3272 13.2246 8.3272 13.3346C8.3272 13.4446 8.34898 13.5536 8.39129 13.6551C8.4336 13.7567 8.49559 13.8488 8.5737 13.9263C8.65117 14.0044 8.74333 14.0664 8.84488 14.1087C8.94643 14.151 9.05535 14.1728 9.16536 14.1728C9.27537 14.1728 9.3843 14.151 9.48585 14.1087C9.58739 14.0664 9.67956 14.0044 9.75703 13.9263L13.0904 10.593C13.1662 10.5137 13.2257 10.4203 13.2654 10.318C13.3487 10.1151 13.3487 9.88752 13.2654 9.68464C13.2257 9.58234 13.1662 9.48889 13.0904 9.40964L9.75703 6.0763C9.67933 5.9986 9.58709 5.93697 9.48557 5.89492C9.38405 5.85287 9.27525 5.83123 9.16536 5.83123C9.05548 5.83123 8.94667 5.85287 8.84516 5.89492C8.74364 5.93697 8.6514 5.9986 8.5737 6.0763C8.496 6.154 8.43436 6.24624 8.39231 6.34776C8.35026 6.44928 8.32862 6.55809 8.32862 6.66797C8.32862 6.77785 8.35026 6.88666 8.39231 6.98818C8.43436 7.0897 8.496 7.18194 8.5737 7.25964L10.4904 9.16797H4.16536C3.94435 9.16797 3.73239 9.25577 3.57611 9.41205C3.41983 9.56833 3.33203 9.78029 3.33203 10.0013ZM14.1654 1.66797H5.83203C5.16899 1.66797 4.53311 1.93136 4.06426 2.4002C3.59542 2.86904 3.33203 3.50493 3.33203 4.16797V6.66797C3.33203 6.88898 3.41983 7.10094 3.57611 7.25722C3.73239 7.4135 3.94435 7.5013 4.16536 7.5013C4.38638 7.5013 4.59834 7.4135 4.75462 7.25722C4.9109 7.10094 4.9987 6.88898 4.9987 6.66797V4.16797C4.9987 3.94696 5.0865 3.73499 5.24278 3.57871C5.39906 3.42243 5.61102 3.33464 5.83203 3.33464H14.1654C14.3864 3.33464 14.5983 3.42243 14.7546 3.57871C14.9109 3.73499 14.9987 3.94696 14.9987 4.16797V15.8346C14.9987 16.0556 14.9109 16.2676 14.7546 16.4239C14.5983 16.5802 14.3864 16.668 14.1654 16.668H5.83203C5.61102 16.668 5.39906 16.5802 5.24278 16.4239C5.0865 16.2676 4.9987 16.0556 4.9987 15.8346V13.3346C4.9987 13.1136 4.9109 12.9017 4.75462 12.7454C4.59834 12.5891 4.38638 12.5013 4.16536 12.5013C3.94435 12.5013 3.73239 12.5891 3.57611 12.7454C3.41983 12.9017 3.33203 13.1136 3.33203 13.3346V15.8346C3.33203 16.4977 3.59542 17.1336 4.06426 17.6024C4.53311 18.0712 5.16899 18.3346 5.83203 18.3346H14.1654C14.8284 18.3346 15.4643 18.0712 15.9331 17.6024C16.402 17.1336 16.6654 16.4977 16.6654 15.8346V4.16797C16.6654 3.50493 16.402 2.86904 15.9331 2.4002C15.4643 1.93136 14.8284 1.66797 14.1654 1.66797Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+
+<script>
+const iconInfo = {
+  xxl: { size: 24 },
+  xl: { size: 20 },
+  l: { size: 18 },
+  m: { size: 16 },
+  s: { size: 14 }
+};
+
+export default {
+  name: 'Exit',
+  props: {
+    size: {
+      type: String,
+      default: 'm',
+      validator: function (value) {
+        return ['xxl', 'xl', 'l', 'm', 's'].includes(value);
+      }
+    }
+  },
+  computed: {
+    currentSize () {
+      return iconInfo[this.size].size;
+    },
+    path () {
+      return iconInfo[this.size].path;
+    }
+  }
+};
+</script>
@@ -0,0 +1,42 @@
+<template>
+  <svg
+    :width="currentSize"
+    :height="currentSize"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M7.4987 8.33464H8.33203C8.55304 8.33464 8.76501 8.24684 8.92129 8.09056C9.07757 7.93428 9.16536 7.72232 9.16536 7.5013C9.16536 7.28029 9.07757 7.06833 8.92129 6.91205C8.76501 6.75577 8.55304 6.66797 8.33203 6.66797H7.4987C7.27768 6.66797 7.06572 6.75577 6.90944 6.91205C6.75316 7.06833 6.66536 7.28029 6.66536 7.5013C6.66536 7.72232 6.75316 7.93428 6.90944 8.09056C7.06572 8.24684 7.27768 8.33464 7.4987 8.33464ZM7.4987 10.0013C7.27768 10.0013 7.06572 10.0891 6.90944 10.2454C6.75316 10.4017 6.66536 10.6136 6.66536 10.8346C6.66536 11.0556 6.75316 11.2676 6.90944 11.4239C7.06572 11.5802 7.27768 11.668 7.4987 11.668H12.4987C12.7197 11.668 12.9317 11.5802 13.088 11.4239C13.2442 11.2676 13.332 11.0556 13.332 10.8346C13.332 10.6136 13.2442 10.4017 13.088 10.2454C12.9317 10.0891 12.7197 10.0013 12.4987 10.0013H7.4987ZM16.6654 7.4513C16.6567 7.37475 16.6399 7.29933 16.6154 7.2263V7.1513C16.5753 7.06562 16.5219 6.98686 16.457 6.91797L11.457 1.91797C11.3881 1.85315 11.3094 1.7997 11.2237 1.75964C11.1988 1.7561 11.1736 1.7561 11.1487 1.75964C11.064 1.71109 10.9706 1.67992 10.8737 1.66797H5.83203C5.16899 1.66797 4.53311 1.93136 4.06426 2.4002C3.59542 2.86904 3.33203 3.50493 3.33203 4.16797V15.8346C3.33203 16.4977 3.59542 17.1336 4.06426 17.6024C4.53311 18.0712 5.16899 18.3346 5.83203 18.3346H14.1654C14.8284 18.3346 15.4643 18.0712 15.9331 17.6024C16.402 17.1336 16.6654 16.4977 16.6654 15.8346V7.5013C16.6654 7.5013 16.6654 7.5013 16.6654 7.4513ZM11.6654 4.50964L13.8237 6.66797H12.4987C12.2777 6.66797 12.0657 6.58017 11.9094 6.42389C11.7532 6.26761 11.6654 6.05565 11.6654 5.83464V4.50964ZM14.9987 15.8346C14.9987 16.0556 14.9109 16.2676 14.7546 16.4239C14.5983 16.5802 14.3864 16.668 14.1654 16.668H5.83203C5.61102 16.668 5.39906 16.5802 5.24278 16.4239C5.0865 16.2676 4.9987 16.0556 4.9987 15.8346V4.16797C4.9987 3.94696 5.0865 3.73499 5.24278 3.57871C5.39906 3.42243 5.61102 3.33464 5.83203 3.33464H9.9987V5.83464C9.9987 6.49768 10.2621 7.13356 10.7309 7.6024C11.1998 8.07124 11.8357 8.33464 12.4987 8.33464H14.9987V15.8346ZM12.4987 13.3346H7.4987C7.27768 13.3346 7.06572 13.4224 6.90944 13.5787C6.75316 13.735 6.66536 13.947 6.66536 14.168C6.66536 14.389 6.75316 14.6009 6.90944 14.7572C7.06572 14.9135 7.27768 15.0013 7.4987 15.0013H12.4987C12.7197 15.0013 12.9317 14.9135 13.088 14.7572C13.2442 14.6009 13.332 14.389 13.332 14.168C13.332 13.947 13.2442 13.735 13.088 13.5787C12.9317 13.4224 12.7197 13.3346 12.4987 13.3346Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+
+<script>
+const iconInfo = {
+  xxl: { size: 24 },
+  xl: { size: 20 },
+  l: { size: 18 },
+  m: { size: 16 },
+  s: { size: 14 }
+};
+
+export default {
+  name: 'FileAlt',
+  props: {
+    size: {
+      type: String,
+      default: 'm',
+      validator: function (value) {
+        return ['xxl', 'xl', 'l', 'm', 's'].includes(value);
+      }
+    }
+  },
+  computed: {
+    currentSize () {
+      return iconInfo[this.size].size;
+    }
+  }
+};
+</script>
@@ -0,0 +1,42 @@
+<template>
+  <svg
+    :width="currentSize"
+    :height="currentSize"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M15 5.83503H14.7083C14.8985 5.44567 14.9982 5.01836 15 4.58503C15.0025 4.00447 14.8312 3.43644 14.5082 2.95406C14.1851 2.47168 13.7251 2.09702 13.1873 1.87831C12.6495 1.65961 12.0585 1.60687 11.4905 1.72688C10.9225 1.84688 10.4034 2.13415 10 2.5517C9.59662 2.13415 9.07751 1.84688 8.50948 1.72688C7.94146 1.60687 7.35051 1.65961 6.81271 1.87831C6.27491 2.09702 5.81488 2.47168 5.49182 2.95406C5.16877 3.43644 4.99748 4.00447 5 4.58503C5.00178 5.01836 5.10149 5.44567 5.29167 5.83503H5C4.33696 5.83503 3.70107 6.09842 3.23223 6.56727C2.76339 7.03611 2.5 7.67199 2.5 8.33503V10.0017C2.5 10.2227 2.5878 10.4347 2.74408 10.591C2.90036 10.7472 3.11232 10.835 3.33333 10.835H4.16667V15.835C4.16667 16.4981 4.43006 17.134 4.8989 17.6028C5.36774 18.0716 6.00363 18.335 6.66667 18.335H13.3333C13.9964 18.335 14.6323 18.0716 15.1011 17.6028C15.5699 17.134 15.8333 16.4981 15.8333 15.835V10.835H16.6667C16.8877 10.835 17.0996 10.7472 17.2559 10.591C17.4122 10.4347 17.5 10.2227 17.5 10.0017V8.33503C17.5 7.67199 17.2366 7.03611 16.7678 6.56727C16.2989 6.09842 15.663 5.83503 15 5.83503ZM9.16667 16.6684H6.66667C6.44565 16.6684 6.23369 16.5806 6.07741 16.4243C5.92113 16.268 5.83333 16.056 5.83333 15.835V10.835H9.16667V16.6684ZM9.16667 9.16837H4.16667V8.33503C4.16667 8.11402 4.25446 7.90206 4.41074 7.74578C4.56702 7.5895 4.77899 7.5017 5 7.5017H9.16667V9.16837ZM9.16667 5.83503H7.91667C7.66944 5.83503 7.42777 5.76172 7.2222 5.62437C7.01664 5.48702 6.85643 5.29179 6.76182 5.06339C6.66721 4.83498 6.64245 4.58365 6.69068 4.34117C6.73892 4.09869 6.85797 3.87596 7.03278 3.70115C7.2076 3.52633 7.43033 3.40728 7.6728 3.35905C7.91528 3.31082 8.16661 3.33557 8.39502 3.43018C8.62343 3.52479 8.81865 3.68501 8.956 3.89057C9.09336 4.09613 9.16667 4.33781 9.16667 4.58503V5.83503ZM10.8333 4.58503C10.8333 4.33781 10.9066 4.09613 11.044 3.89057C11.1813 3.68501 11.3766 3.52479 11.605 3.43018C11.8334 3.33557 12.0847 3.31082 12.3272 3.35905C12.5697 3.40728 12.7924 3.52633 12.9672 3.70115C13.142 3.87596 13.2611 4.09869 13.3093 4.34117C13.3575 4.58365 13.3328 4.83498 13.2382 5.06339C13.1436 5.29179 12.9834 5.48702 12.7778 5.62437C12.5722 5.76172 12.3306 5.83503 12.0833 5.83503H10.8333V4.58503ZM14.1667 15.835C14.1667 16.056 14.0789 16.268 13.9226 16.4243C13.7663 16.5806 13.5543 16.6684 13.3333 16.6684H10.8333V10.835H14.1667V15.835ZM15.8333 9.16837H10.8333V7.5017H15C15.221 7.5017 15.433 7.5895 15.5893 7.74578C15.7455 7.90206 15.8333 8.11402 15.8333 8.33503V9.16837Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+
+<script>
+const iconInfo = {
+  xxl: { size: 24 },
+  xl: { size: 20 },
+  l: { size: 18 },
+  m: { size: 16 },
+  s: { size: 14 }
+};
+
+export default {
+  name: 'Gift',
+  props: {
+    size: {
+      type: String,
+      default: 'm',
+      validator: function (value) {
+        return ['xxl', 'xl', 'l', 'm', 's'].includes(value);
+      }
+    }
+  },
+  computed: {
+    currentSize () {
+      return iconInfo[this.size].size;
+    }
+  }
+};
+</script>
@@ -0,0 +1,42 @@
+<template>
+  <svg
+    :width="currentSize"
+    :height="currentSize"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2.08497 7.38222L9.58497 11.7156C9.71165 11.7887 9.85535 11.8272 10.0016 11.8272C10.1479 11.8272 10.2916 11.7887 10.4183 11.7156L17.9183 7.38222C18.0442 7.30951 18.149 7.2051 18.2221 7.07937C18.2952 6.95365 18.3341 6.81098 18.335 6.66555C18.3355 6.51871 18.2973 6.37432 18.2241 6.24701C18.151 6.11969 18.0455 6.01397 17.9183 5.94055L10.4183 1.61555C10.2916 1.54241 10.1479 1.50391 10.0016 1.50391C9.85535 1.50391 9.71165 1.54241 9.58497 1.61555L2.08497 5.94055C1.9578 6.01397 1.85228 6.11969 1.77911 6.24701C1.70595 6.37432 1.66772 6.51871 1.6683 6.66555C1.66918 6.81098 1.7081 6.95365 1.78119 7.07937C1.85429 7.2051 1.95902 7.30951 2.08497 7.38222ZM10.0016 3.33222L15.835 6.66555L10.0016 9.99889L4.1683 6.66555L10.0016 3.33222ZM17.085 9.30722L10.0016 13.3322L2.9183 9.27389C2.82319 9.21879 2.71812 9.18305 2.60913 9.16873C2.50015 9.15441 2.38941 9.16179 2.2833 9.19045C2.17718 9.21911 2.07778 9.26848 1.99083 9.33572C1.90387 9.40295 1.83107 9.48673 1.77663 9.58222C1.66799 9.77357 1.63943 10.0001 1.6972 10.2124C1.75496 10.4248 1.89436 10.6056 2.08497 10.7156L9.58497 15.0489C9.71165 15.122 9.85535 15.1605 10.0016 15.1605C10.1479 15.1605 10.2916 15.122 10.4183 15.0489L17.9183 10.7156C18.1089 10.6056 18.2483 10.4248 18.3061 10.2124C18.3638 10.0001 18.3353 9.77357 18.2266 9.58222C18.1722 9.48673 18.0994 9.40295 18.0124 9.33572C17.9255 9.26848 17.8261 9.21911 17.72 9.19045C17.6139 9.16179 17.5031 9.15441 17.3941 9.16873C17.2851 9.18305 17.1801 9.21879 17.085 9.27389V9.30722ZM17.085 12.6406L10.0016 16.6656L2.9183 12.6072C2.82319 12.5521 2.71812 12.5164 2.60913 12.5021C2.50015 12.4877 2.38941 12.4951 2.2833 12.5238C2.17718 12.5524 2.07778 12.6018 1.99083 12.6691C1.90387 12.7363 1.83107 12.8201 1.77663 12.9156C1.66799 13.1069 1.63943 13.3335 1.6972 13.5458C1.75496 13.7581 1.89436 13.939 2.08497 14.0489L9.58497 18.3822C9.71165 18.4554 9.85535 18.4939 10.0016 18.4939C10.1479 18.4939 10.2916 18.4554 10.4183 18.3822L17.9183 14.0489C18.1089 13.939 18.2483 13.7581 18.3061 13.5458C18.3638 13.3335 18.3353 13.1069 18.2266 12.9156C18.1722 12.8201 18.0994 12.7363 18.0124 12.6691C17.9255 12.6018 17.8261 12.5524 17.72 12.5238C17.6139 12.4951 17.5031 12.4877 17.3941 12.5021C17.2851 12.5164 17.1801 12.5521 17.085 12.6072V12.6406Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+
+<script>
+const iconInfo = {
+  xxl: { size: 24 },
+  xl: { size: 20 },
+  l: { size: 18 },
+  m: { size: 16 },
+  s: { size: 14 }
+};
+
+export default {
+  name: 'LayerGroup',
+  props: {
+    size: {
+      type: String,
+      default: 'm',
+      validator: function (value) {
+        return ['xxl', 'xl', 'l', 'm', 's'].includes(value);
+      }
+    }
+  },
+  computed: {
+    currentSize () {
+      return iconInfo[this.size].size;
+    }
+  }
+};
+</script>