chang icons of boursemes

Co-authored-by: Cursor <cursoragent@cursor.com>

src/layouts/mobile/MobileBottomNav.vue

@@ -7,7 +7,13 @@
         class="tab"
         @click="$emit('navigate', 'buyProduct')"
       >
-        <Icon icon="vuesax-linear:box" />
+        <div class="tab__icon">
+          <img
+            :src="boursecuBuySellIcon"
+            alt=""
+            class="tab__icon-image"
+          />
+        </div>
         <div class="text-xs mt-1 font-bold">سفارش ها</div>
       </div>
       <div
@@ -16,7 +22,9 @@
         class="tab"
         @click="$emit('navigate', 'home')"
       >
-        <Icon icon="vuesax-linear:home" />
+        <div class="tab__icon">
+          <Icon icon="vuesax-linear:home" size="24" />
+        </div>
         <div class="text-xs mt-1 font-bold">صفحه اصلی</div>
       </div>
 
@@ -25,7 +33,15 @@
         class="tab"
         @click="$emit('navigate', 'transactions')"
       >
-        <Icon icon="vuesax-linear:receipt-item" />
+        <div class="tab__icon">
+          <img
+            v-if="isBoursecu"
+            :src="boursecuTransactionsIcon"
+            alt=""
+            class="tab__icon-image"
+          />
+          <Icon v-else icon="vuesax-linear:receipt-item" size="24" />
+        </div>
         <div class="text-xs mt-1 font-bold">{{ isBoursecu ? 'تراکنش ها' : 'گزارش' }}</div>
       </div>
 
@@ -35,7 +51,9 @@
         class="tab"
         @click="$emit('navigate', 'home')"
       >
-        <Icon icon="vuesax-linear:home" />
+        <div class="tab__icon">
+          <Icon icon="vuesax-linear:home" size="24" />
+        </div>
         <div class="text-xs mt-1 font-bold">صفحه اصلی</div>
       </div>
       <div v-else class="main_in" @click="$emit('navigate', 'buyProduct')">
@@ -66,7 +84,15 @@
         class="tab"
         @click="$emit('navigate', 'wallet')"
       >
-        <Icon icon="vuesax-linear:wallet-1" />
+        <div class="tab__icon">
+          <img
+            v-if="isBoursecu"
+            :src="boursecuWalletIcon"
+            alt=""
+            class="tab__icon-image"
+          />
+          <Icon v-else icon="vuesax-linear:wallet-1" size="24" />
+        </div>
         <div class="text-xs mt-1 font-bold">کیف پول</div>
       </div>
       <div
@@ -74,7 +100,9 @@
         class="tab"
         @click="$emit('navigate', 'user')"
       >
-        <Icon icon="vuesax-linear:setting-2" />
+        <div class="tab__icon">
+          <Icon icon="vuesax-linear:setting-2" size="24" />
+        </div>
         <div class="text-xs mt-1 font-bold">تنظیمات</div>
       </div>
     </div>
@@ -88,7 +116,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import Icon from '@/components/BasicPacks/BasicIcon.vue'
-import { getConfigApp } from '@/utils/config'
+import { getBoursecuActionIconSrc, getConfigApp } from '@/utils/config'
 
 defineProps<{
   isBoursecu: boolean
@@ -102,6 +130,28 @@ defineEmits<{
 }>()
 
 const projectName = getConfigApp('name')
+const boursecuBuySellIcon = getBoursecuActionIconSrc('buySell') ?? ''
+const boursecuTransactionsIcon = getBoursecuActionIconSrc('transactions') ?? ''
+const boursecuWalletIcon = getBoursecuActionIconSrc('wallet') ?? ''
 const whiteNavLogoProjects = ['goldenramin']
 const isWhiteNavLogo = computed(() => whiteNavLogoProjects.includes(projectName))
 </script>
+
+<style scoped>
+.tab__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  overflow: visible;
+}
+
+.tab__icon-image {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  transform: scale(2.25);
+}
+</style>