Mercato

الأساسيات

الأيقونات

نظام أيقونات واحد لكل عائلة ميركاتو: أيقونات جوجل الرسمية (Material Symbols) بأسلوب Rounded ووزن 400، بأسلوبين فقط: عادي (مفرّغ) ومملوء. مستضافة ذاتيا وتُعرَض بالحرف الرمزي. لا نرسم أيقونة أبدا.

قاعدة نظاميةMaterial Symbols · Rounded 400عادي + مملوء
تحتاج أيقونة غير موجودة هنا؟ تصفّح المكتبة الكاملة واختر بأسلوب Rounded.تصفّح كل الأيقونات (Rounded)

القاعدة

كل أيقونة في النظام تأتي من مكتبة Material Symbols الرسمية من جوجل، بأسلوب Rounded ووزن 400. لا نرسم مسارات SVG يدوية، ولا نخلط مجموعات مختلفة. هذا يضمن وزنا بصريا موحّدا وتناسقا كاملا بين التطبيقات الستة.

كيف نعرضها

الخط مستضاف ذاتيا ويُعرَض بالحرف الرمزي: اكتب اسم الأيقونة داخل عنصر بالصنف material-symbol. للأسلوب المملوء أضف الصنف is-filled. الحجم يُضبط بـ font-size واللون بـ currentColor.

الأسلوبان

لكل أيقونة أسلوبان: العادي (مفرّغ) للحالة الافتراضية والخاملة، والمملوء للحالة النشطة أو المختارة أو الحالة الصلبة. نفس الاسم، نفس الوزن، يتغيّر التعبئة فقط.

الأيقونةعاديمملوء
homeالرئيسية
favoriteالمفضّلة
starالتقييم
notificationsالتنبيهات
shopping_cartالسلة
sellالمنتجات

المكتبة (98)

المكتبة المشتركة الكاملة المستخدمة عبر عائلة المنتجات (Agent وسلامتي وB2B وinsight)، مجمّعة حسب الوظيفة. الاسم أسفل كل أيقونة هو الحرف الرمزي الذي يُكتب في الكود؛ انسخه بزر النسخ، أو نزّل ملف الـSVG بزر التنزيل.

العرض
يبدّل كل الأيقونات وملف التنزيل

التنقّل والهيكل

homeالرئيسية
dehazeالقائمة
searchبحث
keyboard_backspaceرجوع
keyboard_arrow_downتوسيع
closeإغلاق
more_horizخيارات
settingsالإعدادات
layersالطبقات
expand_contentتكبير
swap_vertترتيب
filter_altتصفية
filter_listقائمة التصفية

التجارة والكتالوج

storefrontالمتجر
sellالمنتجات
shopping_cartالسلة
add_shopping_cartإضافة للسلة
remove_shopping_cartإزالة من السلة
barcode_scannerمسح الباركود
local_shippingالشحن
warehouseالمستودع
point_of_saleنقطة البيع
medicationالدواء
pillحبّة دواء

الطلبات والفوترة

ordersالطلبات
receiptإيصال
receipt_longالطلبية
request_quoteالفواتير
account_balance_walletالمحفظة
money_bagالرصيد
paidمدفوع
universal_currency_altالعملة
calculateحساب
bar_chartالإحصاء
add_chartتقرير
percentنسبة
percent_discountالخصم

العملاء والفرق

groupالعملاء
groupsالفرق
personالملف الشخصي
assignment_indالمندوب
assignment_lateمهمة متأخرة
corporate_fareالمنشأة
handshakeالشراكة
workالعمل
location_onالموقع
pinالدبوس
directionsالاتجاهات
femaleأنثى
maleذكر
account_treeالهيكل

التواصل والتنبيهات

mailالبريد
callاتصال
chat_bubbleمحادثة
sendإرسال
notificationsالتنبيهات
notifications_activeتنبيه نشط
headset_micالدعم
contact_supportالمساعدة
micالميكروفون

الإجراءات والحالة

addإضافة
add_circleإضافة
removeإزالة
editتعديل
deleteحذف
checkتحديد
favoriteالمفضّلة
starنجمة
star_rateتقييم
thumb_upإعجاب
thumb_downعدم إعجاب
visibilityإظهار
visibility_offإخفاء
historyالسجل
autorenewتجديد
event_repeatموعد متكرر
calendar_monthالتقويم
calendar_clockموعد
calendar_checkموعد مؤكّد
alarm_onتنبيه
hourglassالانتظار
lockقفل
securityالأمان
infoمعلومة
errorخطأ
dangerousخطر
editor_choiceاختيار مميّز
mode_heatالأكثر رواجا
screen_recordتسجيل الشاشة

الوسائط والذكاء

imageصورة
photoصورة
photo_cameraالكاميرا
robotمساعد ميركاتو
assistant_on_hubالمساعد الذكي
globeاللغة
door_openخروج
light_modeالوضع الفاتح
dark_modeالوضع الداكن

الرمز العلامي

استثناء واحد: عملة ميركاتو. هذا رمز علامي خاص، لا يأتي من مكتبة الأيقونات ولا يُعاد رسمه. يحمل لون العلامة الكهرماني الثابت ويُشحن دائما كهذا الشكل المتجهي بالضبط، حيثما تظهر النقاط أو الرصيد.

عملة ميركاتو

/brand/mercato-coin.svg · #FFAA00

رمز علامي، ليس من Material Symbols.

الأحجام

سلّم أحجام محدود يتماشى مع طبقتي المسافات والخطوط. الأيقونة تأخذ حجمها من font-size ولونها من النص المحيط.

الحجممعاينةالاستخدام
18pxداخل النص والشارات
20pxالأزرار وحقول الإدخال
24pxأزرار الأيقونات والتنقّل
28pxبطاقات الإحصاء والعناوين

افعل ولا تفعل

افعل
  • اختر دائما من Material Symbols الرسمية، أسلوب Rounded ووزن 400.
  • استخدم المملوء للحالة النشطة أو المختارة، والعادي لغيرها.
  • اضبط الحجم بـ font-size واللون بـ currentColor ليرث لون النص.
لا تفعل
  • لا ترسم أيقونة بمسار SVG يدوي أبدا.
  • لا تخلط مجموعات أيقونات أو أوزانا مختلفة في الشاشة نفسها.
  • لا تعتمد على الأيقونة وحدها لنقل حالة؛ أضف تسمية أو لونا.

إمكانية الوصول

  • الأيقونة الزخرفية بجانب نص تأخذ aria-hidden، فلا يكرّرها قارئ الشاشة.
  • الأيقونة التي تقف وحدها كإجراء (زر أيقونة) تأخذ aria-label عربية واضحة.
  • لا تنقل الحالة باللون أو التعبئة وحدهما؛ أرفق نصا كلما دلّت على معنى.