محوّل SVG إلى React
حوّل ملفات SVG إلى مكوّنات React تلصقها في مشروعك. بلغة TypeScript أو JavaScript، مع الخاصيتين size وtitle.
أفلت ملفات SVG أو مجلدًا هناتبقى الملفات على جهازك
لا توجد ملفات بعد
تظهر الملفات المحوّلة هنا. أفلت ملفات SVG في الأعلى، أو جرّب بأيقونات نموذجية.
كيف تحوّل SVG إلى React
- أفلت ملفات SVGأضف ملفات أو مجلدًا، أو الصق رمز SVG.
- اختر TypeScript أو JavaScriptحدّد المقاس الافتراضي، وهل تتبع الأيقونات أحادية اللون لون النص.
- انسخ أو نزّلانسخ مكوّنًا، أو نزّل كل الملفات مع ملف فهرس في ملف ZIP واحد.
أدوات مجانية أخرى
كل الأدوات- SVG إلى PNGصور PNG حادة بأي مقاس، ملف واحد أو مئات.
- PNG إلى SVGحوّل PNG أو JPG إلى رسم متجهي نظيف.
- PNG إلى ICOملفات .ico لأيقونات المواقع بمقاسات من 16 إلى 256 بكسل.
- أيقونات المواقع والتطبيقاتمجموعات للموقع وChrome وiOS وAndroid.
- SVG إلى Reactمكوّنات JSX بأنواع، جاهزة للصق.
- محسّن SVGملفات SVG أصغر دون فقدان أي شيء مرئي.
- SVG spriteأيقونات كثيرة في ملف sprite.svg واحد.
- صانع الملصقاتملفات ملصقات لـ WhatsApp وTelegram.
أسئلة
كيف يبدو المكوّن؟
دالة واحدة لكل أيقونة تُرجع SVG بصيغة JSX. تقبل size وtitle وأي خاصية SVG مثل className أو onClick.
كيف أغيّر لون الأيقونة؟
الأيقونات أحادية اللون تستخدم currentColor، فتأخذ لون النص المحيط بها. غيّره بالـ CSS أو بخاصية color.
هل يعمل مع Next.js؟
نعم. المكوّنات React خالصة بلا اعتماديات، فتعمل في Next.js وVite وRemix.
ماذا يحدث للتدرّجات والمعرّفات؟
تُجعل المعرّفات فريدة باستخدام useId في React، فيمكن وضع أيقونات كثيرة بتدرّجات في صفحة واحدة دون تعارض.