From f8aa37248750ad83a74f16af4621e3c43431eb07 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 26 Oct 2023 16:24:46 +0700
Subject: [PATCH] change method to use svg icon

---
 src/components/icons/IconBox.vue            |  8 ++++++++
 src/components/icons/IconDotOutline.vue     | 10 ++++++++++
 src/components/icons/IconFileSearch.vue     |  7 +++++++
 src/components/icons/IconGauge.vue          | 10 ++++++++++
 src/components/icons/IconLightningSlash.vue |  7 +++++++
 src/components/icons/IconMonitor.vue        | 10 ++++++++++
 src/components/icons/IconPlugs.vue          | 10 ++++++++++
 src/components/icons/IconSmileySad.vue      | 10 ++++++++++
 src/components/icons/IconSwap.vue           | 10 ++++++++++
 src/components/icons/IconWallet.vue         |  8 ++++++++
 src/utils/icons.ts                          | 19 +++++++++++--------
 11 files changed, 101 insertions(+), 8 deletions(-)
 create mode 100644 src/components/icons/IconBox.vue
 create mode 100644 src/components/icons/IconDotOutline.vue
 create mode 100644 src/components/icons/IconFileSearch.vue
 create mode 100644 src/components/icons/IconGauge.vue
 create mode 100644 src/components/icons/IconLightningSlash.vue
 create mode 100644 src/components/icons/IconMonitor.vue
 create mode 100644 src/components/icons/IconPlugs.vue
 create mode 100644 src/components/icons/IconSmileySad.vue
 create mode 100644 src/components/icons/IconSwap.vue
 create mode 100644 src/components/icons/IconWallet.vue

