sprof 0.1.0

package/src/components/Icons/IconCheckDefault.vue

@@ -0,0 +1,41 @@
+<template>
+  <svg
+    class="icon"
+    :class="iconClass"
+    :style="{
+      margin: margin,
+      width: size,
+      height: size,
+    }"
+  >
+    <use xlink:href="#check_on"></use>
+  </svg>
+
+  <svg width="0" height="0" class="hidden">
+    <symbol id="check_on" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+      <path
+        d="M29.3678 7.25259C29.2732 7.3128 28.8775 7.6999 28.5076 8.13001C27.7076 9.02463 16.2409 22.0483 16.2065 22.0999C16.1549 22.1601 15.6732 21.73 13.9786 20.1042C8.31835 14.6934 8.5334 14.8827 8.03448 14.8827C7.69899 14.8827 7.59577 14.9257 7.3463 15.1752C7.09684 15.4246 7.05383 15.5279 7.05383 15.8547C7.05383 16.3365 6.98501 16.259 10.1506 19.2354C11.5011 20.4999 13.256 22.1601 14.056 22.9171C15.6302 24.4225 15.9485 24.6461 16.3872 24.5687C16.7399 24.4999 16.7743 24.4569 20.0947 20.6891C21.5485 19.0289 23.2689 17.0762 23.914 16.3451C29.4624 10.0655 30.6495 8.69775 30.77 8.48269C30.942 8.14721 30.8474 7.6999 30.5377 7.38162C30.3399 7.19237 30.2194 7.14076 29.9183 7.14076C29.7119 7.14936 29.471 7.19237 29.3678 7.25259Z"
+        fill="currentColor"
+      ></path>
+    </symbol>
+  </svg>
+</template>
+
+<script lang="ts" setup>
+// const hovering = ref(false);
+defineProps({
+  size: { type: String as PropType<string>, default: '22px' },
+  margin: { type: String as PropType<string>, default: '0' },
+  iconClass: { type: String as PropType<string>, required: false, default: '' },
+});
+</script>
+
+<style lang="scss" scoped>
+.hidden {
+  display: none;
+}
+.icon {
+  box-sizing: border-box;
+  padding: 0;
+}
+</style>

package/src/components/Icons/IconClose.vue

@@ -0,0 +1,37 @@
+<template>
+  <svg
+    class="icon"
+    :class="iconClass"
+    :style="{
+      margin: margin,
+      width: size,
+      height: size,
+    }"
+  >
+    <use xlink:href="#close"></use>
+  </svg>
+
+  <svg width="0" height="0" class="hidden">
+    <symbol id="close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28">
+      <path
+        d="M7.53508 7.18138C7.03684 7.5158 6.86132 8.14496 7.1161 8.66643C7.18971 8.8138 8.02201 9.69236 9.44881 11.1207C10.6718 12.345 11.8211 13.49 12.0023 13.6714L12.3251 14.0058L9.80551 16.5224C7.92576 18.4043 7.25199 19.1184 7.14441 19.3225C6.83867 19.9346 7.0425 20.5865 7.637 20.8926C7.89745 21.0286 8.41268 21.0343 8.6618 20.9096C8.76372 20.8585 10.0037 19.6626 11.4191 18.2455L14.001 15.6666L16.5432 18.2229C18.1964 19.8723 19.1703 20.8132 19.3232 20.8869C19.5779 21.0116 20.0309 21.0399 20.2913 20.9379C20.5178 20.8529 20.8632 20.5015 20.9368 20.2747C21.0274 19.9913 21.0161 19.5719 20.9028 19.3508C20.8519 19.2431 19.6516 17.9961 18.2361 16.5791L15.6656 14.0001L18.2191 11.4495C19.7138 9.95309 20.8179 8.80813 20.8858 8.6721C21.0104 8.42837 21.0387 7.98058 20.9425 7.73119C20.8519 7.50446 20.5971 7.23239 20.3593 7.11336C20.0988 6.97733 19.6516 6.96599 19.3628 7.08502C19.2212 7.14737 18.3097 8.01459 16.5771 9.74904L14.001 12.328L11.4191 9.75471C9.6583 7.99192 8.77504 7.14737 8.63349 7.08502C8.51459 7.03968 8.28246 7 8.1126 7C7.86347 7 7.76156 7.03401 7.53508 7.18138Z"
+        fill="currentColor"
+      ></path>
+    </symbol>
+  </svg>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  size: { type: String as PropType<string>, default: '24px' },
+  margin: { type: String as PropType<string>, default: '0' },
+  iconClass: { type: String as PropType<string>, required: false, default: '' },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@/services/assets/styles/index.scss';
+.hidden {
+  display: none;
+}
+</style>

