जियोमिक्सन - एक अद्वितीय हाथ से कूटा हुआ एसवीजी आइकोनसेट

वेब प्रतीक तेजी से आधुनिक वेब डिजाइन के लिए आदर्श बन रहे हैं। वे इन के रूप में वेब डिजाइनरों के लिए बड़े पैमाने पर संपत्ति हैं आइकन को सीएसएस के माध्यम से अनुकूलित किया जा सकता है और बिना किसी गुणवत्ता नुकसान के आकार बदला गया.

लेकिन कुछ आइकन पैक छोटी साइटों के लिए फूला हुआ और बहुत बड़ा महसूस कर सकते हैं। यही वह जगह है जहाँ वास्तव में जियोमाइन्स चमकते हैं.

यह है एक कस्टम हाथ-कोडित आइकन पैक एसवीजी पर चल रहा है. आप जेएस स्क्रिप्ट के माध्यम से या अपने पेज में सीधे एसवीजी फाइलों के माध्यम से आइकन एम्बेड कर सकते हैं। किसी भी तरह से, वे सुंदर वैक्टर और आराम करने के लिए सुपर आसान हैं.

मुख्य जियोमिक्सन पेज में सभी आइकन का पूरा डेमो होता है। वे बहुत सरल हैं और पारंपरिक एकल-रंग के फ्लैट डिजाइन शैली का पालन करते हैं जिससे हम सभी परिचित हैं.

लेकिन उनकी सेटअप जानकारी निश्चित रूप से डेमो पेज पर नहीं है। यदि आप सीखना चाहते हैं कि इसे कैसे सेट किया जाए तो आपको निर्देशों के लिए GitHub repo पर जाना होगा.

डिफ़ॉल्ट रूप से, यह पुस्तकालय मानता है कि आप CSS / JS के साथ काम कर रहे हैं इन आइकन को सीधे पृष्ठ तत्वों में एम्बेड किया गया है। फिर भी जब आप GitHub से आइकन डाउनलोड करते हैं तो आपको सभी कच्ची SVG फाइलें मिल जाती हैं जिन्हें आप सीधे HTML में जोड़ सकते हैं.

केवल परेशानी यह है कि कच्चे एसवीजी को अधिक संपादन की आवश्यकता होती है रंग बदलने के लिए, जबकि JS / CSS मार्ग आपको कोड के माध्यम से रंगों पर नियंत्रण देता है.

सीधे शब्दों में जोड़ें geomicons.min.js आपके हेडर में स्क्रिप्ट और पास डेटा-चिह्न HTML तत्वों में विशेषता। ये ऑटो-एंबेड आइकन होंगे जिन्हें आप तब सीएसएस कक्षाओं का उपयोग करके हेरफेर कर सकते हैं.

एक और बात जो मुझे वास्तव में पसंद है, वह है जिमीकंद के बारे में नोड का समर्थन। यहाँ GitHub रेपो से एक नमूना स्निपेट है:

var geomicons = आवश्यकता ('geomicons-open'); var pathData = geomicons.paths.heart; // पथ का d गुण मान var svgString = geomicons.toString ('दिल') लौटाता है; // एक एसवीजी स्ट्रिंग लौटाता है

यदि आप नोड से परिचित नहीं हैं, तो आपको संभवतः किसी भी नोड स्निपेट का उपयोग करने की आवश्यकता नहीं होगी। वही इन आइकनों के React.js संस्करण के लिए जाता है.

अभी भी प्रमुख रूपरेखाओं के लिए समर्थन एक बड़ी बात है। यह अधिक प्रमाण है कि जियोमॉन के लिए हैं किसी भी प्रकार की वेबसाइट का समर्थन करें पहले प्रदर्शन पर ध्यान केंद्रित करके.

इन आइकन को टेस्ट रन देने के लिए आप एक कॉपी npm के माध्यम से खींच सकते हैं या उन्हें सीधे GitHub के माध्यम से डाउनलोड कर सकते हैं.

वहाँ भी एक रूपरेखा जेनेटिकन्स वायर्ड कहा जाता है कि आप के रूप में अच्छी तरह से परीक्षण करना चाहते हो सकता है.

किसी भी तरह से, यह एक है न्यूनतम वेब डिजाइनर के लिए शानदार आइकॉन. कुल पृष्ठ लोड समय को कम करते हुए अपनी साइट को सुंदर आइकन के साथ अनुकूलित करने के लिए एक सही विकल्प.