diff --git a/src/components/icons/IconBox.vue b/src/components/icons/IconBox.vue
new file mode 100644
index 0000000..df77d9e
--- /dev/null
+++ b/src/components/icons/IconBox.vue
@@ -0,0 +1,8 @@
+<template>
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+        <path opacity="0.2"
+            d="M12 12.1022V21.75C11.874 21.7494 11.7502 21.7172 11.64 21.6562L3.39 17.1393C3.2722 17.0749 3.17386 16.98 3.10526 16.8646C3.03666 16.7491 3.0003 16.6174 3 16.4831V7.51685C3.0003 7.41181 3.02266 7.308 3.06563 7.21216L12 12.1022Z" />
+        <path
+            d="M20.97 6.20158L12.72 1.68752C12.4996 1.56572 12.2518 1.50183 12 1.50183C11.7482 1.50183 11.5004 1.56572 11.28 1.68752L3.03 6.20345C2.7944 6.33237 2.59772 6.52217 2.46052 6.75304C2.32331 6.98391 2.25061 7.24739 2.25 7.51595V16.4822C2.25061 16.7508 2.32331 17.0142 2.46052 17.2451C2.59772 17.476 2.7944 17.6658 3.03 17.7947L11.28 22.3106C11.5004 22.4324 11.7482 22.4963 12 22.4963C12.2518 22.4963 12.4996 22.4324 12.72 22.3106L20.97 17.7947C21.2056 17.6658 21.4023 17.476 21.5395 17.2451C21.6767 17.0142 21.7494 16.7508 21.75 16.4822V7.51689C21.7499 7.24785 21.6774 6.98379 21.5402 6.75238C21.403 6.52096 21.206 6.33072 20.97 6.20158ZM12 3.00002L19.5319 7.12502L16.7409 8.65314L9.20813 4.52814L12 3.00002ZM12 11.25L4.46812 7.12502L7.64625 5.38502L15.1781 9.51002L12 11.25ZM3.75 8.43752L11.25 12.5419V20.5847L3.75 16.4831V8.43752ZM20.25 16.4794L12.75 20.5847V12.5456L15.75 10.9041V14.25C15.75 14.4489 15.829 14.6397 15.9697 14.7803C16.1103 14.921 16.3011 15 16.5 15C16.6989 15 16.8897 14.921 17.0303 14.7803C17.171 14.6397 17.25 14.4489 17.25 14.25V10.0828L20.25 8.43752V16.4785V16.4794Z" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/src/components/icons/IconDotOutline.vue b/src/components/icons/IconDotOutline.vue
new file mode 100644
index 0000000..6b1f216
--- /dev/null
+++ b/src/components/icons/IconDotOutline.vue
@@ -0,0 +1,10 @@
+<template>
+    <svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+        <g id="DotOutline">
+            <path id="Vector" opacity="0.2"
+                d="M9.5 8C9.5 8.29667 9.41203 8.58668 9.24721 8.83336C9.08238 9.08003 8.84812 9.27229 8.57403 9.38582C8.29994 9.49935 7.99834 9.52906 7.70737 9.47118C7.41639 9.4133 7.14912 9.27044 6.93934 9.06066C6.72956 8.85088 6.5867 8.58361 6.52882 8.29264C6.47094 8.00166 6.50065 7.70006 6.61418 7.42597C6.72771 7.15189 6.91997 6.91762 7.16665 6.7528C7.41332 6.58797 7.70333 6.5 8 6.5C8.39783 6.5 8.77936 6.65804 9.06066 6.93934C9.34197 7.22064 9.5 7.60218 9.5 8Z" />
+            <path id="Vector_2"
+                d="M8 6C7.60444 6 7.21776 6.1173 6.88886 6.33706C6.55996 6.55682 6.30362 6.86918 6.15224 7.23463C6.00087 7.60009 5.96126 8.00222 6.03843 8.39018C6.1156 8.77814 6.30608 9.13451 6.58579 9.41421C6.86549 9.69392 7.22186 9.8844 7.60982 9.96157C7.99778 10.0387 8.39992 9.99913 8.76537 9.84776C9.13082 9.69638 9.44318 9.44004 9.66294 9.11114C9.8827 8.78224 10 8.39556 10 8C10 7.46957 9.78929 6.96086 9.41421 6.58579C9.03914 6.21071 8.53043 6 8 6ZM8 9C7.80222 9 7.60888 8.94135 7.44443 8.83147C7.27998 8.72159 7.15181 8.56541 7.07612 8.38268C7.00043 8.19996 6.98063 7.99889 7.01922 7.80491C7.0578 7.61093 7.15304 7.43275 7.29289 7.29289C7.43275 7.15304 7.61093 7.0578 7.80491 7.01921C7.99889 6.98063 8.19996 7.00043 8.38268 7.07612C8.56541 7.15181 8.72159 7.27998 8.83147 7.44443C8.94135 7.60888 9 7.80222 9 8C9 8.26522 8.89464 8.51957 8.70711 8.70711C8.51957 8.89464 8.26522 9 8 9Z" />
+        </g>
+    </svg>
+</template>
\ No newline at end of file
diff --git a/src/components/icons/IconFileSearch.vue b/src/components/icons/IconFileSearch.vue
new file mode 100644
index 0000000..d42b897
--- /dev/null
+++ b/src/components/icons/IconFileSearch.vue
@@ -0,0 +1,7 @@
+<template>
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+        <path opacity="0.2" d="M19.5 8.25H14.25V3L19.5 8.25Z" />
+        <path
+            d="M20.0306 7.71938L14.7806 2.46938C14.7109 2.39975 14.6282 2.34454 14.5371 2.3069C14.4461 2.26926 14.3485 2.24992 14.25 2.25H5.25C4.85218 2.25 4.47064 2.40804 4.18934 2.68934C3.90804 2.97064 3.75 3.35218 3.75 3.75V20.25C3.75 20.6478 3.90804 21.0294 4.18934 21.3107C4.47064 21.592 4.85218 21.75 5.25 21.75H18.75C19.1478 21.75 19.5294 21.592 19.8107 21.3107C20.092 21.0294 20.25 20.6478 20.25 20.25V8.25C20.2501 8.15148 20.2307 8.05391 20.1931 7.96286C20.1555 7.87182 20.1003 7.78908 20.0306 7.71938ZM15 4.81031L17.6897 7.5H15V4.81031ZM18.75 20.25H5.25V3.75H13.5V8.25C13.5 8.44891 13.579 8.63968 13.7197 8.78033C13.8603 8.92098 14.0511 9 14.25 9H18.75V20.25ZM14.4806 15.6703C14.9233 14.967 15.0912 14.1252 14.9524 13.3058C14.8137 12.4865 14.3779 11.747 13.7283 11.2286C13.0788 10.7102 12.261 10.4494 11.4313 10.4958C10.6016 10.5423 9.81804 10.8928 9.23042 11.4804C8.64279 12.068 8.29226 12.8516 8.24581 13.6813C8.19936 14.511 8.46024 15.3288 8.9786 15.9783C9.49697 16.6279 10.2365 17.0637 11.0558 17.2024C11.8752 17.3412 12.717 17.1733 13.4203 16.7306L14.4694 17.7806C14.5391 17.8503 14.6218 17.9056 14.7128 17.9433C14.8039 17.981 14.9015 18.0004 15 18.0004C15.0985 18.0004 15.1961 17.981 15.2872 17.9433C15.3782 17.9056 15.4609 17.8503 15.5306 17.7806C15.6003 17.7109 15.6556 17.6282 15.6933 17.5372C15.731 17.4461 15.7504 17.3485 15.7504 17.25C15.7504 17.1515 15.731 17.0539 15.6933 16.9628C15.6556 16.8718 15.6003 16.7891 15.5306 16.7194L14.4806 15.6703ZM9.75 13.875C9.75 13.5042 9.85997 13.1416 10.066 12.8333C10.272 12.525 10.5649 12.2846 10.9075 12.1427C11.2501 12.0008 11.6271 11.9637 11.9908 12.036C12.3545 12.1084 12.6886 12.287 12.9508 12.5492C13.213 12.8114 13.3916 13.1455 13.464 13.5092C13.5363 13.8729 13.4992 14.2499 13.3573 14.5925C13.2154 14.9351 12.975 15.228 12.6667 15.434C12.3584 15.64 11.9958 15.75 11.625 15.75C11.1277 15.75 10.6508 15.5525 10.2992 15.2008C9.94754 14.8492 9.75 14.3723 9.75 13.875Z" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/src/components/icons/IconGauge.vue b/src/components/icons/IconGauge.vue
new file mode 100644
index 0000000..48b4627
--- /dev/null
+++ b/src/components/icons/IconGauge.vue
@@ -0,0 +1,10 @@
+<template>
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+        <g id="Gauge">
+            <path id="Vector" opacity="0.2"
+                d="M21.75 15V17.25C21.75 17.4489 21.671 17.6397 21.5303 17.7803C21.3897 17.921 21.1989 18 21 18H3C2.80109 18 2.61032 17.921 2.46967 17.7803C2.32902 17.6397 2.25 17.4489 2.25 17.25V15.1059C2.25 9.71719 6.57656 5.26875 11.9653 5.25C13.2486 5.24544 14.5202 5.49426 15.7071 5.9822C16.8941 6.47013 17.973 7.18759 18.882 8.09342C19.7911 8.99924 20.5124 10.0756 21.0045 11.2608C21.4967 12.446 21.75 13.7167 21.75 15Z" />
+            <path id="Vector_2"
+                d="M19.4119 7.56282C18.4397 6.58843 17.2842 5.81613 16.0121 5.29046C14.74 4.76478 13.3764 4.49614 12 4.5H11.9625C6.19406 4.51969 1.5 9.28125 1.5 15.1059V17.25C1.5 17.6478 1.65804 18.0294 1.93934 18.3107C2.22064 18.592 2.60218 18.75 3 18.75H21C21.3978 18.75 21.7794 18.592 22.0607 18.3107C22.342 18.0294 22.5 17.6478 22.5 17.25V15C22.5039 13.6175 22.2328 12.2481 21.7027 10.9713C21.1725 9.69457 20.3938 8.53594 19.4119 7.56282ZM21 17.25H11.2228L16.3566 10.1906C16.4737 10.0298 16.5221 9.82895 16.4911 9.63239C16.4602 9.43583 16.3524 9.25961 16.1916 9.1425C16.0307 9.02539 15.8299 8.97699 15.6333 9.00793C15.4368 9.03887 15.2605 9.14663 15.1434 9.3075L9.3675 17.25H3V15.1059C3 14.8172 3.01406 14.5322 3.04031 14.25H5.25C5.44891 14.25 5.63968 14.171 5.78033 14.0303C5.92098 13.8897 6 13.6989 6 13.5C6 13.3011 5.92098 13.1103 5.78033 12.9697C5.63968 12.829 5.44891 12.75 5.25 12.75H3.30656C4.27406 9.10688 7.43156 6.3525 11.25 6.03188V8.25C11.25 8.44892 11.329 8.63968 11.4697 8.78033C11.6103 8.92099 11.8011 9 12 9C12.1989 9 12.3897 8.92099 12.5303 8.78033C12.671 8.63968 12.75 8.44892 12.75 8.25V6.03094C14.6106 6.18752 16.3767 6.9181 17.8042 8.12172C19.2316 9.32534 20.2501 10.9426 20.7188 12.75H18.75C18.5511 12.75 18.3603 12.829 18.2197 12.9697C18.079 13.1103 18 13.3011 18 13.5C18 13.6989 18.079 13.8897 18.2197 14.0303C18.3603 14.171 18.5511 14.25 18.75 14.25H20.9691C20.9888 14.4984 21 14.7478 21 15V17.25Z" />
+        </g>
+    </svg>
+</template>
\ No newline at end of file
diff --git a/src/components/icons/IconLightningSlash.vue b/src/components/icons/IconLightningSlash.vue
new file mode 100644
index 0000000..2930beb
--- /dev/null
+++ b/src/components/icons/IconLightningSlash.vue
@@ -0,0 +1,7 @@
+<template>
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+        <path opacity="0.2" d="M9 22.5L10.5 15L4.5 12.75L15 1.5L13.5 9L19.5 11.25L9 22.5Z" />
+        <path
+            d="M5.05519 3.24562C4.98932 3.17137 4.90938 3.11094 4.81999 3.06782C4.7306 3.0247 4.63354 2.99975 4.53443 2.99442C4.43533 2.98909 4.33615 3.00348 4.24265 3.03676C4.14915 3.07004 4.06318 3.12155 3.98973 3.1883C3.91628 3.25505 3.85681 3.33571 3.81477 3.42561C3.77272 3.51552 3.74894 3.61287 3.74479 3.71203C3.74065 3.81119 3.75623 3.91019 3.79063 4.00329C3.82503 4.09638 3.87756 4.18172 3.94519 4.25437L7.62488 8.30249L3.95175 12.24C3.86647 12.3299 3.80478 12.4394 3.77219 12.559C3.73959 12.6785 3.73711 12.8042 3.76497 12.9249C3.79283 13.0456 3.85015 13.1576 3.93182 13.2507C4.01349 13.3439 4.11697 13.4153 4.233 13.4587L9.63581 15.4847L8.26519 22.3528C8.23407 22.5125 8.25574 22.6781 8.32694 22.8244C8.39815 22.9707 8.51501 23.0899 8.6599 23.164C8.80479 23.2381 8.96985 23.263 9.13016 23.2351C9.29048 23.2071 9.43736 23.1278 9.54863 23.0091L15.348 16.7953L18.9452 20.7516C19.0111 20.8258 19.091 20.8862 19.1804 20.9294C19.2698 20.9725 19.3668 20.9974 19.4659 21.0028C19.5651 21.0081 19.6642 20.9937 19.7577 20.9604C19.8512 20.9271 19.9372 20.8756 20.0106 20.8089C20.0841 20.7421 20.1436 20.6615 20.1856 20.5716C20.2277 20.4817 20.2514 20.3843 20.2556 20.2851C20.2597 20.186 20.2441 20.087 20.2097 19.9939C20.1753 19.9008 20.1228 19.8154 20.0552 19.7428L5.05519 3.24562ZM10.2536 20.0625L11.2352 15.1519C11.2703 14.9777 11.2425 14.7967 11.1566 14.6412C11.0708 14.4856 10.9325 14.3656 10.7664 14.3025L5.81269 12.4416L8.63644 9.41624L14.3346 15.6844L10.2536 20.0625ZM10.1871 6.65624C10.115 6.58904 10.0569 6.50829 10.0161 6.41863C9.97526 6.32896 9.9525 6.23213 9.9491 6.13366C9.94571 6.0352 9.96175 5.93702 9.9963 5.84476C10.0309 5.75249 10.0833 5.66794 10.1505 5.59593L14.4518 0.987181C14.563 0.868433 14.7099 0.789097 14.8702 0.761147C15.0305 0.733196 15.1956 0.758146 15.3405 0.832232C15.4854 0.906318 15.6022 1.02552 15.6734 1.17185C15.7446 1.31818 15.7663 1.4837 15.7352 1.64343L14.3608 8.52187L19.7636 10.5478C19.8788 10.5915 19.9814 10.6629 20.0625 10.7557C20.1435 10.8485 20.2005 10.9598 20.2283 11.0798C20.2561 11.1998 20.2539 11.3248 20.2219 11.4438C20.1899 11.5627 20.1291 11.672 20.0449 11.7619L17.9543 14.0016C17.8176 14.1429 17.631 14.225 17.4344 14.2301C17.2379 14.2352 17.0473 14.1629 16.9035 14.0289C16.7597 13.8948 16.6743 13.7096 16.6657 13.5132C16.6571 13.3168 16.7259 13.1249 16.8574 12.9787L18.1877 11.5584L13.2377 9.70218C13.0716 9.63906 12.9333 9.51904 12.8475 9.36349C12.7616 9.20794 12.7338 9.02696 12.7689 8.85281L13.7505 3.94218L11.2502 6.62062C11.1829 6.69302 11.1019 6.75139 11.012 6.79239C10.922 6.83339 10.8248 6.8562 10.726 6.85951C10.6272 6.86282 10.5288 6.84657 10.4363 6.81168C10.3438 6.7768 10.2591 6.72397 10.1871 6.65624Z" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/src/components/icons/IconMonitor.vue b/src/components/icons/IconMonitor.vue
new file mode 100644
index 0000000..0edec15
--- /dev/null
+++ b/src/components/icons/IconMonitor.vue
@@ -0,0 +1,10 @@
+<template>
+    <svg fill="currentColor" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <g id="Monitor">
+            <path id="Vector" opacity="0.2"
+                d="M21 6V16.5C21 16.8978 20.842 17.2794 20.5607 17.5607C20.2794 17.842 19.8978 18 19.5 18H4.5C4.10218 18 3.72064 17.842 3.43934 17.5607C3.15804 17.2794 3 16.8978 3 16.5V6C3 5.60218 3.15804 5.22064 3.43934 4.93934C3.72064 4.65804 4.10218 4.5 4.5 4.5H19.5C19.8978 4.5 20.2794 4.65804 20.5607 4.93934C20.842 5.22064 21 5.60218 21 6Z" />
+            <path id="Vector_2"
+                d="M19.5 3.75H4.5C3.90326 3.75 3.33097 3.98705 2.90901 4.40901C2.48705 4.83097 2.25 5.40326 2.25 6V16.5C2.25 17.0967 2.48705 17.669 2.90901 18.091C3.33097 18.5129 3.90326 18.75 4.5 18.75H19.5C20.0967 18.75 20.669 18.5129 21.091 18.091C21.5129 17.669 21.75 17.0967 21.75 16.5V6C21.75 5.40326 21.5129 4.83097 21.091 4.40901C20.669 3.98705 20.0967 3.75 19.5 3.75ZM20.25 16.5C20.25 16.6989 20.171 16.8897 20.0303 17.0303C19.8897 17.171 19.6989 17.25 19.5 17.25H4.5C4.30109 17.25 4.11032 17.171 3.96967 17.0303C3.82902 16.8897 3.75 16.6989 3.75 16.5V6C3.75 5.80109 3.82902 5.61032 3.96967 5.46967C4.11032 5.32902 4.30109 5.25 4.5 5.25H19.5C19.6989 5.25 19.8897 5.32902 20.0303 5.46967C20.171 5.61032 20.25 5.80109 20.25 6V16.5ZM15.75 21C15.75 21.1989 15.671 21.3897 15.5303 21.5303C15.3897 21.671 15.1989 21.75 15 21.75H9C8.80109 21.75 8.61032 21.671 8.46967 21.5303C8.32902 21.3897 8.25 21.1989 8.25 21C8.25 20.8011 8.32902 20.6103 8.46967 20.4697C8.61032 20.329 8.80109 20.25 9 20.25H15C15.1989 20.25 15.3897 20.329 15.5303 20.4697C15.671 20.6103 15.75 20.8011 15.75 21Z" />
+        </g>
+    </svg>
+</template>
\ No newline at end of file
diff --git a/src/components/icons/IconPlugs.vue b/src/components/icons/IconPlugs.vue
new file mode 100644
index 0000000..b6b0c90
--- /dev/null
+++ b/src/components/icons/IconPlugs.vue
@@ -0,0 +1,10 @@
+<template>
+    <svg fill="currentColor" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <g id="Plugs">
+            <path id="Vector" opacity="0.2"
+                d="M7.12508 11.625L12.3751 16.875L9.65633 19.5937C9.23438 20.0157 8.66211 20.2527 8.06539 20.2527C7.46868 20.2527 6.89641 20.0157 6.47446 19.5937L4.40633 17.5228C3.98527 17.101 3.74878 16.5293 3.74878 15.9333C3.74878 15.3373 3.98527 14.7656 4.40633 14.3437L7.12508 11.625ZM19.5938 6.47718L17.5229 4.40625C17.1011 3.98518 16.5294 3.7487 15.9334 3.7487C15.3373 3.7487 14.7657 3.98518 14.3438 4.40625L11.6251 7.125L16.8751 12.375L19.5938 9.65625C20.0149 9.23441 20.2514 8.66274 20.2514 8.06672C20.2514 7.47069 20.0149 6.89902 19.5938 6.47718Z" />
+            <path id="Vector_2"
+                d="M14.0306 12.9694C13.9609 12.8996 13.8782 12.8443 13.7871 12.8066C13.6961 12.7688 13.5985 12.7494 13.4999 12.7494C13.4014 12.7494 13.3038 12.7688 13.2127 12.8066C13.1217 12.8443 13.039 12.8996 12.9693 12.9694L11.2499 14.6897L9.31024 12.75L11.0306 11.0306C11.1713 10.8899 11.2503 10.699 11.2503 10.5C11.2503 10.301 11.1713 10.1101 11.0306 9.96938C10.8898 9.82865 10.699 9.74959 10.4999 9.74959C10.3009 9.74959 10.11 9.82865 9.9693 9.96938L8.24993 11.6897L6.53055 9.96938C6.38982 9.82865 6.19895 9.74959 5.99993 9.74959C5.80091 9.74959 5.61003 9.82865 5.4693 9.96938C5.32857 10.1101 5.24951 10.301 5.24951 10.5C5.24951 10.699 5.32857 10.8899 5.4693 11.0306L6.06462 11.625L3.87837 13.8103C3.59972 14.0889 3.37868 14.4196 3.22787 14.7837C3.07706 15.1477 2.99944 15.5379 2.99944 15.9319C2.99944 16.3259 3.07706 16.7161 3.22787 17.0801C3.37868 17.4441 3.59972 17.7749 3.87837 18.0534L4.38274 18.5569L1.7193 21.2194C1.64962 21.2891 1.59435 21.3718 1.55663 21.4628C1.51892 21.5539 1.49951 21.6515 1.49951 21.75C1.49951 21.8485 1.51892 21.9461 1.55663 22.0372C1.59435 22.1282 1.64962 22.2109 1.7193 22.2806C1.86003 22.4214 2.05091 22.5004 2.24993 22.5004C2.34847 22.5004 2.44606 22.481 2.5371 22.4433C2.62815 22.4056 2.71087 22.3503 2.78055 22.2806L5.44305 19.6172L5.94649 20.1216C6.22508 20.4002 6.55582 20.6213 6.91984 20.7721C7.28387 20.9229 7.67403 21.0005 8.06805 21.0005C8.46208 21.0005 8.85224 20.9229 9.21626 20.7721C9.58028 20.6213 9.91103 20.4002 10.1896 20.1216L12.3749 17.9353L12.9693 18.5306C13.039 18.6003 13.1217 18.6556 13.2128 18.6933C13.3038 18.731 13.4014 18.7504 13.4999 18.7504C13.5985 18.7504 13.6961 18.731 13.7871 18.6933C13.8781 18.6556 13.9609 18.6003 14.0306 18.5306C14.1002 18.4609 14.1555 18.3782 14.1932 18.2872C14.2309 18.1961 14.2503 18.0985 14.2503 18C14.2503 17.9015 14.2309 17.8039 14.1932 17.7128C14.1555 17.6218 14.1002 17.5391 14.0306 17.4694L12.3102 15.75L14.0306 14.0306C14.1003 13.961 14.1556 13.8783 14.1933 13.7872C14.2311 13.6962 14.2505 13.5986 14.2505 13.5C14.2505 13.4014 14.2311 13.3038 14.1933 13.2128C14.1556 13.1217 14.1003 13.039 14.0306 12.9694ZM9.12837 19.0631C8.84709 19.3442 8.46571 19.5021 8.06805 19.5021C7.6704 19.5021 7.28902 19.3442 7.00774 19.0631L4.93962 16.9922C4.65852 16.7109 4.50062 16.3295 4.50062 15.9319C4.50062 15.5342 4.65852 15.1528 4.93962 14.8716L7.12493 12.6853L11.3146 16.875L9.12837 19.0631ZM22.2806 1.71938C22.2109 1.64965 22.1282 1.59433 22.0371 1.55658C21.9461 1.51884 21.8485 1.49941 21.7499 1.49941C21.6514 1.49941 21.5538 1.51884 21.4627 1.55658C21.3717 1.59433 21.289 1.64965 21.2193 1.71938L18.5568 4.38282L18.0534 3.87844C17.4901 3.31683 16.7272 3.00146 15.9318 3.00146C15.1364 3.00146 14.3735 3.31683 13.8102 3.87844L11.6249 6.06469L11.0306 5.46938C10.8898 5.32865 10.699 5.24959 10.4999 5.24959C10.3009 5.24959 10.11 5.32865 9.9693 5.46938C9.82857 5.61011 9.74951 5.80098 9.74951 6C9.74951 6.19903 9.82857 6.3899 9.9693 6.53063L17.4693 14.0306C17.539 14.1003 17.6217 14.1556 17.7128 14.1933C17.8038 14.231 17.9014 14.2504 17.9999 14.2504C18.0985 14.2504 18.1961 14.231 18.2871 14.1933C18.3781 14.1556 18.4609 14.1003 18.5306 14.0306C18.6002 13.9609 18.6555 13.8782 18.6932 13.7872C18.7309 13.6961 18.7503 13.5985 18.7503 13.5C18.7503 13.4015 18.7309 13.3039 18.6932 13.2128C18.6555 13.1218 18.6002 13.0391 18.5306 12.9694L17.9352 12.375L20.1215 10.1897C20.4001 9.91111 20.6212 9.58036 20.772 9.21634C20.9228 8.85231 21.0004 8.46215 21.0004 8.06813C21.0004 7.6741 20.9228 7.28394 20.772 6.91992C20.6212 6.5559 20.4001 6.22515 20.1215 5.94657L19.6171 5.44313L22.2806 2.78063C22.3503 2.71097 22.4056 2.62826 22.4433 2.53721C22.4811 2.44616 22.5005 2.34856 22.5005 2.25C22.5005 2.15144 22.4811 2.05385 22.4433 1.9628C22.4056 1.87175 22.3503 1.78903 22.2806 1.71938ZM19.0602 9.12563L16.8749 11.3147L12.6852 7.125L14.8715 4.93969C15.1528 4.6586 15.5342 4.5007 15.9318 4.5007C16.3295 4.5007 16.7108 4.6586 16.9921 4.93969L19.0602 7.00219C19.2003 7.14157 19.3114 7.30723 19.3872 7.48968C19.463 7.67212 19.5021 7.86774 19.5021 8.06532C19.5021 8.26289 19.463 8.45851 19.3872 8.64095C19.3114 8.8234 19.2003 8.98906 19.0602 9.12844V9.12563Z" />
+        </g>
+    </svg>
+</template>
\ No newline at end of file
diff --git a/src/components/icons/IconSmileySad.vue b/src/components/icons/IconSmileySad.vue
new file mode 100644
index 0000000..96abaa3
--- /dev/null
+++ b/src/components/icons/IconSmileySad.vue
@@ -0,0 +1,10 @@
+<template>
+    <svg fill="currentColor" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <g id="SmileySad">
+            <path id="Vector" opacity="0.2"
+                d="M21 12C21 13.78 20.4722 15.5201 19.4832 17.0001C18.4943 18.4802 17.0887 19.6337 15.4442 20.3149C13.7996 20.9961 11.99 21.1743 10.2442 20.8271C8.49836 20.4798 6.89472 19.6226 5.63604 18.364C4.37737 17.1053 3.5202 15.5016 3.17294 13.7558C2.82567 12.01 3.0039 10.2004 3.68509 8.55585C4.36628 6.91131 5.51983 5.50571 6.99987 4.51677C8.47991 3.52784 10.22 3 12 3C14.387 3 16.6761 3.94821 18.364 5.63604C20.0518 7.32387 21 9.61305 21 12Z" />
+            <path id="Vector_2"
+                d="M12 2.25C10.0716 2.25 8.18657 2.82183 6.58319 3.89317C4.97982 4.96451 3.73013 6.48726 2.99218 8.26884C2.25422 10.0504 2.06114 12.0108 2.43735 13.9021C2.81355 15.7934 3.74215 17.5307 5.10571 18.8943C6.46928 20.2579 8.20656 21.1865 10.0979 21.5627C11.9892 21.9389 13.9496 21.7458 15.7312 21.0078C17.5127 20.2699 19.0355 19.0202 20.1068 17.4168C21.1782 15.8134 21.75 13.9284 21.75 12C21.7473 9.41498 20.7192 6.93661 18.8913 5.10872C17.0634 3.28084 14.585 2.25273 12 2.25ZM12 20.25C10.3683 20.25 8.77326 19.7661 7.41655 18.8596C6.05984 17.9531 5.00242 16.6646 4.378 15.1571C3.75358 13.6496 3.5902 11.9908 3.90853 10.3905C4.22685 8.79016 5.01259 7.32015 6.16637 6.16637C7.32016 5.01259 8.79017 4.22685 10.3905 3.90852C11.9909 3.59019 13.6497 3.75357 15.1571 4.37799C16.6646 5.00242 17.9531 6.05984 18.8596 7.41655C19.7661 8.77325 20.25 10.3683 20.25 12C20.2475 14.1873 19.3775 16.2843 17.8309 17.8309C16.2843 19.3775 14.1873 20.2475 12 20.25ZM7.5 10.125C7.5 9.9025 7.56598 9.68499 7.6896 9.49998C7.81322 9.31498 7.98892 9.17078 8.19449 9.08564C8.40005 9.00049 8.62625 8.97821 8.84448 9.02162C9.06271 9.06502 9.26317 9.17217 9.4205 9.3295C9.57783 9.48684 9.68498 9.68729 9.72839 9.90552C9.7718 10.1238 9.74952 10.35 9.66437 10.5555C9.57922 10.7611 9.43503 10.9368 9.25002 11.0604C9.06502 11.184 8.84751 11.25 8.625 11.25C8.32664 11.25 8.04049 11.1315 7.82951 10.9205C7.61853 10.7095 7.5 10.4234 7.5 10.125ZM16.5 10.125C16.5 10.3475 16.434 10.565 16.3104 10.75C16.1868 10.935 16.0111 11.0792 15.8055 11.1644C15.6 11.2495 15.3738 11.2718 15.1555 11.2284C14.9373 11.185 14.7368 11.0778 14.5795 10.9205C14.4222 10.7632 14.315 10.5627 14.2716 10.3445C14.2282 10.1262 14.2505 9.90005 14.3356 9.69448C14.4208 9.48891 14.565 9.31321 14.75 9.1896C14.935 9.06598 15.1525 9 15.375 9C15.6734 9 15.9595 9.11853 16.1705 9.3295C16.3815 9.54048 16.5 9.82663 16.5 10.125ZM16.3988 16.125C16.453 16.2104 16.4895 16.3058 16.5059 16.4056C16.5223 16.5054 16.5183 16.6075 16.4943 16.7058C16.4702 16.804 16.4265 16.8964 16.3658 16.9773C16.3052 17.0583 16.2287 17.1261 16.1412 17.1767C16.0536 17.2273 15.9567 17.2597 15.8563 17.2719C15.7558 17.2841 15.654 17.2758 15.5569 17.2477C15.4597 17.2195 15.3693 17.1719 15.291 17.1079C15.2127 17.0438 15.1481 16.9646 15.1013 16.875C14.4009 15.6647 13.3003 15 12 15C10.6997 15 9.59907 15.6656 8.89875 16.875C8.85187 16.9646 8.78734 17.0438 8.70904 17.1079C8.63074 17.1719 8.5403 17.2195 8.44316 17.2477C8.34601 17.2758 8.24417 17.2841 8.14375 17.2719C8.04334 17.2597 7.94643 17.2273 7.85886 17.1767C7.77128 17.1261 7.69485 17.0583 7.63417 16.9773C7.57348 16.8964 7.52979 16.804 7.50573 16.7058C7.48166 16.6075 7.47772 16.5054 7.49413 16.4056C7.51055 16.3058 7.54699 16.2104 7.60125 16.125C8.56594 14.4572 10.1691 13.5 12 13.5C13.8309 13.5 15.4341 14.4563 16.3988 16.125Z" />
+        </g>
+    </svg>
+</template>
\ No newline at end of file
diff --git a/src/components/icons/IconSwap.vue b/src/components/icons/IconSwap.vue
new file mode 100644
index 0000000..f16a4a9
--- /dev/null
+++ b/src/components/icons/IconSwap.vue
@@ -0,0 +1,10 @@
+<template>
+    <svg fill="currentColor" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <g id="Swap">
+            <path id="Vector" opacity="0.2"
+                d="M20.25 4.5V14.25C20.25 14.4489 20.171 14.6397 20.0303 14.7803C19.8897 14.921 19.6989 15 19.5 15H15.75V19.5C15.75 19.6989 15.671 19.8897 15.5303 20.0303C15.3897 20.171 15.1989 20.25 15 20.25H4.5C4.30109 20.25 4.11032 20.171 3.96967 20.0303C3.82902 19.8897 3.75 19.6989 3.75 19.5V9.75C3.75 9.55109 3.82902 9.36032 3.96967 9.21967C4.11032 9.07902 4.30109 9 4.5 9H8.25V4.5C8.25 4.30109 8.32902 4.11032 8.46967 3.96967C8.61032 3.82902 8.80109 3.75 9 3.75H19.5C19.6989 3.75 19.8897 3.82902 20.0303 3.96967C20.171 4.11032 20.25 4.30109 20.25 4.5Z" />
+            <path id="Vector_2"
+                d="M21 4.5V14.25C21 14.6478 20.842 15.0294 20.5607 15.3107C20.2794 15.592 19.8978 15.75 19.5 15.75H9.31031L10.2806 16.7194C10.3503 16.7891 10.4056 16.8718 10.4433 16.9628C10.481 17.0539 10.5004 17.1515 10.5004 17.25C10.5004 17.3485 10.481 17.4461 10.4433 17.5372C10.4056 17.6282 10.3503 17.7109 10.2806 17.7806C10.2109 17.8503 10.1282 17.9056 10.0372 17.9433C9.94613 17.981 9.84855 18.0004 9.75 18.0004C9.65145 18.0004 9.55387 17.981 9.46283 17.9433C9.37178 17.9056 9.28906 17.8503 9.21937 17.7806L6.96937 15.5306C6.89964 15.461 6.84432 15.3783 6.80658 15.2872C6.76884 15.1962 6.74941 15.0986 6.74941 15C6.74941 14.9014 6.76884 14.8038 6.80658 14.7128C6.84432 14.6217 6.89964 14.539 6.96937 14.4694L9.21937 12.2194C9.36011 12.0786 9.55098 11.9996 9.75 11.9996C9.94902 11.9996 10.1399 12.0786 10.2806 12.2194C10.4214 12.3601 10.5004 12.551 10.5004 12.75C10.5004 12.949 10.4214 13.1399 10.2806 13.2806L9.31031 14.25H19.5V4.5H9V5.25C9 5.44891 8.92098 5.63968 8.78033 5.78033C8.63968 5.92098 8.44891 6 8.25 6C8.05109 6 7.86032 5.92098 7.71967 5.78033C7.57902 5.63968 7.5 5.44891 7.5 5.25V4.5C7.5 4.10218 7.65804 3.72064 7.93934 3.43934C8.22064 3.15804 8.60218 3 9 3H19.5C19.8978 3 20.2794 3.15804 20.5607 3.43934C20.842 3.72064 21 4.10218 21 4.5ZM15.75 18C15.5511 18 15.3603 18.079 15.2197 18.2197C15.079 18.3603 15 18.5511 15 18.75V19.5H4.5V9.75H14.6897L13.7194 10.7194C13.5786 10.8601 13.4996 11.051 13.4996 11.25C13.4996 11.449 13.5786 11.6399 13.7194 11.7806C13.8601 11.9214 14.051 12.0004 14.25 12.0004C14.449 12.0004 14.6399 11.9214 14.7806 11.7806L17.0306 9.53063C17.1004 9.46097 17.1557 9.37825 17.1934 9.28721C17.2312 9.19616 17.2506 9.09856 17.2506 9C17.2506 8.90144 17.2312 8.80384 17.1934 8.71279C17.1557 8.62175 17.1004 8.53903 17.0306 8.46937L14.7806 6.21937C14.6399 6.07864 14.449 5.99958 14.25 5.99958C14.051 5.99958 13.8601 6.07864 13.7194 6.21937C13.5786 6.36011 13.4996 6.55098 13.4996 6.75C13.4996 6.94902 13.5786 7.13989 13.7194 7.28063L14.6897 8.25H4.5C4.10218 8.25 3.72064 8.40804 3.43934 8.68934C3.15804 8.97064 3 9.35218 3 9.75V19.5C3 19.8978 3.15804 20.2794 3.43934 20.5607C3.72064 20.842 4.10218 21 4.5 21H15C15.3978 21 15.7794 20.842 16.0607 20.5607C16.342 20.2794 16.5 19.8978 16.5 19.5V18.75C16.5 18.5511 16.421 18.3603 16.2803 18.2197C16.1397 18.079 15.9489 18 15.75 18Z" />
+        </g>
+    </svg>
+</template>
\ No newline at end of file
diff --git a/src/components/icons/IconWallet.vue b/src/components/icons/IconWallet.vue
new file mode 100644
index 0000000..40798e7
--- /dev/null
+++ b/src/components/icons/IconWallet.vue
@@ -0,0 +1,8 @@
+<template>
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+        <path opacity="0.2"
+            d="M21 8.25V18.75C21 18.9489 20.921 19.1397 20.7803 19.2803C20.6397 19.421 20.4489 19.5 20.25 19.5H5.25C4.85218 19.5 4.47064 19.342 4.18934 19.0607C3.90804 18.7794 3.75 18.3978 3.75 18V6C3.75 6.39782 3.90804 6.77936 4.18934 7.06066C4.47064 7.34196 4.85218 7.5 5.25 7.5H20.25C20.4489 7.5 20.6397 7.57902 20.7803 7.71967C20.921 7.86032 21 8.05109 21 8.25Z" />
+        <path
+            d="M20.25 6.75H5.25C5.05109 6.75 4.86032 6.67098 4.71967 6.53033C4.57902 6.38968 4.5 6.19891 4.5 6C4.5 5.80109 4.57902 5.61032 4.71967 5.46967C4.86032 5.32902 5.05109 5.25 5.25 5.25H18C18.1989 5.25 18.3897 5.17098 18.5303 5.03033C18.671 4.88968 18.75 4.69891 18.75 4.5C18.75 4.30109 18.671 4.11032 18.5303 3.96967C18.3897 3.82902 18.1989 3.75 18 3.75H5.25C4.65326 3.75 4.08097 3.98705 3.65901 4.40901C3.23705 4.83097 3 5.40326 3 6V18C3 18.5967 3.23705 19.169 3.65901 19.591C4.08097 20.0129 4.65326 20.25 5.25 20.25H20.25C20.6478 20.25 21.0294 20.092 21.3107 19.8107C21.592 19.5294 21.75 19.1478 21.75 18.75V8.25C21.75 7.85218 21.592 7.47064 21.3107 7.18934C21.0294 6.90804 20.6478 6.75 20.25 6.75ZM20.25 18.75H5.25C5.05109 18.75 4.86032 18.671 4.71967 18.5303C4.57902 18.3897 4.5 18.1989 4.5 18V8.12156C4.74082 8.20693 4.9945 8.25037 5.25 8.25H20.25V18.75ZM15.75 13.125C15.75 12.9025 15.816 12.685 15.9396 12.5C16.0632 12.315 16.2389 12.1708 16.4445 12.0856C16.65 12.0005 16.8762 11.9782 17.0945 12.0216C17.3127 12.065 17.5132 12.1722 17.6705 12.3295C17.8278 12.4868 17.935 12.6873 17.9784 12.9055C18.0218 13.1238 17.9995 13.35 17.9144 13.5555C17.8292 13.7611 17.685 13.9368 17.5 14.0604C17.315 14.184 17.0975 14.25 16.875 14.25C16.5766 14.25 16.2905 14.1315 16.0795 13.9205C15.8685 13.7095 15.75 13.4234 15.75 13.125Z" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/src/utils/icons.ts b/src/utils/icons.ts
index e237815..7409a00 100644
--- a/src/utils/icons.ts
+++ b/src/utils/icons.ts
@@ -1,10 +1,13 @@
 // png
 export { default as IconApp } from '@/assets/images/pln-with-text.png'
