इस प्रोजेक्ट के बारे में

# Ionicons [Ionicons](http://ionicons.com/) एक पूरी तरह से ओपन-सोर्स आइकन सेट है जिसमें वेब, iOS, Android और डेस्कटॉप ऐप्स के लिए 1,300 आइकन बनाए गए हैं। Ionicons को [Ionic Framework](https://ionicframework.com/) के लिए बनाया गया था, इसलिए आइकनों में Material Design और iOS दोनों संस्करण हैं। नोट: सभी ब्रांड आइकन उनके संबंधित स्वामियों के ट्रेडमार्क हैं। इन ट्रेडमार्क का उपयोग Ionic द्वारा ट्रेडमार्क धारक के समर्थन का संकेत नहीं देता है, न ही इसके विपरीत। हमारा इरादा है कि यह आइकन पैक [Ionic](http://ionicframework.com/) के साथ उपयोग किया जाए, लेकिन यह किसी भी तरह से इसी तक सीमित नहीं है। इन्हें जहाँ भी उचित लगे, व्यक्तिगत या व्यावसायिक रूप से उपयोग करें। ये उपयोग के लिए निःशुल्क हैं और [MIT](http://opensource.org/licenses/MIT) के तहत लाइसेंस प्राप्त हैं। ## योगदान योगदान देने में रुचि के लिए धन्यवाद! [योगदान](https://github.com/ionic-team/ionicons/blob/main/CONTRIBUTING.md) के लिए हमारे दिशानिर्देश पढ़ें और फिर [मदद चाहिए](https://github.com/ionic-team/ionicons/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22) लेबल वाले हमारे मुद्दों को देखें। ## वेब घटक का उपयोग करना Ionicons वेब घटक आपके ऐप में Ionicons का उपयोग करने का एक आसान और कुशल तरीका है। घटक प्रत्येक आइकन के लिए गतिशील रूप से एक SVG लोड करेगा, इसलिए आपका ऐप केवल उन आइकनों का अनुरोध कर रहा है जिनकी आपको आवश्यकता है। यह भी ध्यान दें कि केवल दृश्यमान आइकन लोड होते हैं, और जो आइकन "फोल्ड के नीचे" हैं और उपयोगकर्ता की दृष्टि से छिपे हुए हैं, वे svg संसाधन के लिए fetch अनुरोध नहीं करते हैं। ### स्थापना यदि आप [Ionic Framework](https://ionicframework.com/) का उपयोग कर रहे हैं, तो Ionicons डिफ़ॉल्ट रूप से पैक किया जाता है, इसलिए कोई स्थापना आवश्यक नहीं है। Ionic Framework के बिना Ionicons का उपयोग करना चाहते हैं? उन्हें सक्षम करने के लिए अपने पृष्ठ के अंत में, समापन `</body>` टैग से ठीक पहले निम्न `<script>` रखें। ```html <script type="module" src="https://esm.sh/ionicons@latest/loader"></script> <script nomodule src="https://esm.sh/ionicons@latest/loader"></script> ``` आप Ionicon के किसी भी संस्करण को चुनने के लिए `latest` को बदल सकते हैं, उदाहरण के लिए: ```html <script type="module" src="https://esm.sh/ionicons@8.0.0/loader"></script> <script nomodule src="https://esm.sh/ionicons@8.0.0/loader"></script> ``` ### मूल उपयोग Ionicons पैकेज से एक अंतर्निहित आइकन का उपयोग करने के लिए, ion-icon घटक पर `name` विशेषता भरें: ```html <ion-icon name="heart"></ion-icon> ``` ### कस्टम आइकन कस्टम SVG का उपयोग करने के लिए, बाहरी SVG फ़ाइल का अनुरोध करने के लिए `src` विशेषता में इसका url प्रदान करें। `src` विशेषता `<img src="...">` के समान काम करती है जिसमें url उस वेबपेज से सुलभ होना चाहिए जो छवि के लिए अनुरोध कर रहा है। इसके अतिरिक्त, बाहरी फ़ाइल केवल एक मान्य svg हो सकती है और svg तत्व के भीतर स्क्रिप्ट या ईवेंट की अनुमति नहीं देती है। ```html <ion-icon src="/path/to/external/file.svg"></ion-icon> ``` #### कस्टम एसेट पथ यदि आपके पास लोड करने के लिए आइकनों का एक अलग सेट है या यदि Ionicon आइकन किसी भिन्न पृष्ठ या पथ पर होस्ट किए गए हैं, तो आप उस एसेट url को सेट कर सकते हैं जिससे Ionicons आइकन खींचता है: ```ts import { setAssetPath, addIcons } from 'ionicons'; import { add, logoIonic, save } from 'ionicons/icons'; // आइकन लोड करने के लिए रूट पथ को "<root>/public/svg" पर सेट करें setAssetPath(`${window.location.origin}/public/svg/`); // केवल विशिष्ट आइकन लोड करें addIcons({ add, logoIonic, save }); ``` यह नामित आइकनों के उपयोग की अनुमति देता है जैसे: ```html <!-- अब svg को "<root>/public/svg/heart.svg" से खींचता है --> <ion-icon name="heart"></ion-icon> ``` ## वेरिएंट Ionicons में प्रत्येक ऐप आइकन में `filled`, `outline` और `sharp` वेरिएंट होता है। ये विभिन्न वेरिएंट आपके ऐप को विभिन्न प्लेटफार्मों के लिए मूल महसूस कराने के लिए प्रदान किए गए हैं। filled वेरिएंट बिना प्रत्यय के डिफ़ॉल्ट नाम का उपयोग करता है। नोट: लोगो आइकनों में outline या sharp वेरिएंट नहीं होते हैं। ```html <ion-icon name="heart"></ion-icon> <!--filled--> <ion-icon name="heart-outline"></ion-icon> <!--outline--> <ion-icon name="heart-sharp"></ion-icon> <!--sharp--> ``` ### प्लेटफ़ॉर्म विशिष्टता Ionic Framework में आइकन का उपयोग करते समय आप प्रति प्लेटफ़ॉर्म अलग-अलग आइकन निर्दिष्ट कर सकते हैं। `md` और `ios` विशेषताओं का उपयोग करें और प्लेटफ़ॉर्म-विशिष्ट आइकन/वेरिएंट नाम प्रदान करें। ```html <ion-icon ios="heart-outline" md="heart-sharp"></ion-icon> ``` ## आकार आइकन आकार निर्दिष्ट करने के लिए, आप हमारे पूर्व-परिभाषित फ़ॉन्ट आकारों के लिए size विशेषता का उपयोग कर सकते हैं। ```html <ion-icon size="small"></ion-icon> <ion-icon size="large"></ion-icon> ``` या आप `ion-icon` घटक पर `font-size` CSS गुण लागू करके एक विशिष्ट आकार सेट कर सकते हैं। 8 के गुणक (8, 16, 32, 64, आदि) वाले पिक्सेल आकार का उपयोग करने की अनुशंसा की जाती है। ```css ion-icon { font-size: 64px; } ``` ## रंग `ion-icon` घटक पर `color` CSS गुण लागू करके आइकन रंग निर्दिष्ट करें। ```css ion-icon { color: blue; } ``` ## स्ट्रोक चौड़ाई `outline` आइकन वेरिएंट का उपयोग करते समय स्ट्रोक चौड़ाई को समायोजित करना संभव है, ताकि आइकन के आकार के सापेक्ष या आसन्न पाठ की चौड़ाई के सापेक्ष बेहतर दृश्य संतुलन हो सके। आप `ion-icon` घटक पर `--ionicon-stroke-width` CSS कस्टम गुण लागू करके एक विशिष्ट आकार सेट कर सकते हैं। डिफ़ॉल्ट मान 32px है। ```html <ion-icon name="heart-outline"></ion-icon> ``` ```css ion-icon { --ionicon-stroke-width: 16px; } ``` ## v4 से माइग्रेट करना आइकन हटाने/नाम बदलने की सूची के लिए [5.0 रिलीज़ नोट्स](https://github.com/ionic-team/ionicons/releases/tag/5.0.0) देखें। ## लाइसेंस Ionicons [MIT लाइसेंस](http://opensource.org/licenses/MIT) के तहत लाइसेंस प्राप्त है। ## संबंधित * [Ionicons होमपेज](http://ionicons.com/) * [Ionic Framework](https://ionicframework.com/) * [Ionic Discord](https://ionic.link/discord) * [Ionic फोरम](https://forum.ionicframework.com/) * [Stencil](https://stenciljs.com/) * [Capacitor](https://capacitorjs.com/)