package/src/components/Icons/IconEdit.vue

@@ -0,0 +1,40 @@
+<template>
+  <svg
+    class="icon"
+    :class="iconClass"
+    :style="{
+      margin: margin,
+      width: size,
+      height: size,
+    }"
+  >
+    <use xlink:href="#edit"></use>
+  </svg>
+
+  <svg width="0" height="0" class="hidden">
+    <symbol id="edit" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+      <path
+        d="M21.993 4.16087C21.6831 4.26049 21.2404 4.48185 20.9969 4.64787C20.1778 5.22342 4.60489 20.9402 4.39459 21.4051C4.11789 22.0138 3 25.8434 3 26.1865C3 26.5961 3.30991 27.1938 3.65302 27.4373C4.2507 27.8689 4.58275 27.8468 6.88493 27.1716C8.06923 26.8174 9.23138 26.4411 9.47488 26.3194C10.0062 26.0537 25.4795 10.6468 26.0772 9.79458C26.8519 8.67669 26.9626 7.32637 26.3871 6.10887C25.6234 4.48185 23.6754 3.61853 21.993 4.16087ZM24.0406 6.25276C24.7379 6.70655 25.0035 7.69162 24.6272 8.44426C24.4501 8.78737 9.331 24.0393 8.73332 24.471C8.48982 24.6481 5.2247 25.6995 5.13616 25.6331C5.11402 25.611 5.42393 24.5042 5.82239 23.1871L6.12123 22.1909L14.1125 14.1886C22.5243 5.76576 22.4911 5.79896 23.3101 5.94285C23.4983 5.97605 23.8192 6.11994 24.0406 6.25276Z"
+        fill="currentColor"
+      ></path>
+      <path
+        d="M15.098 25.9216C14.5446 26.1872 14.4118 27.1169 14.8656 27.5265C15.0759 27.7146 15.4743 27.7257 21.1302 27.7589C25.325 27.781 27.273 27.7478 27.4722 27.6703C28.0367 27.4268 28.1806 26.6521 27.7489 26.154L27.4833 25.8441L21.4069 25.822C17.2674 25.8109 15.264 25.833 15.098 25.9216Z"
+        fill="currentColor"
+      ></path>
+    </symbol>
+  </svg>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  size: { type: String, default: '' },
+  margin: { type: String, default: '0 15px 0 0' },
+  iconClass: { type: String, required: false, default: '' },
+});
+</script>
+
+<style lang="scss" scoped>
+.hidden {
+  display: none;
+}
+</style>

package/src/components/Icons/IconEmail.vue

@@ -0,0 +1,36 @@
+<template>
+  <svg
+    class="icon"
+    :class="iconClass"
+    :style="{
+      margin: margin,
+      width: size,
+      height: size,
+    }"
+  >
+    <use xlink:href="#email"></use>
+  </svg>
+
+  <svg width="0" height="0" class="hidden">
+    <symbol id="email" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        d="M20 20H4C3.46957 20 2.96086 19.7893 2.58579 19.4142C2.21071 19.0391 2 18.5304 2 18V5.913C2.02243 5.39779 2.24301 4.91116 2.61568 4.5547C2.98835 4.19824 3.4843 3.99951 4 4H20C20.5304 4 21.0391 4.21071 21.4142 4.58579C21.7893 4.96086 22 5.46957 22 6V18C22 18.5304 21.7893 19.0391 21.4142 19.4142C21.0391 19.7893 20.5304 20 20 20ZM4 7.868V18H20V7.868L12 13.2L4 7.868ZM4.8 6L12 10.8L19.2 6H4.8Z"
+        fill="currentColor"
+      ></path>
+    </symbol>
+  </svg>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  size: { type: String, default: '' },
+  margin: { type: String, default: '0 10px 0 0' },
+  iconClass: { type: String, required: false, default: '' },
+});
+</script>
+
+<style lang="scss" scoped>
+.hidden {
+  display: none;
+}
+</style>

