نحوه اضافه کردن آیکون های سفارشی در React Native در سال 2025

Summarize this content to 400 words in Persian Lang
مدیریت آیکون های سفارشی در React Native می تواند چالش برانگیز باشد، به خصوص با ابزارهای سنتی مانند Fontello یا Icomoon. این ابزارها اغلب فاقد یکپارچگی پویا با چارچوب‌های مدرن هستند و فرآیند افزودن یا به‌روزرسانی آیکون‌ها را سخت و زمان‌بر می‌سازد.

Monicon یک راه حل مدرن برای این چالش ها ارائه می دهد و روشی انعطاف پذیر و کارآمد برای مدیریت نمادها در پروژه های شما ارائه می دهد. Monicon با پشتیبانی از چارچوب های محبوب مانند React، React Native، Next.js، Vue، Nuxt، Svelte و غیره، فرآیند یکپارچه سازی نمادهای سفارشی را ساده می کند. Monicon با دسترسی به بیش از 200000 نماد از کتابخانه‌های مشهور مانند Material Design، Feather و Font Awesome اطمینان می‌دهد که همه ابزارهای مورد نیاز برای یک تجربه مدیریت یکپارچه و قدرتمند آیکون را در اختیار دارید.

چرا از Monicon استفاده کنیم؟

کتابخانه آیکون بزرگ: به بیش از 200000 آیکون از مجموعه های معروف مانند Material Design، Feather و Font Awesome دسترسی پیدا کنید.

آیکون های سفارشی: می توانید آیکون های سفارشی ایجاد کنید و از آنها در پروژه های خود استفاده کنید. Monicon اضافه کردن نمادهای خود را آسان می کند.

با ابزارهای مدرن کار می کند: Monicon از ابزارهایی مانند Vite، Webpack، Rollup و دیگران پشتیبانی می کند، بنابراین برای هر پروژه ای آماده است.

سریع و کارآمد: Monicon آیکون ها را به سرعت بارگیری می کند تا پروژه شما به خوبی اجرا شود. بدون سوسو زدن یا تاخیر.

آسان برای استفاده: با React، Vue، Svelte، Next.js و سایر فریم ورک‌های محبوب کار می‌کند و یکپارچه‌سازی نمادها را ساده می‌کند. شما می توانید نمادها را در وب سایت Icones کشف کنید.

قابل تنظیم: به راحتی می توانید اندازه، رنگ و سایر ویژگی های آیکون ها را متناسب با طرح خود تغییر دهید.

همکاری: Monicon به شما کمک می کند تا با طراحان برای سرعت بخشیدن به روند طراحی و گرفتن نتایج بهتر همکاری کنید. پلاگین Iconify Figma به شما امکان می دهد از آیکون ها به طور مستقیم در Figma استفاده کنید.

رایگان و متن باز: Monicon رایگان و متن باز است، بنابراین می توانید بدون محدودیت در هر پروژه ای از آن استفاده کنید.

📕 اسناد Monicon💻 Monicon GitHub

1. یک پروژه جدید ایجاد کنید

برای ایجاد یک پروژه Expo جدید، دستور زیر را در ترمینال خود اجرا کنید:

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

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

جایگزین کنید my-new-app با نام پروژه دلخواه شما
وقتی از شما خواسته شد، یک الگو را انتخاب کنید (به عنوان مثال، blank، blank (TypeScript)، یا tabs).

2. Dependencies را نصب کنید

برای نصب وابستگی های لازم دستور زیر را اجرا کنید:

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

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

3. Metro Config را ایجاد کنید

ایجاد یک 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 را ایجاد کنید

ایجاد یک babel.config.js فایل:

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

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

5. آیکون ها را به پروژه اضافه کنید

آیکون های سفارشی خود را به assets/icons پوشه

نمادهای نمونه

6. به روز رسانی app/(tabs)/_layout.tsx

را اصلاح کنید _layout.tsx به صورت زیر فایل کنید:

import { Monicon } from “@monicon/native”;

<Tabs.Screen
name=”index”
options={{
title: “Home”,
tabBarIcon: ({ color }) => (
<Monicon size={28} name=”my-app:house” color={color} />
),
}}
/>
<Tabs.Screen
name=”explore”
options={{
title: “Explore”,
tabBarIcon: ({ color }) => (
<Monicon size={28} name=”my-app:compass” color={color} />
),
}}
/>

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

7. سرور توسعه را راه اندازی کنید

دستور زیر را برای راه اندازی سرور توسعه خود اجرا کنید:

expo start

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نهایی

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

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"),
  },
});

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

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

<Tabs.Screen
  name="index"
  options={{
    title: "Home",
    tabBarIcon: ({ color }) => (
      <Monicon size={28} name="my-app:house" color={color} />
    ),
  }}
/>
<Tabs.Screen
  name="explore"
  options={{
    title: "Explore",
    tabBarIcon: ({ color }) => (
      <Monicon size={28} name="my-app:compass" color={color} />
    ),
  }}
/>

expo start