SVG → React
ได้ JSX พร้อมวางจากไฟล์ SVG ใดก็ได้ — แอตทริบิวต์ถูกเปลี่ยนชื่อตามที่ React ต้องการ กระจาย props ลงบนอิลิเมนต์ราก และมี TypeScript ให้ถ้าคุณต้องใช้
หรือคลิกเพื่อเลือก — เฉพาะ SVG
ชื่อคอมโพเนนต์มาจากชื่อไฟล์ ดังนั้น arrow-left.svg จะกลายเป็น ArrowLeft
คอมโพเนนต์เดียวกัน กำหนดชนิดเป็น SVGProps<SVGSVGElement>
เฉพาะส่วนมาร์กอัป สำหรับวางลงในคอมโพเนนต์ที่คุณมีอยู่แล้ว
ไอคอนในรูปของคอมโพเนนต์
JSX ดูเหมือนมาร์กอัป แต่จริง ๆ แล้วมันคือ JavaScript แอตทริบิวต์ที่มีขีดกลางอย่าง stroke-width ไม่ใช่ตัวระบุที่ถูกต้อง คำว่า class ชนกับคำสงวน และวงเล็บปีกกาในสไตล์แบบอินไลน์จะถูกอ่านเป็นนิพจน์ SVG ที่คัดลอกตรงมาจากโปรแกรมออกแบบจึงมักคอมไพล์ไม่ผ่านด้วยเหตุผลอย่างน้อยหนึ่งข้อ
ตัวแปลงนี้เปลี่ยนชื่อเฉพาะสิ่งที่จำเป็นต้องเปลี่ยน และปล่อยส่วนที่เหลือไว้อย่างเดิม แอตทริบิวต์ data- และ aria- ยังคงขีดกลางไว้ เพราะ React ส่งต่อมันไปโดยไม่แตะต้อง — การไปเปลี่ยนชื่อพวกนี้เป็นสาเหตุยอดฮิตที่ทำให้ป้ายกำกับด้านการเข้าถึงหายไปเงียบ ๆ
สามขั้นตอน
เลือกไฟล์ .svg — ไฟล์ยังอยู่ในอุปกรณ์ของคุณ
คอมโพเนนต์เต็ม เวอร์ชัน TypeScript หรือ JSX ล้วน ๆ
import เหมือนคอมโพเนนต์อื่น แล้วจัดสไตล์ผ่าน props
ตอบสั้น ๆ
เพื่อให้สิ่งที่คุณส่งเข้ามาเป็นฝ่ายชนะ ใน JSX แอตทริบิวต์ที่เขียนทีหลังจะทับตัวก่อนหน้า ดังนั้นเมื่อวาง spread ไว้ท้ายสุด คุณจึงกำหนด className, width หรือ onClick จากภายนอกได้ ถ้าเอาไว้ข้างหน้า ค่าที่ฝังอยู่ในไฟล์จะกลับไปทับค่าของคุณอย่างเงียบ ๆ
แทนค่า fill หรือ stroke ที่เขียนตายตัวในผลลัพธ์ด้วย currentColor แล้วกำหนดสีผ่าน CSS ที่อิลิเมนต์แม่ตัวใดก็ได้ ถ้าไฟล์มีสีกระจายอยู่หลายโหนด ให้ส่งผ่านตัวเปลี่ยนสี SVG ก่อน — มันเปลี่ยนทุกสีเป็น currentColor ได้ในครั้งเดียว
ไม่ได้โดยตรง React Native ไม่มี DOM การใช้ SVG ที่นั่นต้องอาศัย react-native-svg และชื่ออิลิเมนต์ที่ขึ้นต้นด้วยตัวใหญ่อย่าง Svg และ Path แนวคิดการเปลี่ยนชื่อแอตทริบิวต์ที่แสดงตรงนี้ยังถูกต้อง แต่ส่วน import และแท็กจะต่างออกไป
นั่นคือหน้าตาของไฟล์ต้นฉบับ — SVG ที่ถูกย่อขนาดไว้ก็ยังคงย่ออยู่ เพราะการจัดรูปแบบใหม่เป็นงานคนละส่วน ให้ส่งผ่านตัวจัดรูปแบบ SVG ก่อน แล้วคอมโพเนนต์จะออกมาพร้อมการเยื้องบรรทัดที่อ่านง่าย
ไม่ การแปลงเป็นเพียงงานจัดการสตริงธรรมดาที่ทำในเบราว์เซอร์ของคุณ