แปลง 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 ในตัว
- ประมวลผลฝั่งไคลเอนต์ ไม่มีการอัปโหลดข้อมูลของคุณ
คำถามที่พบบ่อย
ฉันจะแปลง SVG เป็น React component ได้อย่างไร?
เพียงวางโค้ด SVG ของคุณลงในช่องป้อนข้อมูล เครื่องมือจะปรับปรุงรูปร่างและสร้างโค้ด JSX/TSX React component ให้คุณทันที
เครื่องมือนี้รองรับ TypeScript หรือไม่?
รองรับ คุณสามารถเปิดตัวเลือก TS เพื่อสร้างโค้ด TSX ที่มีการตรวจสอบประเภทและ SVG properties interface สำหรับ component ได้
โค้ด SVG จะถูกปรับปรุงโดยอัตโนมัติไหม?
ใช่ เครื่องมือของเราใช้ SVGO เพื่อทำความสะอาดเส้นทางการทำงานที่ไม่จำเป็น, การตั้งค่ารูปแบบ และแอตทริบิวต์ส่วนเกินโดยอัตโนมัติ เพื่อให้ได้ผลลัพธ์ที่ดีที่สุด