ตัวแปลง SVG เป็น JSX/React

แปลงโค้ด SVG เป็นคอมโพเนนต์ React JSX จัดการการเปลี่ยนชื่อแอตทริบิวต์และการจัดรูปแบบ

Component:

Wrap as Component

SVG

JSX / React

เกี่ยวกับการแปลง SVG เป็น JSX

ไฟล์ SVG มีแอตทริบิวต์ที่ไม่ถูกต้องใน JSX เช่น stroke-width และ fill-rule เครื่องมือนี้แปลง SVG เป็น JSX ที่เข้ากันได้กับ React โดยเปลี่ยนชื่อแอตทริบิวต์เป็น camelCase และจัดการความแตกต่างอื่นๆ

𝕏 Twitter in LinkedIn

ให้คะแนนเครื่องมือนี้

4.8 / 5 · 55 คะแนน

เครื่องมือเพิ่มเติม

JSXHTML เป็น JSX TWCSS เป็น Tailwind 🖼️ตัวแปลงภาพ Base64 JSจัดรูปแบบ JS/HTML

อัปเดตข่าวสาร

รับเคล็ดลับการพัฒนาและเครื่องมือใหม่ทุกสัปดาห์

ไม่มีสแปม ยกเลิกได้ตลอดเวลา

Enjoy these free tools?

☕Buy Me a Coffee

วิธีใช้งาน

วางโค้ด SVG ของคุณในช่องป้อนข้อมูล
เครื่องมือจะแปลงแอตทริบิวต์ทั้งหมดเป็นรูปแบบ JSX โดยอัตโนมัติ
ตรวจสอบคอมโพเนนต์ React ที่สร้างขึ้น
คัดลอกโค้ดไปยังโปรเจกต์ React ของคุณ

กรณีใช้งาน

แปลงไอคอน SVG เป็นคอมโพเนนต์ React
รวมกราฟิก SVG เข้ากับแอปพลิเคชัน React
สร้างไลบรารีไอคอนที่ใช้ซ้ำได้ใน React
ย้ายสินทรัพย์ SVG ไปยังโปรเจกต์แบบคอมโพเนนต์

คำถามที่พบบ่อย

ทำไมต้องแปลง SVG เป็น JSX?

React ต้องใช้แอตทริบิวต์ camelCase แทน kebab-case เช่น stroke-width กลายเป็น strokeWidth ใน JSX

โครงสร้าง SVG ถูกรักษาไว้ไหม?

ใช่ อิลิเมนต์ SVG ทั้งหมดและลำดับชั้นถูกรักษาไว้ เฉพาะชื่อแอตทริบิวต์ที่เปลี่ยนเป็นรูปแบบที่เข้ากันได้กับ JSX

ใช้ผลลัพธ์เป็นคอมโพเนนต์ React ได้ไหม?

ได้ ผลลัพธ์เป็นคอมโพเนนต์ React พร้อมใช้งานที่ส่งออกไอคอน SVG

รองรับไฟล์ SVG ที่ซับซ้อนไหม?

ได้ เครื่องมือนี้จัดการไฟล์ SVG ที่ซับซ้อนพร้อม gradient, transformation, clipping path และ filter