इसे छोड़कर कंटेंट पर जाएं
Icons

आइकन संदर्भ

डॉक्यूमेंटेशन थीम कई पैक से हजारों आइकन तक पहुँच प्रदान करती है। प्रत्येक पैक एक ही पैटर्न का उपयोग करता है: पैक के 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 Design7,638<Icon name="database" />Material Design
Carbon2,582<Icon name="cloud" />Carbon
Phosphor9,161<Icon name="globe" />Phosphor
Tabler6,034<Icon name="shield" />Tabler
F5 XC सर्विसेज30<Icon name="bot-defense" />F5 XC सर्विसेज
Simple Icons3,200+<Icon name="cloudflare" />Simple Icons
HashiCorp Flight672<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 built-in
import { Icon } from '@astrojs/starlight/components';


// Other packs — each has its own import
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 बिल्ट-इन”
star
rocket
setting
heart

Lucide

Section titled “Lucide”
rocket
mdi/database
carbon/cloud
tabler/shield

डार्क/लाइट मोड व्यवहार

Section titled “डार्क/लाइट मोड व्यवहार”

सभी Icon कंपोनेंट currentColor का उपयोग करके इनलाइन SVG रेंडर करते हैं। वे स्वचालित रूप से वर्तमान थीम के अनुसार अनुकूलित हो जाते हैं — किसी विशेष CSS या क्लास हैंडलिंग की आवश्यकता नहीं है।

F5 XC सर्विस आइकन CSS कस्टम प्रॉपर्टीज का उपयोग करते हैं जो स्वचालित रूप से लाइट और डार्क मोड के अनुसार अनुकूलित हो जाती हैं — किसी विशेष क्लास हैंडलिंग की आवश्यकता नहीं है। अन्य मल्टी-कलर आइकन (जैसे HashiCorp Flight कलर वेरिएंट) के लिए, .icon-card-image पर no-invert क्लास डार्क मोड में मूल रंगों को संरक्षित करती है।

कौन सा पैक उपयोग करें?

Section titled “कौन सा पैक उपयोग करें?”
उपयोग का मामलाअनुशंसित पैककारण
सामान्य UI (एरो, क्लोज, सर्च)Starlight बिल्ट-इनशून्य कॉन्फिगरेशन, हमेशा उपलब्ध
F5 उत्पाद डायग्रामF5 ब्रांडडोमेन-विशिष्ट नेटवर्किंग/सुरक्षा आर्ट
मॉडर्न स्ट्रोक आइकनLucideस्वच्छ, सुसंगत 1,600+ आइकन
बड़े पैमाने पर भरे/आउटलाइन आइकनMaterial Design (mdi)7,638 आइकन के साथ सबसे बड़ा सेट
IBM डिज़ाइन भाषाCarbon2,582 एंटरप्राइज-ग्रेड आइकन
लचीले वेट विकल्पPhosphorछह वेट वेरिएंट के साथ 9,161 आइकन
क्रिस्प लाइन आइकनTablerसुसंगत 2px स्ट्रोक के साथ 6,034 आइकन
F5 XC सर्विस डायग्रामF5 XC सर्विसेज30 डिस्ट्रिब्यूटेड क्लाउड सर्विस आइकन
ब्रांड/कंपनी लोगोSimple Iconsवेंडर और सर्विसेज के लिए 3,200+ ब्रांड आइकन
क्लाउड/इंफ्रा वेंडर लोगोHashiCorp FlightAWS, GCP, Azure, K8s वेंडर आइकन
AWS आर्किटेक्चर डायग्रामAWS आर्किटेक्चरAWS इन्फ्रास्ट्रक्चर के लिए 885 कलर सर्विस आइकन
Azure आर्किटेक्चर डायग्रामAzure आर्किटेक्चरAzure इन्फ्रास्ट्रक्चर के लिए 606 कलर सर्विस आइकन
GCP आर्किटेक्चर डायग्रामGCP आर्किटेक्चरGoogle Cloud इन्फ्रास्ट्रक्चर के लिए 216 कलर सर्विस आइकन