Replace emoji icons with Lucide icons

src/components/admin/BusinessImageUpload.vue

@@ -47,7 +47,7 @@
     <label
       class="flex cursor-pointer flex-col items-center justify-center rounded-xl border border-dashed border-border bg-surface-3 px-4 py-6 text-sm text-muted transition hover:border-brand-500/50 hover:bg-brand-500/5"
     >
-      <span class="text-2xl">📷</span>
+      <AppIcon name="camera" size="lg" class="text-muted" />
       <span class="mt-2">افزودن تصویر</span>
       <input
         type="file"
@@ -63,6 +63,7 @@
 <script setup lang="ts">
 import { onBeforeUnmount, ref, watch } from 'vue';
 import type { BusinessImage } from '@/api/types';
+import AppIcon from '@/components/ui/AppIcon.vue';
 import { uploadUrl } from '@/utils/media';
 
 const props = defineProps<{

src/components/admin/BusinessListCard.vue

@@ -36,9 +36,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>
   </article>
@@ -48,6 +48,7 @@
 import { computed } from 'vue';
 import type { Business } from '@/api/types';
 import AppBadge from '@/components/ui/AppBadge.vue';
+import AppIcon from '@/components/ui/AppIcon.vue';
 import { activeLabel } from '@/utils/format';
 import { businessCoverUrl } from '@/utils/media';
 

src/components/admin/StatCard.vue

@@ -13,10 +13,10 @@
         <p class="mt-2 text-3xl font-bold tracking-tight text-text">{{ value }}</p>
       </div>
       <span
-        class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl text-lg"
+        class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl"
         :class="iconWrapClass"
       >
-        {{ icon }}
+        <AppIcon :name="icon" size="lg" />
       </span>
     </div>
   </RouterLink>
@@ -24,11 +24,13 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
+import AppIcon from '@/components/ui/AppIcon.vue';
+import type { AppIconName } from '@/types/icons';
 
 const props = defineProps<{
   label: string;
   value: number | string;
-  icon: string;
+  icon: AppIconName;
   to: string;
   tone?: 'amber' | 'emerald' | 'sky' | 'violet' | 'rose';
 }>();

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/AppModal.vue

@@ -20,7 +20,7 @@
             aria-label="بستن"
             @click="emit('close')"
           >
-            ✕
+            <AppIcon name="x" size="md" />
           </button>
         </div>
         <slot />
@@ -30,6 +30,8 @@
 </template>
 
 <script setup lang="ts">
+import AppIcon from '@/components/ui/AppIcon.vue';
+
 defineProps<{
   open: boolean;
   title?: string;

src/components/ui/SearchInput.vue

@@ -1,17 +1,29 @@
 <template>
-  <AppInput
-    :id="id"
-    v-model="model"
-    type="search"
-    :label="label"
-    :placeholder="placeholder"
-    autocomplete="off"
-    enterkeyhint="search"
-  />
+  <div class="space-y-1.5">
+    <label v-if="label" :for="id" class="block text-sm font-medium text-muted">
+      {{ label }}
+    </label>
+    <div class="relative">
+      <AppIcon
+        name="search"
+        size="sm"
+        class="pointer-events-none absolute start-3 top-1/2 -translate-y-1/2 text-muted"
+      />
+      <input
+        :id="id"
+        v-model="model"
+        type="search"
+        :placeholder="placeholder"
+        autocomplete="off"
+        enterkeyhint="search"
+        class="w-full rounded-xl border border-border bg-surface-2 py-3 pe-4 ps-10 text-sm text-text outline-none placeholder:text-muted focus:border-brand-500 focus:ring-2 focus:ring-brand-500/30"
+      />
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import AppInput from '@/components/ui/AppInput.vue';
+import AppIcon from '@/components/ui/AppIcon.vue';
 
 const model = defineModel<string>({ default: '' });
 

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();