package/src/components/Icons/IconMove.vue

@@ -0,0 +1,53 @@
+<template>
+  <svg
+    class="icon"
+    :class="iconClass"
+    :style="{
+      margin: margin,
+      width: size,
+      height: size,
+    }"
+  >
+    <use xlink:href="#icon-move"></use>
+  </svg>
+
+  <svg width="0" height="0" class="hidden">
+    <symbol id="icon-move" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
+      <path
+        d="M8.91736 3.08529L6.83471 5.17059H8.0843H9.33058V7.25588V9.34117H7.24793H5.16529L5.15868 8.09993L5.14876 6.85868L3.07273 8.93404L1 11.0127L3.08264 13.098L5.16529 15.1833V13.9321V12.6843H7.24793H9.33058V14.7696V16.8548H7.89256C7.10248 16.8548 6.45455 16.8648 6.45785 16.878C6.45785 16.8946 6.60992 17.0402 6.79504 17.2057C7.16529 17.5367 8.90744 19.1189 9.38017 19.5525C10.7058 20.7639 10.9967 21.0188 11.0331 20.999C11.0562 20.9857 12.0876 20.0523 13.3273 18.9236L15.5785 16.8714L14.124 16.8615L12.6694 16.8548V14.7696V12.6843H14.7521H16.8347V13.9255C16.8347 14.6074 16.8446 15.1668 16.8612 15.1668C16.8975 15.1668 21 11.0491 21 11.0127C21 10.9763 16.8975 6.85868 16.8612 6.85868C16.8446 6.85868 16.8347 7.41807 16.8347 8.09993V9.34117H14.7521H12.6694V7.25588V5.17059H13.9091C14.5901 5.17059 15.1488 5.16066 15.1488 5.14411C15.1488 5.12094 11.043 1 11.0165 1C11.0066 1 10.0612 1.93673 8.91736 3.08529ZM12.081 3.24086C12.6595 3.82011 13.1322 4.30337 13.1322 4.31661C13.1322 4.33316 12.8413 4.34309 12.4876 4.34309H11.843V7.25588V10.1687H14.7686H17.6942V9.53646C17.6909 9.18891 17.6975 8.89763 17.7041 8.89101C17.7074 8.88439 18.1934 9.36103 18.7785 9.9469L19.843 11.0127L18.7686 12.0885L17.6942 13.1642V12.9325C17.6909 12.8034 17.6876 12.5155 17.6843 12.2871L17.6777 11.8733L14.762 11.8634L11.843 11.8568V14.7696V17.6823L12.6331 17.689L13.4264 17.6989L12.2165 18.7978L11.0066 19.9L10.7223 19.6419C10.5669 19.5028 10.4314 19.3804 10.4215 19.3704C10.405 19.3539 9.92893 18.917 9.28099 18.3311C9.09917 18.1656 8.86777 17.9538 8.7686 17.8578L8.58678 17.6823H9.37355H10.157V14.7696V11.8568H7.24793H4.33884L4.33223 12.5022L4.32231 13.1477L3.25455 12.0785L2.19008 11.0127L3.25455 9.94359L4.32231 8.87446L4.33223 9.52322L4.33884 10.1687H7.24793H10.157V7.25588V4.34309L9.5124 4.33647L8.86446 4.32654L9.93223 3.25741C10.5174 2.67154 11.0066 2.1916 11.0165 2.1916C11.0264 2.1916 11.5058 2.66492 12.081 3.24086Z"
+        fill="currentColor"
+      ></path>
+    </symbol>
+  </svg>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  size: { type: String as PropType<string>, default: '24px' },
+  margin: { type: String as PropType<string>, default: '0' },
+  iconClass: { type: String as PropType<string>, required: false, default: '' },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@/services/assets/styles/index.scss';
+.hidden {
+  display: none;
+}
+
+@keyframes ripple {
+  0% {
+    transform: scale(1, 1);
+  }
+
+  50% {
+    transform: scale(1.15, 1.15);
+  }
+}
+
+.icon {
+  animation-name: ripple;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+}
+</style>

