feat: use untitledjs for icons instead icon components

Author: haxgun

frontend/bun.lock

@@ -19,6 +19,7 @@
         "radix-vue": "^1.9.14",
         "tailwind-merge": "^3.0.1",
         "tailwindcss-animate": "^1.0.7",
+        "untitledui-js": "^2.2.22",
         "v-wave": "^3.0.2",
         "vite-plugin-minify": "^2.1.0",
         "vue": "^3.5.13",
@@ -1036,6 +1037,8 @@
 
     "unplugin-utils": ["[email protected]", "", { "dependencies": { "pathe": "^2.0.2", "picomatch": "^4.0.2" } }, "sha512-8U/MtpkPkkk3Atewj1+RcKIjb5WBimZ/WSLhhR3w6SsIj8XJuKTacSP8g+2JhfSGw0Cb125Y+2zA/IzJZDVbhA=="],
 
+    "untitledui-js": ["[email protected]", "", { "peerDependencies": { "@builder.io/qwik": "^1.0.0", "motion": "^10.0.0 || ^11.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0", "solid-js": "^1.0.0", "vue": "^3.0.0" }, "optionalPeers": ["@builder.io/qwik", "motion", "react", "solid-js", "vue"] }, "sha512-6oJ417v6qsa3JiEJB5vIujVNo/psre9pteCR6TLgamAA74z6BBpRuKYW3K04y8L03+TxGC9W4OfAKiMUPCZVKA=="],
+
     "untyped": ["[email protected]", "", { "dependencies": { "@babel/core": "^7.26.0", "@babel/standalone": "^7.26.4", "@babel/types": "^7.26.3", "citty": "^0.1.6", "defu": "^6.1.4", "jiti": "^2.4.1", "knitwork": "^1.2.0", "scule": "^1.3.0" }, "bin": { "untyped": "dist/cli.mjs" } }, "sha512-eL/8PlhLcMmlMDtNPKhyyz9kEBDS3Uk4yMu/ewlkT2WFbtzScjHWPJLdQLmaGPUKjXzwe9MumOtOgc4Fro96Kg=="],
 
     "update-browserslist-db": ["[email protected]", "", { "dependencies": { "escalade": "^3.2.0", "picocolors": "^1.1.1" }, "peerDependencies": { "browserslist": ">= 4.21.0" }, "bin": { "update-browserslist-db": "cli.js" } }, "sha512-PPypAm5qvlD7XMZC3BujecnaOxwhrtoFR+Dqkk5Aa/6DssiH0ibKoketaj9w8LP7Bont1rYeoV5plxD7RTEPRg=="],

frontend/package.json

@@ -28,6 +28,7 @@
     "radix-vue": "^1.9.14",
     "tailwind-merge": "^3.0.1",
     "tailwindcss-animate": "^1.0.7",
+    "untitledui-js": "^2.2.22",
     "v-wave": "^3.0.2",
     "vite-plugin-minify": "^2.1.0",
     "vue": "^3.5.13",

frontend/src/components/HomePage/Main.vue

@@ -2,10 +2,10 @@
 import useConfetti from '@/composables/useConfetti'
 import Sparkles from '@/components/ui/Sparkles.vue'
 import Discord from '@/components/icons/Socials/Discord.vue'
-import Start from '@/components/icons/Start.vue'
-import Stars from '@/components/icons/Stars.vue'
 import { Button } from '@/components/ui/button'
 import { hidden } from '@/utils'
+import { Play } from "untitledui-js/vue";
+import { Stars02 } from "untitledui-js/vue";
 
 function randomInRange(min: number, max: number) {
   return Math.random() * (max - min) + min
@@ -71,11 +71,11 @@ const triggerConfetti = () => {
       <span class="flex w-full flex-col gap-3 lg:flex-row">
         <Button :class="[hidden ? 'h-12 text-lg' : 'text-sm']">
           {{ $t('main.buttons.first') }}
-          <Start :size="16" color="#000" />
+          <Play :size="16" />
         </Button>
         <Button variant="ghost" :class="[hidden ? 'h-12 text-lg' : 'text-sm']">
           {{ $t('main.buttons.second') }}
-          <Stars :size="16" />
+          <Stars02 :size="16" />
         </Button>
       </span>
     </div>

frontend/src/components/HomePage/OpenSource.vue

@@ -3,9 +3,9 @@ import { useFetch } from '@vueuse/core'
 import { openLink } from '@/utils'
 import { computed, ref } from 'vue'
 import { Button } from '@/components/ui/button'
-import Branch from '@/components/icons/Branch.vue'
+import { Star01, GitBranch01 } from 'untitledui-js/vue'
+
 import Github from '@/components/icons/Socials/Github.vue'
-import Star from '@/components/icons/Star.vue'
 const repoUrl = ref('https://api.github.com/repos/ValoryApp/Valory')
 const contributorsUrl = ref('https://api.github.com/repos/ValoryApp/Valory/contributors')
 
@@ -34,14 +34,14 @@ const contributorsCount = computed(() => contributorsData.value?.length ?? 0)
         @click="openLink('https://github.com/ValoryApp/Valory/forks')"
         class="gap-1 border border-white/10 bg-[#19191A] px-3 text-[#F2F2F2]"
       >
-        <Branch :size="22" />
+        <GitBranch01 :size="22" />
         {{ forksCount }}
       </Button>
       <Button
         @click="openLink('https://github.com/ValoryApp/Valory/stargazers')"
         class="gap-1 border border-white/10 bg-[#19191A] px-3 text-[#F2F2F2]"
       >
-        <Star color="#E3B341" :size="22" />
+        <Star01 color="#E3B341" :size="22" />
         {{ starsCount }}
       </Button>
     </div>