مرجع الأيقونات
يوفر قالب التوثيق الوصول إلى آلاف الأيقونات من حزم متعددة. تستخدم جميع الحزم نفس النمط: استيراد مكون Icon.astro الخاص بالحزمة والإشارة إلى الأيقونات بالاسم.
حزم الأيقونات المتاحة
Section titled “حزم الأيقونات المتاحة”| الحزمة | العدد | الاستخدام | الصفحة |
|---|---|---|---|
| Starlight المدمجة | ~200 | <Icon name="star" /> | Starlight المدمجة |
| علامة F5 التجارية | 665 | <Icon name="ai-admin" /> | علامة F5 التجارية |
| Lucide | ~1,600 | <Icon name="rocket" /> | Lucide |
| Material Design | 7,638 | <Icon name="database" /> | Material Design |
| Carbon | 2,582 | <Icon name="cloud" /> | Carbon |
| Phosphor | 9,161 | <Icon name="globe" /> | Phosphor |
| Tabler | 6,034 | <Icon name="shield" /> | Tabler |
| خدمات F5 XC | 30 | <Icon name="bot-defense" /> | خدمات F5 XC |
| Simple Icons | 3,200+ | <Icon name="cloudflare" /> | Simple Icons |
| HashiCorp Flight | 672 | <Icon name="cloud" /> | HashiCorp Flight |
| بنية AWS | 885 | <Icon name="lambda" /> | AWS |
| بنية Azure | 606 | <Icon name="virtual-machine" /> | Azure |
| بنية GCP | 216 | <Icon name="cloud-storage" /> | GCP |
طريقة العرض
Section titled “طريقة العرض”تستخدم جميع حزم الأيقونات مكونات Icon.astro خاصة بكل حزمة تعرض رسومات SVG مضمّنة. لكل حزمة استيراد خاص بها:
---// Starlight المدمجةimport { Icon } from '@astrojs/starlight/components';
// الحزم الأخرى — لكل منها استيراد خاصimport LucideIcon from '@f5-sales-demo/icons-lucide/Icon.astro';import MdiIcon from '@f5-sales-demo/icons-mdi/Icon.astro';import F5xIcon from '@f5-sales-demo/icons-f5xc/Icon.astro';---
<Icon name="star" /><LucideIcon name="rocket" /><MdiIcon name="database" /><F5xIcon name="bot-defense" />تستخدم الأيقونات currentColor وتتكيف تلقائيًا مع الوضع الفاتح والداكن دون الحاجة إلى أي معالجة خاصة.
Starlight المدمجة
Section titled “Starlight المدمجة”Lucide
Section titled “Lucide”سلوك الوضع الداكن/الفاتح
Section titled “سلوك الوضع الداكن/الفاتح”تعرض جميع مكونات Icon رسومات SVG مضمّنة باستخدام currentColor. وتتكيف تلقائيًا مع القالب الحالي — دون الحاجة إلى أي معالجة خاصة لـ CSS أو الفئات.
تستخدم أيقونات خدمات F5 XC خصائص CSS المخصصة التي تتكيف تلقائيًا مع الوضع الفاتح والداكن — دون الحاجة إلى أي معالجة خاصة للفئات. بالنسبة للأيقونات متعددة الألوان الأخرى (مثل متغيرات الألوان في HashiCorp Flight)، تحافظ فئة no-invert على .icon-card-image على الألوان الأصلية في الوضع الداكن.
أي حزمة يجب أن أستخدم؟
Section titled “أي حزمة يجب أن أستخدم؟”| حالة الاستخدام | الحزمة الموصى بها | السبب |
|---|---|---|
| واجهة المستخدم العامة (الأسهم، الإغلاق، البحث) | Starlight المدمجة | بدون إعداد، متاحة دائمًا |
| مخططات منتجات F5 | علامة F5 التجارية | رسومات متخصصة بمجال الشبكات/الأمان |
| أيقونات خطوط حديثة | Lucide | أيقونات نظيفة ومتسقة تتجاوز 1,600 |
| أيقونات معبأة/محددة على نطاق واسع | Material Design (mdi) | أكبر مجموعة بـ 7,638 أيقونة |
| لغة تصميم IBM | Carbon | 2,582 أيقونة بمستوى المؤسسات |
| خيارات سمك مرنة | Phosphor | 9,161 أيقونة بستة متغيرات سمك |
| أيقونات خطوط واضحة | Tabler | 6,034 أيقونة بسمك خط متسق 2 بكسل |
| مخططات خدمات F5 XC | خدمات F5 XC | 30 أيقونة لخدمات السحابة الموزعة |
| شعارات العلامات التجارية/الشركات | Simple Icons | أكثر من 3,200 أيقونة علامة تجارية للموردين والخدمات |
| شعارات موردي السحابة/البنية التحتية | HashiCorp Flight | أيقونات موردي AWS، GCP، Azure، K8s |
| مخططات بنية AWS | بنية AWS | 885 أيقونة خدمة ملونة للبنية التحتية لـ AWS |
| مخططات بنية Azure | بنية Azure | 606 أيقونة خدمة ملونة للبنية التحتية لـ Azure |
| مخططات بنية GCP | بنية GCP | 216 أيقونة خدمة ملونة للبنية التحتية لـ Google Cloud |