แปลงไฟล์ SVG เป็น JSX ได้ง่ายๆ

แปลงมาร์กอัป SVG เป็นฟังก์ชันคอมโพเนนต์ React โดย SVGO ปรับ SVG ให้เหมาะสมในเบราว์เซอร์ แล้ว SVGR แปลงต่อบนอุปกรณ์ในเบราว์เซอร์ แอตทริบิวต์ใช้ camelCase (stroke-width เป็น strokeWidth) ขนาดที่เป็นตัวเลขจะเปลี่ยนเป็นค่าตัวเลข และกระจาย {...props} บน <svg> ราก

แปลงไอคอนที่ส่งออกจาก Figma หรือ Illustrator เป็นคอมโพเนนต์ React

SVG

เปิดใช้งานการปรับแต่ง SVGO แล้ว

ผลลัพธ์

JSX

เหมาะกับงานแบบไหน

แปลงไอคอนที่ส่งออกจาก Figma หรือ Illustrator เป็นคอมโพเนนต์ React
ตรวจว่า SVGR จะเขียน SVG ใหม่อย่างไรก่อนเพิ่ม SVGR ในกระบวนการบิลด์

วิธีใช้

วางมาร์กอัป SVG หรือโหลดไฟล์ .svg หากไม่ใช่ SVG ที่ถูกต้องจะถูกปฏิเสธพร้อมข้อผิดพลาด
เปิดการตั้งค่าเพื่อปิดการปรับด้วย SVGO หรือเปิดปิดปลั๊กอิน เช่น ลบ title หรือรวม paths ตัวอย่างด้านล่างตัวแก้ไขเปรียบเทียบ SVG ต้นฉบับกับฉบับปรับแล้ว
คัดลอกคอมโพเนนต์และเปลี่ยนชื่อ SvgComponent ส่ง className, width หรือ fill ผ่าน props

SVG

<!-- Generator: Adobe Illustrator -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <title>Minus</title>
  <path fill="none" stroke="currentColor" stroke-width="2.000" stroke-linecap="round" d="M5.000 12.000 L19.000 12.000"/>
</svg>

คอมโพเนนต์ React (JSX)

import * as React from "react"
const SvgComponent = (props) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={24}
    height={24}
    viewBox="0 0 24 24"
    {...props}
  >
    <path
      fill="none"
      stroke="currentColor"
      strokeLinecap="round"
      strokeWidth={2}
      d="M5 12h14"
    />
  </svg>
)
export default SvgComponent

รายละเอียดและข้อจำกัด

SVGO และ SVGR ทำงานบนอุปกรณ์ในเบราว์เซอร์ มาร์กอัป SVG ของคุณไม่ถูกอัปโหลดไปยังเซิร์ฟเวอร์แปลงไฟล์

ค่าเริ่มต้นจะลบคอมเมนต์ <title>, <desc> และเมทาดาทาจากตัวแก้ไข พร้อมย่อข้อมูลพาธ (M5.000 12.000 L19.000 12.000 เป็น M5 12h14) ปิดการปรับให้เหมาะสมเพื่อแปลง SVG ตามที่วาง

สตริง style เปลี่ยนเป็นออบเจ็กต์ style และ class เปลี่ยนเป็น className

ผลลัพธ์ใช้กับ React DOM สำหรับ react-native-svg ให้ใช้เครื่องมือแปลง SVG เป็น React Native

FAQ

ทำไมรากยังมี width และ height?

การลบขนาดปิดอยู่ในการตั้งค่า SVGO และ SVGR ใช้ตัวเลือกเริ่มต้น จึงคงขนาดเป็นตัวเลข (width={24}) คุณแทนค่าผ่าน props ได้เพราะ {...props} อยู่หลังค่าเหล่านั้น

fill="currentColor" ทำให้กำหนดสีจาก CSS ได้หรือไม่?

ได้ currentColor จะคงอยู่ ไอคอนจึงใช้ color ใน CSS ขององค์ประกอบแม่ ส่วนสีที่ระบุค่าตายตัวในพาธจะไม่ถูกแทนที่

ทำไม <title> จึงหายไปจากคอมโพเนนต์?

SVGO เปิดการลบ title ตามค่าเริ่มต้น ปิดตัวเลือกนี้ในการตั้งค่า หรือปิดการปรับให้เหมาะสมทั้งหมด หากต้องใช้ <title> เพื่อการเข้าถึง

มีผลลัพธ์ TypeScript หรือไม่?

ไม่มี หน้านี้ส่งออกคอมโพเนนต์ JavaScript ที่ไม่มีคำกำกับชนิดข้อมูล

ข้อกำหนดและแหล่งอ้างอิง

เอกสาร SVGR