الأيقونات
وصفة بلاطة مربعة بزوايا مدورة؛ إطار 48x48، نصف قطر 12px، خلفية مظللة.
وصفة بلاطة الأيقونة
| Tile size | 48x48 |
| Tile radius | 12px |
| Inline icon | 12px to 16px |
| Toolbar / nav icon | 20px |
| Card icon | 24px to 28px inside a 48x48 tile |
| Stroke | 2 round/round |
| ViewBox | 24 24 |
التظليلات
أيقونات لوحة التحكم
مجموعة الأيقونات الرسمية للمنتج المستخدمة في تنقل لوحة تحكم BetterGuard. Heroicons v2 بنمط مخطط بحجم 24x24، بسماكة خط 2 دائري/دائري، مضمّنة مباشرة (بدون مكتبة أيقونات، بدون sprite). كلما أُضيفت أيقونة جديدة إلى لوحة التحكم، يجب عكسها هنا.
Stroke: #9ca3af inactive (shown above) · #22d3ee active. Both inherited via stroke="currentColor" from the surrounding .nav-item color.
درع Admin هو مسار مخصص، وليس من Heroicons القياسية. لا تستبدله بدرع Heroicons القياسي.
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/> </svg>
مثال: Obfuscate (lock-closed). انسخ هذا الترميز مباشرةً إلى قالب Blade؛ تلتقط stroke="currentColor" لون النص المحيط.
الأحجام الموصى بها
الأيقونات المضمنة: 12-16px. شريط الأدوات/التنقل: 20px. أيقونة البطاقة داخل بلاطة 48x48: 24-28px. شعار الهيدر: 32-40px. أيقونة Apple touch: 180px.