-// svg
-export { default as LightningSlash } from '@/assets/icons/lightning-slash.svg'
-export { default as SmileySad } from '@/assets/icons/smiley-sad.svg'
-export { default as Monitor } from '@/assets/icons/monitor.svg'
-export { default as Swap } from '@/assets/icons/swap.svg'
-export { default as DotOutline } from '@/assets/icons/dot-outline.svg'
-export { default as Plugs } from '@/assets/icons/plugs.svg'
-export { default as Gauge } from '@/assets/icons/gauge.svg'
+// Svg with Vue component
+export { default as IconLightningSlash } from '@/components/icons/IconLightningSlash.vue'
+export { default as IconSmileySad } from '@/components/icons/IconSmileySad.vue'
+export { default as IconMonitor } from '@/components/icons/IconMonitor.vue'
+export { default as IconSwap } from '@/components/icons/IconSwap.vue'
+export { default as IconDotOutline } from '@/components/icons/IconDotOutline.vue'
+export { default as IconPlugs } from '@/components/icons/IconPlugs.vue'
+export { default as IconGauge } from '@/components/icons/IconGauge.vue'
+export { default as IconBox } from '@/components/icons/IconBox.vue'
+export { default as IconFileSearch } from '@/components/icons/IconFileSearch.vue'
+export { default as IconWallet } from '@/components/icons/IconWallet.vue'