package/src/components/Icons/IconPhone.vue

@@ -0,0 +1,36 @@
+<template>
+  <svg
+    class="icon"
+    :class="iconClass"
+    :style="{
+      margin: margin,
+      width: size,
+      height: size,
+    }"
+  >
+    <use xlink:href="#phone"></use>
+  </svg>
+
+  <svg width="0" height="0" class="hidden">
+    <symbol id="phone" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        d="M19.4998 21.75H19.3723C4.63482 20.9025 2.54232 8.4675 2.24982 4.6725C2.22625 4.37744 2.26114 4.08062 2.35248 3.79906C2.44382 3.5175 2.58981 3.25673 2.78211 3.03169C2.9744 2.80665 3.20921 2.62177 3.47308 2.48763C3.73695 2.35349 4.02469 2.27274 4.31982 2.25H8.45232C8.75274 2.24971 9.04632 2.33963 9.29504 2.50812C9.54377 2.67661 9.73617 2.9159 9.84732 3.195L10.9873 6C11.0971 6.27266 11.1243 6.57156 11.0657 6.85957C11.007 7.14758 10.865 7.412 10.6573 7.62L9.05982 9.2325C9.30936 10.6506 9.98846 11.9578 11.0052 12.9772C12.022 13.9967 13.3274 14.6792 14.7448 14.9325L16.3723 13.32C16.5834 13.1146 16.8504 12.9759 17.1398 12.9213C17.4292 12.8666 17.7283 12.8983 17.9998 13.0125L20.8273 14.145C21.1022 14.2597 21.3367 14.4536 21.501 14.702C21.6653 14.9504 21.7519 15.2422 21.7498 15.54V19.5C21.7498 20.0967 21.5128 20.669 21.0908 21.091C20.6689 21.5129 20.0966 21.75 19.4998 21.75ZM4.49982 3.75C4.30091 3.75 4.11014 3.82902 3.96949 3.96967C3.82884 4.11032 3.74982 4.30109 3.74982 4.5V4.56C4.09482 9 6.30732 19.5 19.4548 20.25C19.5534 20.2561 19.6521 20.2427 19.7454 20.2105C19.8388 20.1783 19.9248 20.1281 19.9987 20.0626C20.0726 19.9971 20.1328 19.9176 20.1759 19.8288C20.219 19.74 20.2441 19.6436 20.2498 19.545V15.54L17.4223 14.4075L15.2698 16.545L14.9098 16.5C8.38482 15.6825 7.49982 9.1575 7.49982 9.09L7.45482 8.73L9.58482 6.5775L8.45982 3.75H4.49982Z"
+        fill="currentColor"
+      ></path>
+    </symbol>
+  </svg>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  size: { type: String, default: '' },
+  margin: { type: String, default: '0 10px 0 0' },
+  iconClass: { type: String, required: false, default: '' },
+});
+</script>
+
+<style lang="scss" scoped>
+.hidden {
+  display: none;
+}
+</style>

package/src/components/Icons/IconSearch.vue

@@ -0,0 +1,47 @@
+<template>
+  <svg
+    class="icon"
+    :class="iconClass"
+    :style="{
+      margin: margin,
+      width: size,
+      height: size,
+    }"
+  >
+    <use xlink:href="#search"></use>
+  </svg>
+
+  <svg width="0" height="0" class="hidden">
+    <symbol id="search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        d="M11 19C12.775 18.9996 14.4988 18.4054 15.897 17.312L20.293 21.708L21.707 20.294L17.311 15.898C18.405 14.4997 18.9996 12.7754 19 11C19 6.589 15.411 3 11 3C6.589 3 3 6.589 3 11C3 15.411 6.589 19 11 19ZM11 5C14.309 5 17 7.691 17 11C17 14.309 14.309 17 11 17C7.691 17 5 14.309 5 11C5 7.691 7.691 5 11 5Z"
+        fill="currentColor"
+      ></path>
+    </symbol>
+  </svg>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  size: { type: String, default: '' },
+  margin: { type: String, default: '0' },
+  iconClass: { type: String, required: false, default: '' },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@/services/assets/styles/index.scss';
+.hidden {
+  display: none;
+}
+.icon {
+  width: $icon-width;
+  height: $icon-height;
+  fill: $icon-color;
+  transition: $icon-transition;
+}
+
+.icon:hover {
+  fill: $icon-hover-color;
+}
+</style>

