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

แปลงซอร์สโค้ด SVG ที่วางหรืออัปโหลดให้เป็นคอมโพเนนต์ React JSX ที่สะอาดตา พร้อมแอตทริบิวต์แบบ camelCase, ตัวเลือกสำหรับ TypeScript props, forwardRef, React.memo, การรองรับ title เพื่อการเข้าถึง (accessibility), การแปลงสไตล์ให้อยู่ในรูปออบเจกต์ และการตรวจสอบความปลอดภัยของเอาต์พุต

ซอร์สโค้ด SVG

วางองค์ประกอบ <svg> ที่สมบูรณ์ เซิร์ฟเวอร์รองรับสูงสุด 220000 อักขระ

อัปโหลดไฟล์ .svg

การอัปโหลดไฟล์จะเป็นการกรอกข้อมูลในตัวแก้ไขเพื่อดูตัวอย่าง จากนั้นไฟล์ที่อัปโหลดจะถูกนำไปใช้เมื่อคุณกดแปลง

อินพุต <svg>

ปรับมาตรฐาน camelCase

React {...props}

เอาต์พุต คอมโพเนนต์

องค์ประกอบ 0

แอตทริบิวต์ 0

ViewBox -

ชื่อคอมโพเนนต์

ใช้รูปแบบ PascalCase เช่น AlertIcon, BrandMark หรือ LogoGlyph

ตั้งค่าเอาต์พุต

รูปแบบการส่งออก

การจัดการสไตล์อินไลน์

TypeScript props รองรับ forwardRef ครอบด้วย React.memo Accessible title prop ฆ่าเชื้อสคริปต์และตัวจัดการ ใช้ขนาดไอคอน 1em เพิ่ม {...props}

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

เกี่ยวกับ ตัวแปลง SVG เป็น React/JSX

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

วิธีใช้งาน

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

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

ล้างแอตทริบิวต์สำหรับ Reactแอตทริบิวต์ SVG ทั่วไป เช่น stroke-width, fill-rule และ clip-path จะถูกเขียนใหม่เป็น strokeWidth, fillRule และ clipPath

ความสะดวกในการใช้งานคอมโพเนนต์ตัวเลือกเสริมอย่าง {...props}, forwardRef, React.memo, การส่งออกเริ่มต้น (Default Export), การส่งออกตามชื่อ (Named Export) และ TypeScript props ช่วยให้คุณนำเอาต์พุตไปวางในซอร์สโค้ด React ได้ง่ายขึ้น

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

เคล็ดลับสำหรับคอมโพเนนต์ 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 ที่ถูกต้อง

อ้างอิงเนื้อหา หน้าหรือเครื่องมือนี้ว่า:

"ตัวแปลง SVG เป็น React/JSX" ที่ https://MiniWebtool.com/th/ตัวแปลง-svg-เป็น-react-jsx/ จาก MiniWebtool, https://MiniWebtool.com/

โดยทีมงาน miniwebtool อัปเดตล่าสุด: 2026-05-22