Ion Icons क्या है? How To Use ionicons In Hindi

(how to use ionicons in hindi) – वेब डिजाईन में icons का रोल काफी बड़ा है और icons की जरूरत लगभग सभी website में होती है तो इस condition में आपके पास कितनें option हैं? आप कितनें तरीकों से icons लगा सकते हैं?

लगभग Beginners अपनें वेब पेज में icons की image को add करते हैं जो की एक हद तक सही है लेकिन कुछ images का साइज़ छोटा या बड़ा करनें में color change में या फिर कुछ और कस्टमाइज करनें में काफी दिक्कत का सामना करना पड़ता है.

तो दोस्तों इस तरह की condition से बचनें के लिए वेब डिज़ाइनर use करते हैं SVG, web font या फिर कोई icons की library. इसलिए आपको आज का आर्टिकल How To Use ionicons In Hindi को पूरा पढ़ना चाहिए, क्योंकि हम इस आर्टिकल में बात करेंगे Ion Icons क्या है, इसको क्यों use करें और कैसे use करें.

Ion Icons क्या है?

ionicons एक सेट है जो की वेब, आईओएस, एंड्रॉइड और डेस्कटॉप ऐप के लिए ready किया गया है |

ionicons की खास बात है की ये completely open-source icon सेट है जिसे कोई भी use कर सकता है आसानीं से, Ionicons को Ionic Framework के लिए बनाया गया था, basically ‘Ionic Framework’ apps को ध्यान में रखकर काम करता है इसलिए आइकन में मटीरियल डिज़ाइन और iOS दोनों version मोजूद होते हैं |

ionicons में पहले 700+ icons के सेट थे और फिलहाल ionicons के latest version में ये बढ़कर 1,300+ icon के सेट हो गए हैं.

Ionicons Latest Version

Ionicons का Latest Version है 6.0.0 जो की अक्टूबर 2021 में release हुवा था.

Benefit of Ion Icons

अगर हम Ionic, का इस्तेमाल करते हैं तो ion-icon के component अपने-आप(automatically) आपके platform के आधार पर सही version को choose कर लेते हैं.

आसान भाषा में बात करें तो Ionic को इस तरह develop किया गया है की ये आपके platform की पहचान कर सकता है की कोनसा platform iOS है और कोनसा iOS नहीं है जिसके हिसाब से Ionic अपने-आप सही version की पहचान करके icon की डिजाईन आउटपुट के तोर पर दिखाता है इसके अलावा ionicons SVG और web font दोनों को सपोर्ट करता है जो की अपनें आप में काफी बड़ी बात है.

इसी कारण ionicons सबसे advance है. अगर दुसरे फायदे की बात करें तो इसके लोड होनें का टाइम काफी कम है जिससे आपके apps या website पर लोडिंग टाइम काफी कम हो जाता है और आपका app या website फ़ास्ट लोड होता है.

How To Use ionicons In Hindi

दोस्तों How To Use ionicons In Hindi के आर्टिकल के डेमो में हम ionicons CDN का use करनें वाले हैं, तो चलिए जान लेते हैं की कैसे हम ionicons को add कर सकते हैं अपनीं website में.

ionicons add करनें के लिए हमें html का document तैयार करना होगा और ionicons का cdn लिंक add करना होगा body tag close होनें से पहले कुछ इस तरह से –

<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

ionicons CDN add करनें के बाद html में एक टैग add करना है जहाँ भी आपको icon चाहिए उस जगह पर कुछ इस तरह से –

<ion-icon name="heart"></ion-icon>

कोई ही icon को हम 3 Variants में दिखा सकते हैं –

filled – filled के इस्तेमाल से icon भरा हुवा दिखाई देता है जिसमें कोई board-ring नहीं होती है |

outline – outline में आपको border के icon देखनें को मिलेंगे ओर ये icon सिर्फ़ बॉर्डर से बनें होते हैं जिसको हम outline बोलते हैं |

sharp – sharp में आपको icon के छोर थोड़े नुकीले देखनें को मिलेंगे | sharp icon सबसे नए icon की श्रेणी में आते हैं |

ionicons Variants को आपनें समझ लिया होगा तो अब बात करते हैं इन icons के customize की तो इसके 3 तरीके हैं

पहला (Attribute)- ion-icon टैग के बिच में attribute add करके कुछ इस तरह से –

<ion-icon size="small"></ion-icon>
<ion-icon size="large"></ion-icon>

दूसरा (CSS)- custom CSS के जरिये कुछ इस तरह से –

ion-icon {
  font-size: 2rem;

  color: red;
}

तीसरा (Stroke weight)- अगर आप ionicons में outline variant को इस्तेमाल कर रहे हैं तो आप इसकी outline(Stroke weight) को अपनें हिसाब से customize कर सकते हैं CSS की सहायता से –

ion-icon {
  --ionicon-stroke-width: 10px;
}

ज्यादा जानकारी के लिए आप ionicons की official website पर चेक कर सकते हैं |

ionicon Demo Code

Conclusion

आज के आर्टिकल how to use ionicons in Hindi में आपने सिखा की Ion Icons क्या है ?, Benefit of Ion Icons और How To Use ionicons In Hindi

अगर आपको आज का आर्टिकल helpful लगा हो तो आप इसको अपनें दोस्तों के साथ share करना ना भूलें और इसी तरह के और amazing आर्टिकल पढनें के लिए webtutorialhindi को follow करें |

ताज़ा अपडेट पानें के लिए आप मेरे social media से जुड़ सकते हैं और अगर कोई सवाल हो तो आप पूछ सकते हैं निचे comment मैं,

धन्यवाद