package/src/components/Icons/IconSelectArrow.vue

@@ -0,0 +1,41 @@
+<template>
+  <svg
+    class="icon"
+    :class="iconClass"
+    :style="{
+      margin: margin,
+      width: size,
+      height: size,
+    }"
+  >
+    <use xlink:href="#arrow-down"></use>
+  </svg>
+
+  <svg width="0" height="0" class="hidden">
+    <symbol id="arrow-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 20">
+      <path
+        d="M3.08417 4.43062C2.86268 4.4769 2.70731 4.56285 2.52549 4.74467C2.29408 4.97607 2.20152 5.2174 2.22136 5.55459C2.25111 6.0207 1.96681 5.70996 6.78995 10.5397C9.18995 12.9463 11.2263 14.9662 11.309 15.029C11.5238 15.1843 11.7123 15.2471 11.99 15.2505C12.4693 15.2538 12.109 15.581 17.1106 10.5728C22.0891 5.58764 21.7288 5.98103 21.7255 5.505C21.7255 5.37607 21.7023 5.21078 21.6726 5.13145C21.5106 4.68186 21.0511 4.38434 20.5817 4.4174C20.1519 4.44715 20.4263 4.19591 16.0164 8.60252L11.9833 12.629L8.06598 8.71161C5.91061 6.55624 4.0726 4.73475 3.98003 4.66202C3.71227 4.45376 3.38499 4.36781 3.08417 4.43062Z"
+        fill="currentColor"
+      />
+      <path
+        d="M9.69602 16.8994C9.70593 16.9292 9.72577 17.0184 9.73569 17.1044C9.76213 17.2664 9.7985 17.2994 9.83486 17.1903C9.84478 17.154 9.89106 17.1143 9.93734 17.1044C10.0464 17.078 10.0365 17.0548 9.87453 16.9589C9.6861 16.8465 9.67288 16.8432 9.69602 16.8994Z"
+        fill="currentColor"
+      />
+    </symbol>
+  </svg>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  size: { type: String as PropType<string>, default: '20px' },
+  margin: { type: String as PropType<string>, default: '0' },
+  iconClass: { type: String as PropType<string>, required: false, default: '' },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@/services/assets/styles/index.scss';
+.hidden {
+  display: none;
+}
+</style>

package/src/components/Icons/Pagination/ArrowLeft.vue

