يمكن أن تكون إدارة الرموز المخصصة في React Native تحديًا ، خاصة مع الأدوات التقليدية مثل Fontello أو Icomoon. غالبًا ما تفتقر هذه الأدوات إلى التكامل الديناميكي مع الأطر الحديثة ، مما يجعل عملية إضافة أو تحديث الرموز مرهقة وتستغرق وقتًا طويلاً.

يقدم Monicon حلاً حديثًا لهذه التحديات ، مما يوفر طريقة مرنة وفعالة لإدارة الرموز في مشاريعك. دعم الأطر الشهيرة مثل React و React Native.js.js و Vue و Nuxt و Svelte والمزيد ، يبسط Monicon عملية دمج الرموز المخصصة. مع إمكانية الوصول إلى أكثر من 200000 أيقونات من المكتبات الشهيرة مثل تصميم المواد والريش والخط الرائع ، يضمن Monicon أن لديك جميع الأدوات التي تحتاجها لتجربة إدارة أيقونة سلسة وقوية.

لماذا تستخدم Monicon؟

• مكتبة أيقونة ضخمة : يمكنك الوصول إلى أكثر من 200000 أيقونات من مجموعات شهيرة مثل تصميم المواد والريشة والخط رائع.
• أيقونات مخصصة : يمكنك إنشاء أيقونات مخصصة واستخدامها في مشاريعك. Monicon يجعل من السهل إضافة أيقوناتك الخاصة.
• يعمل مع الأدوات الحديثة : يدعم Monicon أدوات مثل Vite و WebPack و Rollup وغيرها ، لذلك فهو جاهز لأي مشروع.
• سريع وفعال : يقوم Monicon بتحميل الرموز بسرعة للحفاظ على تشغيل مشروعك بسلاسة. لا تتخبط أو تتخلف.
• سهل الاستخدام : يعمل مع React و Vue و Svelte و Next.js والأطر الشهيرة الأخرى ، مما يجعل تكامل الأيقونات بسيطًا. يمكنك اكتشاف أيقونات على موقع Icones.
• قابل للتخصيص : يمكنك بسهولة تغيير حجم ولون وميزات أخرى من الرموز لتناسب التصميم الخاص بك.
• التعاون : يساعدك Monicon على التعاون مع المصممين لتسريع عملية التصميم والحصول على نتائج أفضل. يتيح لك Iconify Figma Plugin استخدام الرموز مباشرة في Figma.
• مجاني ومفتوح المصدر : Monicon مجاني في الاستخدام والمفتوح المصدر ، حتى تتمكن من استخدامه في أي مشروع دون قيود.

؟ مستندات Monicon
؟ Monicon Github

1. إنشاء مشروع جديد

قم بتشغيل الأمر التالي في المحطة الخاصة بك لإنشاء مشروع معرض جديد:

npx create-expo-app my-new-app
cd my-new-app

• استبدل تطبيق My-New-App باسم المشروع المفضل لديك.
• عند المطالبة ، اختر قالبًا (على سبيل المثال ، فارغ ، فارغ (TypeScript) ، أو علامات التبويب).

2. تثبيت التبعيات

قم بتشغيل الأمر التالي لتثبيت التبعيات اللازمة:

npm i -D @monicon/metro @monicon/babel-plugin @monicon/loader
npx expo install @monicon/native  react-native-svg

3. إنشاء تكوين المترو

إنشاء ملف 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"),
  },
});

4. إنشاء تكوين بابل

إنشاء ملف babel.config.js:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [["@monicon/babel-plugin"]],
  };
};

5. إضافة أيقونات إلى المشروع

أضف أيقوناتك المخصصة إلى مجلد الأصول/الرموز.

مثال على الأيقونات

• compass.svg
• house.svg

6. تحديث التطبيق/(علامات التبويب)/_ layout.tsx

تعديل ملف _layout.tsx على النحو التالي:

import { Monicon } from "@monicon/native";

 (
      
    ),
  }}
/>
 (
      
    ),
  }}
/>

7. ابدأ خادم التطوير

قم بتشغيل الأمر التالي لبدء خادم التطوير الخاص بك:

expo start

أخير