𝗪𝗵𝘆 𝗬𝗼𝘂 𝗦𝗵𝗼𝘂𝗹𝗱 𝗦𝘄𝗶𝘁𝗰𝗵 𝗜𝗰𝗼𝗻 𝗟𝗶𝗯𝗿𝗮𝗿𝗶𝗲𝘀
@expo/vector-icons से आधिकारिक @react-native-vector-icons पैकेज पर स्विच करने से आपके बंडल का आकार 4MB या उससे अधिक कम हो जाता है। Expo अब इस बदलाव की सिफारिश करता है।
पुराना @expo/vector-icons एक रैपर (wrapper) था। इसने आइकन को Expo Go और over-the-air अपडेट के साथ काम करने में मदद की। हालाँकि, इस रैपर ने जटिलता बढ़ा दी थी। इसे काम करने लायक बनाने के लिए Expo को Babel transforms का उपयोग करना पड़ता था। इससे रखरखाव (maintenance) का अतिरिक्त काम बढ़ गया था।
नए पैकेज अलग तरह से काम करते हैं। वे सीधे expo-font के साथ इंटीग्रेट होते हैं। वे नेटिव फ़ॉन्ट लोडिंग APIs का उपयोग करते हैं। इसका मतलब है कि वे Expo Go, डेवलपमेंट बिल्ड्स और प्रोडक्शन ऐप्स में काम करते हैं।
बदलने के लाभ:
- छोटे बंडल: इम्पोर्ट्स बदलने के बाद हमारे टेस्ट ऐप का आकार 4MB कम हो गया।
- नए आइकन सेट: आपको Lucide जैसे सेट तक पहुंच मिलती है।
- बेहतर टूल्स: आप आइकन के नामों की टाइप-चेक (type-check) कर सकते हैं।
- क्लीनर सेटअप: अब आपको जटिल एलियासिंग (aliasing) कॉन्फ़िगरेशन की आवश्यकता नहीं है।
माइग्रेट कैसे करें:
- कोडेमोड (codemod) चलाएं: अपने प्रोजेक्ट रूट में
npx @react-native-vector-icons/codemodका उपयोग करें। - बदलाव की पुष्टि करें: पुराने पैकेज खोजने के लिए
npx expo doctorचलाएं। - expo-font की जांच करें: सुनिश्चित करें कि यह इंस्टॉल और कॉन्फ़िगर है।
node_modulesसे फ़ॉन्ट पाथ को सीधे कॉन्फ़िगरेशन प्लगइन (config plugin) में न जोड़ें।
इन समस्याओं से सावधान रहें:
- फ़ॉन्ट संघर्ष (Font conflicts): पुराने और नए पैकेज को मिलाने से खाली वर्ग (empty squares) या प्रश्न चिह्न दिखाई दे सकते हैं।
- डिपेंडेंसी संबंधी समस्याएं: कुछ लाइब्रेरी पुराने नामों की अपेक्षा करती हैं। यदि आपको त्रुटियां (errors) दिखाई दें, तो अपनी डिपेंडेंसी की जांच करें।
Expo भविष्य के रिलीज़ में @expo/vector-icons को डिप्रिकेट (deprecate) कर देगा। अभी यह बदलाव करने से आपका प्रोजेक्ट सरल हो जाएगा और प्रदर्शन (performance) में सुधार होगा।
स्रोत: https://dev.to/expo/why-you-should-drop-expovector-icons-for-react-native-vector-icons-3m1n