SVG to JSX

SVG to JSX แปลงมาร์กอัป SVG เป็นคอมโพเนนต์ React หรืออิลิเมนต์ JSX ธรรมดา แอตทริบิวต์จะถูกแปลงเป็นชื่อแบบ React (class → className, stroke-width → strokeWidth, fill-rule → fillRule, clip-path → clipPath, xlink:href → xlinkHref) สไตล์อินไลน์จะกลายเป็นออบเจ็กต์ style และ viewBox จะถูกเก็บไว้เสมอเพื่อให้ไอคอนปรับขนาดได้ถูกต้อง

1. 1.วางมาร์กอัป SVG ลากหรือเลือกไฟล์ .svg หรือโหลดตัวอย่าง
2. 2.ตรวจดูตัวอย่างที่ผ่านการกรองและรายการเนื้อหาไม่ปลอดภัยที่ถูกลบ
3. 3.ตั้งชื่อคอมโพเนนต์และเลือกผลลัพธ์ JSX หรือ TSX
4. 4.เปิดหรือปิดตัวห่อ การกระจาย props การลบ width/height และ currentColor ตามต้องการ
5. 5.คัดลอกโค้ดหรือดาวน์โหลดเป็นไฟล์ .jsx หรือ .tsx

การกระจาย props จะส่ง className ขนาด และ props ของอีเวนต์จากคอมโพเนนต์ไปยัง <svg> ราก ส่วน TSX จะเพิ่มชนิด SVGProps<SVGSVGElement> การลบ width และ height ทำให้ CSS ควบคุมขนาดผ่าน viewBox ได้ currentColor แทนที่สี fill และ stroke แบบทึบเพื่อให้ไอคอนใช้สีตามข้อความ โดยไม่แตะ none, transparent, เกรเดียนต์ (url(...)) และตัวแปร CSS การจัดระเบียบช่องว่างจะลบคอมเมนต์และข้อความที่มีแต่ช่องว่างระหว่างอิลิเมนต์ เป็นการล้างที่ปลอดภัย ไม่ใช่ตัวปรับแต่ง SVG แบบเต็ม สำหรับไอคอนตกแต่งให้ปิดแอตทริบิวต์การเข้าถึงเพื่อลบ title, desc, role และ ARIA แล้วเพิ่ม aria-hidden หรือใส่ชื่อเพื่อติดป้ายไอคอนที่มีความหมายด้วย role="img"

อินพุตทุกชิ้นจะถูกกรองก่อนแสดงตัวอย่างและแปลง: <script>, <foreignObject>, ตัวจัดการอีเวนต์อย่าง onclick, URL javascript:, การอ้างอิงรูปภาพหรือทรัพยากรภายนอก และอิลิเมนต์ที่ไม่รองรับจะถูกลบและแจ้งให้ทราบ การประกาศ DOCTYPE และ entity ของ XML จะถูกปฏิเสธ ตัวอย่างแสดงเฉพาะมาร์กอัปที่กรองแล้วในรูปภาพ จึงไม่มีสิ่งใดใน SVG ถูกเรียกใช้ ข้อความ SVG จำกัดที่ 5 MB เนื่องจากอิลิเมนต์ที่ไม่รองรับจะถูกตัดออก ควรเทียบตัวอย่างกับต้นฉบับเมื่อแปลงภาพประกอบที่ซับซ้อน