أداة للمطورين / 26
محوّل SVG إلى React JSX / TSX
حوّل ترميز SVG المتجهي إلى كود React JSX أو TypeScript TSX منظم ونظيف ومكوّنات جاهزة للاستخدام.
محوّل SVG إلى React JSX / TSX: يحوّل TOEA سمات SVG بصيغة kebab-case إلى camelCase المتوافقة مع React، ويحوّل الأنماط المضمّنة إلى كائنات JavaScript، ثم يغلّف عنصر SVG. يعمل 100% محليًا في المتصفح، من دون رفع أي ملفات إلى الخادم.
- الفئة
- أدوات المطورين
- مرات التشغيل
- في المتصفح
- التكلفة
- مجاني · بلا تسجيل
- التوفر
- جاهز للاستخدام
جعل الرمز يتصرف مثل النص
يسهل إعادة استخدام مكوّن الرمز عندما يستمد لونه وحجمه من موضعه. استبدل ألوان fill أو stroke الثابتة بـ currentColor ليتبع الرمز لون النص المحيط، وأزل width وheight مع الإبقاء على viewBox، حتى يحدد CSS أو className الحجم. يؤدي تمرير الملف أولًا عبر منظف SVG إلى إزالة البيانات الوصفية للمحرر التي كانت ستنتهي في الحزمة.
المعرّفات والأنماط وإتاحة الوصول
تتم الإشارة إلى التدرجات والأقنعة ومسارات القص بواسطة id. عند عرض المكوّن نفسه مرتين، تحتوي الصفحة على معرّفات مكررة، لذلك قد تشير النسخة الثانية إلى تدرج النسخة الأولى. أنشئ معرّفات فريدة باستخدام useId من React عندما يستخدم الرمز هذه العناصر.
يكسر عنصر <style> داخل SVG صياغة JSX، لأن الأقواس المعقوفة فيه تُقرأ كتعبيرات؛ انقل هذه القواعد إلى السمات أو إلى ورقة أنماط. أضف aria-hidden="true" إلى الرمز الزخرفي، أما الرمز الذي يحمل معنى فأضف إليه role="img" وعنصر <title>.
طريقة الاستخدام
- الصق ترميز SVG الخام.
- اضبط اسم المكوّن، وواجهات TypeScript، وتمرير الخصائص.
- انسخ كود مكوّن React الجاهز للاستخدام.
الخصوصية والقيود
يُنفَّذ تحويل الترميز بالكامل داخل JavaScript في جهة العميل.
أدوات ذات صلة
الأسئلة الشائعة
هل يدعم TypeScript؟
نعم، ينشئ مكوّنات React مكتوبة بالكامل من النوع React.FC<React.SVGProps<SVGSVGElement>>.
أداة مجانية · عدد مرات الاستخدام في المتصفح · لا يتطلب حسابًا