@@ -0,0 +1,52 @@
+<template>
+  <svg
+    class="icon"
+    :class="iconClass"
+    :style="{
+      margin: margin,
+      width: size,
+      height: size,
+      fill: hoverColor ? (hovering ? hoverColor : color) : hovering ? color : color,
+    }"
+    @mouseenter="hovering = true"
+    @mouseleave="hovering = false"
+  >
+    <use xlink:href="#arrow-left"></use>
+  </svg>
+
+  <svg width="0" height="0" class="hidden">
+    <symbol id="arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+      <path
+        d="M656.733 149.806C659.446 147.019 662.69 144.804 666.274 143.292C669.857 141.779 673.707 141 677.597 141C681.486 141 685.337 141.779 688.92 143.292C692.503 144.804 695.748 147.019 698.461 149.806C704.024 155.518 707.138 163.176 707.138 171.15C707.138 179.123 704.024 186.782 698.461 192.494L386.589 512.366L698.461 832.302C701.269 835.176 703.483 838.575 704.976 842.305C706.47 846.035 707.215 850.022 707.167 854.04C707.119 858.057 706.281 862.026 704.699 865.72C703.118 869.413 700.824 872.759 697.949 875.566C695.211 878.242 691.972 880.351 688.417 881.774C684.863 883.197 681.063 883.904 677.235 883.857C673.407 883.809 669.625 883.007 666.107 881.497C662.589 879.986 659.404 877.797 656.733 875.054L325.085 534.702C319.26 528.726 316 520.711 316 512.366C316 504.021 319.26 496.006 325.085 490.03L656.733 149.806Z"
+      ></path>
+    </symbol>
+  </svg>
+</template>
+
+<script lang="ts" setup>
+const hovering = ref(false);
+defineProps({
+  color: { type: String as PropType<string>, default: '' },
+  hoverColor: { type: String as PropType<string>, default: '' },
+  size: { type: String as PropType<string>, default: '' },
+  margin: { type: String as PropType<string>, default: '0' },
+  iconClass: { type: String as PropType<string>, required: false, default: '' },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@/services/assets/styles/index.scss';
+.hidden {
+  display: none;
+}
+.icon {
+  width: $icon-width;
+  height: $icon-height;
+  fill: $icon-color;
+  transition: $icon-transition;
+}
+
+.icon:hover {
+  fill: $icon-hover-color;
+}
+</style>

package/src/components/Icons/Pagination/ArrowRight.vue

@@ -0,0 +1,52 @@
+<template>
+  <svg
+    class="icon"
+    :class="iconClass"
+    :style="{
+      margin: margin,
+      width: size,
+      height: size,
+      fill: hoverColor ? (hovering ? hoverColor : color) : hovering ? color : color,
+    }"
+    @mouseenter="hovering = true"
+    @mouseleave="hovering = false"
+  >
+    <use xlink:href="#arrow-right"></use>
+  </svg>
+
+  <svg width="0" height="0" class="hidden">
+    <symbol id="arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+      <path
+        d="M366.436 875.054C363.723 877.84 360.479 880.055 356.895 881.568C353.312 883.08 349.462 883.859 345.572 883.859C341.683 883.859 337.832 883.08 334.249 881.568C330.666 880.055 327.421 877.84 324.708 875.054C319.145 869.342 316.031 861.683 316.031 853.71C316.031 845.736 319.145 838.077 324.708 832.366L636.58 512.494L324.708 192.558C321.9 189.684 319.686 186.284 318.193 182.555C316.699 178.825 315.954 174.837 316.002 170.82C316.049 166.802 316.888 162.833 318.47 159.14C320.051 155.446 322.345 152.1 325.22 149.294C327.958 146.618 331.197 144.508 334.752 143.086C338.306 141.663 342.106 140.955 345.934 141.003C349.762 141.05 353.544 141.852 357.062 143.363C360.58 144.873 363.765 147.063 366.436 149.806L698.084 490.158C703.909 496.134 707.169 504.148 707.169 512.494C707.169 520.839 703.909 528.854 698.084 534.83L366.436 875.054Z"
+      ></path>
+    </symbol>
+  </svg>
+</template>
+
+<script lang="ts" setup>
+const hovering = ref(false);
+defineProps({
+  color: { type: String as PropType<string>, default: '' },
+  hoverColor: { type: String as PropType<string>, default: '' },
+  size: { type: String as PropType<string>, default: '' },
+  margin: { type: String as PropType<string>, default: '0' },
+  iconClass: { type: String as PropType<string>, required: false, default: '' },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@/services/assets/styles/index.scss';
+.hidden {
+  display: none;
+}
+.icon {
+  width: $icon-width;
+  height: $icon-height;
+  fill: $icon-color;
+  transition: $icon-transition;
+}
+
+.icon:hover {
+  fill: $icon-hover-color;
+}
+</style>

package/src/components/Icons/Pagination/DoubleArrowLeft.vue

@@ -0,0 +1,52 @@
+<template>
+  <svg
+    class="icon"
+    :class="iconClass"
+    :style="{
+      margin: margin,
+      width: size,
+      height: size,
+      fill: hoverColor ? (hovering ? hoverColor : color) : hovering ? color : color,
+    }"
+    @mouseenter="hovering = true"
+    @mouseleave="hovering = false"
+  >
+    <use xlink:href="#double-arrow-left"></use>
+  </svg>
+
+  <svg width="0" height="0" class="hidden">
+    <symbol id="double-arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+      <path
+        d="M529.408 149.376C532.121 146.589 535.365 144.374 538.949 142.862C542.532 141.35 546.382 140.57 550.272 140.57C554.161 140.57 558.011 141.35 561.595 142.862C565.178 144.374 568.422 146.589 571.136 149.376C576.699 155.088 579.813 162.746 579.813 170.72C579.813 178.694 576.699 186.352 571.136 192.064L259.264 511.936L571.136 831.872C573.943 834.746 576.157 838.145 577.651 841.875C579.145 845.605 579.889 849.593 579.842 853.61C579.794 857.628 578.956 861.597 577.374 865.29C575.792 868.984 573.499 872.329 570.624 875.136C567.886 877.812 564.647 879.922 561.092 881.344C557.538 882.767 553.738 883.475 549.91 883.427C546.081 883.38 542.3 882.578 538.782 881.067C535.264 879.556 532.079 877.367 529.408 874.624L197.76 534.272C191.935 528.296 188.675 520.281 188.675 511.936C188.675 503.591 191.935 495.576 197.76 489.6L529.408 149.376ZM785.408 149.376C788.121 146.589 791.365 144.374 794.949 142.862C798.532 141.35 802.382 140.57 806.272 140.57C810.161 140.57 814.011 141.35 817.595 142.862C821.178 144.374 824.422 146.589 827.136 149.376C832.699 155.088 835.813 162.746 835.813 170.72C835.813 178.694 832.699 186.352 827.136 192.064L515.264 511.936L827.136 831.872C829.943 834.746 832.157 838.145 833.651 841.875C835.145 845.605 835.889 849.593 835.842 853.61C835.794 857.628 834.956 861.597 833.374 865.29C831.792 868.984 829.499 872.329 826.624 875.136C823.886 877.812 820.647 879.922 817.092 881.344C813.538 882.767 809.738 883.475 805.91 883.427C802.081 883.38 798.3 882.578 794.782 881.067C791.264 879.556 788.079 877.367 785.408 874.624L453.76 534.272C447.935 528.296 444.675 520.281 444.675 511.936C444.675 503.591 447.935 495.576 453.76 489.6L785.408 149.376Z"
+      ></path>
+    </symbol>
+  </svg>
+</template>
+
+<script lang="ts" setup>
+const hovering = ref(false);
+defineProps({
+  color: { type: String as PropType<string>, default: '' },
+  hoverColor: { type: String as PropType<string>, default: '' },
+  size: { type: String as PropType<string>, default: '' },
+  margin: { type: String as PropType<string>, default: '0' },
+  iconClass: { type: String as PropType<string>, required: false, default: '' },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@/services/assets/styles/index.scss';
+.hidden {
+  display: none;
+}
+.icon {
+  width: $icon-width;
+  height: $icon-height;
+  fill: $icon-color;
+  transition: $icon-transition;
+}
+
+.icon:hover {
+  fill: $icon-hover-color;
+}
+</style>

package/src/components/Icons/Pagination/DoubleArrowRight.vue

@@ -0,0 +1,52 @@
+<template>
+  <svg
+    class="icon"
+    :class="iconClass"
+    :style="{
+      margin: margin,
+      width: size,
+      height: size,
+      fill: hoverColor ? (hovering ? hoverColor : color) : hovering ? color : color,
+    }"
+    @mouseenter="hovering = true"
+    @mouseleave="hovering = false"
+  >
+    <use xlink:href="#double-arrow-right"></use>
+  </svg>
+
+  <svg width="0" height="0" class="hidden">
+    <symbol id="double-arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+      <path
+        d="M495.111 874.624C492.397 877.411 489.153 879.626 485.57 881.138C481.987 882.65 478.136 883.43 474.247 883.43C470.357 883.43 466.507 882.65 462.924 881.138C459.34 879.626 456.096 877.411 453.383 874.624C447.819 868.912 444.706 861.254 444.706 853.28C444.706 845.306 447.819 837.648 453.383 831.936L765.255 512.064L453.383 192.128C450.575 189.254 448.361 185.855 446.867 182.125C445.374 178.395 444.629 174.407 444.677 170.39C444.724 166.372 445.563 162.403 447.145 158.71C448.726 155.016 451.02 151.671 453.895 148.864C456.633 146.188 459.872 144.078 463.426 142.656C466.981 141.233 470.781 140.525 474.609 140.573C478.437 140.62 482.219 141.422 485.737 142.933C489.254 144.444 492.44 146.633 495.111 149.376L826.759 489.728C832.584 495.704 835.844 503.719 835.844 512.064C835.844 520.409 832.584 528.424 826.759 534.4L495.111 874.624ZM239.111 874.624C236.397 877.411 233.153 879.626 229.57 881.138C225.987 882.65 222.136 883.43 218.247 883.43C214.357 883.43 210.507 882.65 206.924 881.138C203.34 879.626 200.096 877.411 197.383 874.624C191.819 868.912 188.706 861.254 188.706 853.28C188.706 845.306 191.819 837.648 197.383 831.936L509.255 512.064L197.383 192.128C194.575 189.254 192.361 185.855 190.867 182.125C189.374 178.395 188.629 174.407 188.677 170.39C188.724 166.372 189.563 162.403 191.145 158.71C192.726 155.016 195.02 151.671 197.895 148.864C200.633 146.188 203.872 144.078 207.426 142.656C210.981 141.233 214.781 140.525 218.609 140.573C222.437 140.62 226.219 141.422 229.737 142.933C233.254 144.444 236.44 146.633 239.111 149.376L570.759 489.728C576.584 495.704 579.844 503.719 579.844 512.064C579.844 520.409 576.584 528.424 570.759 534.4L239.111 874.624Z"
+      ></path>
+    </symbol>
+  </svg>
+</template>
+
+<script lang="ts" setup>
+const hovering = ref(false);
+defineProps({
+  color: { type: String as PropType<string>, default: '' },
+  hoverColor: { type: String as PropType<string>, default: '' },
+  size: { type: String as PropType<string>, default: '' },
+  margin: { type: String as PropType<string>, default: '0' },
+  iconClass: { type: String as PropType<string>, required: false, default: '' },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@/services/assets/styles/index.scss';
+.hidden {
+  display: none;
+}
+.icon {
+  width: $icon-width;
+  height: $icon-height;
+  fill: $icon-color;
+  transition: $icon-transition;
+}
+
+.icon:hover {
+  fill: $icon-hover-color;
+}
+</style>

package/src/components/Icons/Pagination/EllipsisSvg.vue

@@ -0,0 +1,58 @@
+<template>
+  <svg
+    class="icon"
+    :class="iconClass"
+    :style="{
+      margin: margin,
+      width: size,
+      height: size,
+      fill: hoverColor ? (hovering ? hoverColor : color) : hovering ? color : color,
+    }"
+    @mouseenter="hovering = true"
+    @mouseleave="hovering = false"
+  >
+    <use xlink:href="#ellipsis"></use>
+  </svg>
+
+  <svg width="0" height="0" class="hidden">
+    <symbol id="ellipsis" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
+      <path
+        d="M65 135C73.2843 135 80 128.284 80 120C80 111.716 73.2843 105 65 105C56.7157 105 50 111.716 50 120C50 128.284 56.7157 135 65 135Z"
+      ></path>
+      <path
+        d="M120 135C128.284 135 135 128.284 135 120C135 111.716 128.284 105 120 105C111.716 105 105 111.716 105 120C105 128.284 111.716 135 120 135Z"
+      ></path>
+      <path
+        d="M175 135C183.284 135 190 128.284 190 120C190 111.716 183.284 105 175 105C166.716 105 160 111.716 160 120C160 128.284 166.716 135 175 135Z"
+      ></path>
+    </symbol>
+  </svg>
+</template>
+
+<script lang="ts" setup>
+const hovering = ref(false);
+defineProps({
+  color: { type: String as PropType<string>, default: '' },
+  hoverColor: { type: String as PropType<string>, default: '' },
+  size: { type: String as PropType<string>, default: '' },
+  margin: { type: String as PropType<string>, default: '0' },
+  iconClass: { type: String as PropType<string>, required: false, default: '' },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@/services/assets/styles/index.scss';
+.hidden {
+  display: none;
+}
+.icon {
+  width: $icon-width;
+  height: $icon-height;
+  fill: $icon-color;
+  transition: $icon-transition;
+}
+
+.icon:hover {
+  fill: $icon-hover-color;
+}
+</style>