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

ตัวแปลง SVG เป็น React JSX ช่วยเปลี่ยนไฟล์ SVG ดิบให้เป็นคอมโพเนนต์ React ที่นำกลับมาใช้ใหม่ได้ เครื่องมือนี้สร้างขึ้นสำหรับนักพัฒนาที่ต้องการคอมโพเนนต์ไอคอน เครื่องหมายแบรนด์ ภาพประกอบผลิตภัณฑ์ และทรัพย์สินในระบบการออกแบบ (Design System) ที่สะอาดตาขึ้น โดยไม่ต้องมานั่งแก้ไขทุกแอตทริบิวต์ของ SVG ด้วยตนเอง เพียงวางมาร์กอัป SVG หรืออัปโหลดไฟล์ .svg รูปแบบ UTF-8 เลือกตัวเลือก React ที่คุณต้องการ จากนั้นคัดลอกคอมโพเนนต์ที่สร้างขึ้นไปใช้ในโปรเจกต์ของคุณได้เลย

วิธีใช้งาน

1. วางหรืออัปโหลด SVG วางไฟล์ SVG ที่สมบูรณ์ลงในตัวแก้ไข หรืออัปโหลดไฟล์ .svg รูปแบบ UTF-8
2. ตั้งชื่อคอมโพเนนต์ ป้อนชื่อคอมโพเนนต์ React แบบ PascalCase เช่น AlertIcon หรือ BrandMark
3. เลือกตัวเลือก React เลือกตัวเลือก TypeScript, forwardRef, React.memo, การเข้าถึง title, การแปลงสไตล์, การฆ่าเชื้อสคริปต์ และการกระจาย prop (Prop Spreading)
4. แปลงเป็น JSX คลิก แปลงเป็น React คอมโพเนนต์ เพื่อสร้างโค้ด JSX ที่พร้อมคัดลอก
5. ตรวจสอบและคัดลอก ตรวจสอบสรุปการแปลง คำเตือน และโค้ดที่สร้างขึ้นก่อนคัดลอกไปใช้ในโปรเจกต์ React ของคุณ

สิ่งที่ตัวแปลงนี้จัดการให้

เคล็ดลับสำหรับคอมโพเนนต์ React SVG ที่ดีขึ้น

คงค่า viewBox ดั้งเดิมไว้ทุกครั้งที่ทำได้ เนื่องจากเป็นตัวควบคุมวิธีการขยายขนาดของ SVG สำหรับระบบไอคอน การกำหนด width="1em" และ height="1em" จะช่วยให้ไอคอนสืบทอดขนาดจากข้อความได้ ในขณะที่ยังคงเปิดโอกาสให้ผู้เรียกใช้งานสามารถกำหนดขนาดทับได้ด้วย props ควรใช้ชื่อคอมโพเนนต์แบบ PascalCase ที่สื่อความหมาย, เปิดใช้งาน aria-hidden สำหรับ SVG ที่ใช้ตกแต่งตามความเหมาะสม และใช้ title prop สำหรับไอคอนที่มีความหมายเพื่อสื่อสารข้อมูล

FAQ

ตัวแปลง SVG เป็น React นี้เปลี่ยนอะไรบ้าง?

มันจะวิเคราะห์ SVG XML และเขียนแอตทริบิวต์ SVG ใหม่ให้อยู่ในรูปแบบ JSX ที่เป็นมิตรกับ React รวมถึง className, แอตทริบิวต์ SVG แบบ camelCase, ออบเจกต์สไตล์ที่เป็นตัวเลือก, props, forwardRef, การเข้าถึง title และไวยากรณ์การส่งออก (Export)

ฉันสามารถอัปโหลดไฟล์ SVG ได้ไหม?

ได้ คุณสามารถอัปโหลดไฟล์ .svg รูปแบบ UTF-8 หรือวางมาร์กอัป SVG ก็ได้ ไฟล์ที่อัปโหลดจะถูกอ่านเป็นข้อความและแปลงเป็น JSX บนเซิร์ฟเวอร์

มันช่วยฆ่าเชื้อโค้ด SVG ไหม?

การฆ่าเชื้อ (Sanitizing) ถูกเปิดใช้งานไว้เป็นค่าเริ่มต้น ตัวแปลงจะลบแท็กสคริปต์, ตัวจัดการเหตุการณ์แบบอินไลน์ และลิงก์ javascript: ออก เพื่อให้คอมโพเนนต์ที่สร้างขึ้นมีความปลอดภัยมากขึ้นในการตรวจสอบก่อนนำไปใช้งาน

ทำไมต้องแปลงแอตทริบิวต์สไตล์ให้เป็นออบเจกต์?

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

รูปแบบชื่อคอมโพเนนต์ที่ดีที่สุดคืออะไร?

ใช้รูปแบบ PascalCase เช่น AlertIcon หรือ BrandMark ตัวแปลงจะล้างอักขระที่ไม่ถูกต้องและตรวจสอบให้แน่ใจว่าผลลัพธ์เริ่มต้นด้วยตัวระบุคอมโพเนนต์ React ที่ถูกต้อง