แปลง SVG เป็น JSX/TSX
แปลงโค้ด SVG เป็น React JSX/TSX components ได้ทันที ทำความสะอาดโค้ด SVG, ปรับแต่ง path และสร้าง React component ที่พร้อมใช้งาน เครื่องมือแปลง SVG เป็น JSX ออนไลน์ฟรี
Loading tool...
แปลง SVG เป็น JSX/TSX คืออะไร?
SVG to JSX Converter คือเครื่องมือที่แปลงโค้ด SVG ดิบเป็น React JSX หรือ TSX components โดยอัตโนมัติ ช่วยปรับแต่ง paths ลบ attributes ที่ไม่จำเป็น และจัดรูปแบบ output ให้พร้อมใช้งานใน frontend applications สมัยใหม่ได้ทันที
ประโยชน์หลัก
- สร้าง React component ทันที
- ปรับแต่ง SVG อัตโนมัติ (SVGO)
- รองรับ TypeScript (TSX)
- รวม TypeScript props interface
- ประมวลผลฝั่งไคลเอนต์
กรณีการใช้งาน
- •แปลงจากดีไซเนอร์เป็น React
- •สร้างคลังไอคอน
- •ปรับแต่ง inline SVGs
- •ย้าย HTML เก่าไป React
วิธีแปลง SVG เป็น JSX/TSX
- วางโค้ด SVG: คัดลอกและวางโค้ด HTML SVG ดิบของคุณลงในช่องรับข้อมูล
- ตั้งค่าตัวเลือก: เลือกการตั้งค่า เช่น TypeScript หรือ JavaScript รูปแบบเครื่องหมายคำพูด หรือปรับปรุงผ่าน SVGO
- สร้าง Component: โค้ดจะถูกประมวลผลอัตโนมัติ ตรวจสอบที่แผงผลลัพธ์เพื่อรับ React component ที่สามารถนำไปใช้ได้เลย
- คัดลอกหรือดาวน์โหลด: คลิกปุ่มคัดลอกเพื่อบันทึกโค้ดเข้าคลิปบอร์ดของคุณ หรือดาวน์โหลดไฟล์เก็บไว้
คุณสมบัติหลัก
- ปรับปรุง SVGs ด้วย SVGO
- รองรับ React JSX และ TypeScript TSX ดั้งเดิม
- สร้าง React functional components ตรงตามมาตรฐาน
- แก้ไวยากรณ์ SVG เป็น camelCase ตามรูปแบบ React
- จัดรูปแบบโค้ดด้วย Prettier ในตัว
- ประมวลผลฝั่งไคลเอนต์ ไม่มีการอัปโหลดข้อมูลของคุณ