Nano Icons: آیکونهای ریاکت نیتیو رو با سرعت فونت رندر میکنه
خلاصهٔ کاملتر
وقتی لیست طولانی با دهها آیکون داری، رندر کردنشون با react-native-svg کار دستت رو سنگین میکنه: هر آیکون یه subtree کامل ریاکت میسازه که باید parse و reconcile بشه. تیم Software Mansion برای حل این مشکل کتابخونهی react-native-nano-icons رو منتشر کرده - یه راه برای رندر فوقسریع آیکونها تو ریاکت نیتیو و Expo، مخصوصاً وقتی یه آیکون کوچیک قراره بارها روی صفحه تکرار بشه (مثل tab bar یا آیکونهای کنار ردیفهای لیست).
مکانیزم کار جالبه: موقع build، فایلهای SVG رو به یه فونت آیکون بهینه تبدیل میکنه؛ موقع رندر، هر آیکون فقط یه glyph متنی نیتیو هست که کلاً از component tree ریاکت رد میشه. یعنی بهجای ساخت و layout کردن یه view کامل برای هر آیکون، همون کاری انجام میشه که برای نوشتن یه حرف لازمه - که خیلی سبکتره.
از آیکونهای چندرنگ هم پشتیبانی میکنه: هر رنگ تو SVG یه لایهی جدا تو فونت میشه و موقع رندر روی هم چیده میشن (خوب برای پرچم کشورها یا لوگوهای برند). استفادهاش هم سادهست:
import { createNanoIconSet } from "react-native-nano-icons";
import glyphMap from "./my-icons.glyphmap.json";
export const Icon = createNanoIconSet(glyphMap);
<Icon name="heart" size={24} color="tomato" />تو بنچمارک رسمی، رندر هزارتا آیکون چندرنگ متفاوت تو یه ScrollView روی iOS با nano-icons در مقایسه با react-native-svg، expo-image و @expo/vector-icons سنجیده شده؛ به گفتهی نویسندهها هم زمان JS Thread و هم UI Thread و هم Microhang (قفل شدن موقت صفحه) بهطور محسوسی کمتر بوده.
چندتا محدودیت هم داره: المانهای و تو SVG پشتیبانی نمیشن، تصویرهای raster داخل SVG (مثل بیتمپ base64) هم قابل تبدیل نیستن، و فقط فایلهای .svg بهعنوان ورودی قبوله. کتابخونه روی ریاکت نیتیو 0.74 به بالا (فقط New Architecture)، iOS، اندروید، وب، Expo Go و tvOS کار میکنه و با لایسنس MIT منتشر شده.
نکات کلیدی:
- بهینه برای آیکونهای کوچیک تکراری تو لیستها و tab barها، نه گرافیکهای پیچیده
- SVGها موقع build به فونت (.ttf) و glyphmap.json تبدیل میشن
- از رندر چندلایه برای آیکونهای چندرنگ مثل پرچم و لوگو پشتیبانی میکنه
- محدودیتها: بدون / و بدون تصویر raster داخل SVG
- نیازمند React Native 0.74+ با New Architecture؛ لایسنس MIT




