เกี่ยวกับเครื่องมือนี้
เครื่องมือ SVG เป็นคอมโพเนนต์ JSX แปลง markup SVG ดิบเป็นคอมโพเนนต์ React ที่สะอาด แบบเดียวกับที่ SVGR ทำ แต่ทั้งหมดในเบราว์เซอร์ของคุณโดยไม่มีการอัปโหลด วางไอคอนที่ export จากเครื่องมือออกแบบแล้วได้คอมโพเนนต์ที่คุณ import และจัดสไตล์ได้ มันแยกวิเคราะห์ SVG ด้วย DOMParser และรายงานข้อผิดพลาดที่ชัดเจนหาก markup ผิดรูป
ทุกแอตทริบิวต์ SVG ที่มีขีดกลางหรือ namespace ถูกทำ camelCase เป็นชื่อ React — stroke-width เป็น strokeWidth, fill-rule เป็น fillRule, clip-path เป็น clipPath, stop-color เป็น stopColor, xlink:href เป็น xlinkHref, xmlns:xlink เป็น xmlnsXlink — ขณะที่แอตทริบิวต์ data-* และ aria-* ถูกปล่อยไว้ตามเดิม สตริง inline style กลายเป็น style object, element ว่างอย่าง path และ circle ถูกปิดตัวเอง และ prop ถูกกระจายลงบน root <svg {...props}> คอมโพเนนต์จึงยังปรับแต่งได้ ตัวสลับที่เลือกได้ให้คุณแทนค่า fill และ stroke ที่กำหนดตายตัวด้วย currentColor (ไอคอนจึงสืบทอดสีข้อความ), ตัด width และ height ออกเพื่อให้ปรับขนาดตามคอนเทนเนอร์ และห่อคอมโพเนนต์ด้วย forwardRef เพื่อเปิดเผย node <svg> ที่อยู่เบื้องหลัง
เลือกผลลัพธ์ JavaScript หรือ TypeScript: รุ่น TypeScript กำหนดชนิด prop เป็น React.SVGProps<SVGSVGElement> และเมื่อเปิด forwardRef ใช้ forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>> คอมโพเนนต์ถูกสร้างเป็น arrow function ที่ export (export const Icon = (props) => (...)) พร้อมชื่อและการเยื้องที่คุณเลือก พร้อมวางลงในโมดูลไอคอน