Replace emoji icons with Lucide icons

src/components/business/BusinessCard.vue

@@ -16,8 +16,12 @@
       <p v-if="business.description" class="mt-0.5 truncate text-xs text-muted">
         {{ business.description }}
       </p>
-      <p v-if="business.address" class="mt-0.5 truncate text-xs text-muted">
-        📍 {{ business.address }}
+      <p
+        v-if="business.address"
+        class="mt-0.5 flex items-center gap-1 truncate text-xs text-muted"
+      >
+        <AppIcon name="map-pin" size="sm" class="shrink-0" />
+        <span class="truncate">{{ business.address }}</span>
       </p>
     </div>
 
@@ -33,9 +37,9 @@
       />
       <div
         v-else
-        class="flex h-full w-full items-center justify-center text-xl text-muted/50"
+        class="flex h-full w-full items-center justify-center text-muted/40"
       >
-        🏪
+        <AppIcon name="store" size="lg" />
       </div>
     </div>
   </RouterLink>
@@ -44,6 +48,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import type { Business } from '@/api/types';
+import AppIcon from '@/components/ui/AppIcon.vue';
 import { businessCoverUrl } from '@/utils/media';
 
 const props = defineProps<{

src/components/ui/AppIcon.vue

@@ -0,0 +1,72 @@
+<template>
+  <component
+    :is="iconComponent"
+    :class="sizeClass"
+    :stroke-width="strokeWidth"
+    aria-hidden="true"
+  />
+</template>
+
+<script setup lang="ts">
+import type { Component } from 'vue';
+import { computed } from 'vue';
+import {
+  ArrowRight,
+  Calendar,
+  Camera,
+  CircleCheck,
+  ClipboardList,
+  FolderOpen,
+  Home,
+  LayoutDashboard,
+  MapPin,
+  Moon,
+  Plus,
+  Search,
+  Store,
+  Sun,
+  User,
+  Users,
+  X,
+} from '@lucide/vue';
+import type { AppIconName } from '@/types/icons';
+
+const iconMap: Record<AppIconName, Component> = {
+  home: Home,
+  calendar: Calendar,
+  user: User,
+  store: Store,
+  plus: Plus,
+  'layout-dashboard': LayoutDashboard,
+  folder: FolderOpen,
+  'clipboard-list': ClipboardList,
+  users: Users,
+  'map-pin': MapPin,
+  sun: Sun,
+  moon: Moon,
+  'arrow-right': ArrowRight,
+  x: X,
+  camera: Camera,
+  'circle-check': CircleCheck,
+  search: Search,
+};
+
+const props = withDefaults(
+  defineProps<{
+    name: AppIconName;
+    size?: 'sm' | 'md' | 'lg';
+    strokeWidth?: number;
+  }>(),
+  {
+    size: 'md',
+    strokeWidth: 2,
+  },
+);
+
+const sizeClass = computed(() => {
+  const map = { sm: 'h-4 w-4', md: 'h-5 w-5', lg: 'h-6 w-6' } as const;
+  return map[props.size];
+});
+
+const iconComponent = computed(() => iconMap[props.name]);
+</script>

src/components/ui/ThemeToggle.vue

@@ -5,13 +5,14 @@
     :aria-label="isDark ? 'حالت روشن' : 'حالت تاریک'"
     @click="toggle"
   >
-    <span v-if="isDark" aria-hidden="true">☀️</span>
-    <span v-else aria-hidden="true">🌙</span>
+    <AppIcon v-if="isDark" name="sun" />
+    <AppIcon v-else name="moon" />
   </button>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
+import AppIcon from '@/components/ui/AppIcon.vue';
 import { useTheme } from '@/composables/useTheme';
 
 const { isDark: mode, toggle } = useTheme();