يمكن أن تكون إدارة الرموز المخصصة في React Native تحديًا ، خاصة مع الأدوات التقليدية مثل Fontello أو Icomoon. غالبًا ما تفتقر هذه الأدوات إلى التكامل الديناميكي مع الأطر الحديثة ، مما يجعل عملية إضافة أو تحديث الرموز مرهقة وتستغرق وقتًا طويلاً.
يقدم Monicon حلاً حديثًا لهذه التحديات ، مما يوفر طريقة مرنة وفعالة لإدارة الرموز في مشاريعك. دعم الأطر الشهيرة مثل React و React Native.js.js و Vue و Nuxt و Svelte والمزيد ، يبسط Monicon عملية دمج الرموز المخصصة. مع إمكانية الوصول إلى أكثر من 200000 أيقونات من المكتبات الشهيرة مثل تصميم المواد والريش والخط الرائع ، يضمن Monicon أن لديك جميع الأدوات التي تحتاجها لتجربة إدارة أيقونة سلسة وقوية.
لماذا تستخدم Monicon؟
؟ مستندات Monicon
؟ Monicon Github
قم بتشغيل الأمر التالي في المحطة الخاصة بك لإنشاء مشروع معرض جديد:
npx create-expo-app my-new-app cd my-new-app
قم بتشغيل الأمر التالي لتثبيت التبعيات اللازمة:
npm i -D @monicon/metro @monicon/babel-plugin @monicon/loader npx expo install @monicon/native react-native-svg
إنشاء ملف metro.config.js:
const { getDefaultConfig } = require("expo/metro-config"); const { withMonicon } = require("@monicon/metro"); const { loadLocalCollection } = require("@monicon/loader"); const config = getDefaultConfig(__dirname); module.exports = withMonicon(config, { customCollections: { "my-app": loadLocalCollection("assets/icons"), }, });
إنشاء ملف babel.config.js:
module.exports = function (api) { api.cache(true); return { presets: ["babel-preset-expo"], plugins: [["@monicon/babel-plugin"]], }; };
أضف أيقوناتك المخصصة إلى مجلد الأصول/الرموز.
مثال على الأيقونات
تعديل ملف _layout.tsx على النحو التالي:
import { Monicon } from "@monicon/native";( ), }} /> ( ), }} />
قم بتشغيل الأمر التالي لبدء خادم التطوير الخاص بك:
expo start
تنصل: جميع الموارد المقدمة هي جزئيًا من الإنترنت. إذا كان هناك أي انتهاك لحقوق الطبع والنشر الخاصة بك أو الحقوق والمصالح الأخرى، فيرجى توضيح الأسباب التفصيلية وتقديم دليل على حقوق الطبع والنشر أو الحقوق والمصالح ثم إرسالها إلى البريد الإلكتروني: [email protected]. سوف نتعامل مع الأمر لك في أقرب وقت ممكن.
Copyright© 2022 湘ICP备2022001581号-3