Lewati ke konten
Alat konversi

Konversi Berkas SVG ke JSX dengan Mudah

Mengubah markup SVG menjadi komponen fungsi React: SVGO mengoptimalkan SVG di browser Anda, lalu SVGR mengonversinya secara lokal di browser Anda. Atribut diubah menjadi camelCase (stroke-width menjadi strokeWidth), ukuran numerik menjadi angka, dan {...props} disebarkan pada elemen akar <svg>.

Mengubah ikon yang diekspor dari Figma atau Illustrator menjadi komponen React.

SVG

JSX

Kapan menggunakannya

  • Mengubah ikon yang diekspor dari Figma atau Illustrator menjadi komponen React.
  • Memeriksa bagaimana SVGR menulis ulang SVG sebelum menambahkan SVGR ke alur build.

Cara penggunaan

  1. Tempelkan markup SVG atau muat file .svg; masukan yang bukan SVG valid ditolak dengan kesalahan.
  2. Buka Pengaturan untuk menonaktifkan optimasi SVGO atau mengaktifkan/menonaktifkan plugin seperti hapus judul atau gabungkan path; pratinjau di bawah editor membandingkan SVG asli dan yang telah dioptimalkan.
  3. Salin komponen dan ganti nama SvgComponent; teruskan className, width, atau fill sebagai 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>

Komponen 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

Detail dan batasan

SVGO dan SVGR berjalan secara lokal di browser Anda. Markup SVG Anda tidak diunggah ke server konversi.

Dengan pengaturan default, komentar, <title>, <desc>, dan metadata editor dihapus, serta data path dipersingkat (M5.000 12.000 L19.000 12.000 menjadi M5 12h14). Nonaktifkan optimasi untuk mengonversi SVG persis seperti yang ditempelkan.

String style menjadi objek style dan class menjadi className.

Hasil ditujukan untuk React DOM; gunakan SVG ke React Native untuk react-native-svg.

FAQ

Mengapa akar tetap memiliki width dan height?

Opsi hapus dimensi dinonaktifkan dalam pengaturan SVGO dan SVGR menggunakan opsi default, sehingga dimensi dipertahankan sebagai angka (width={24}). Timpa melalui props, karena {...props} berada setelahnya.

Apakah fill="currentColor" memungkinkan saya mengatur warna dari CSS?

Ya. currentColor dipertahankan sehingga ikon mengikuti color CSS induknya. Warna yang ditulis langsung dalam path tidak diganti.

Mengapa <title> hilang dari komponen saya?

Opsi hapus judul SVGO aktif secara default. Nonaktifkan di Pengaturan, atau nonaktifkan seluruh optimasi, jika memerlukan <title> untuk aksesibilitas.

Apakah tersedia keluaran TypeScript?

Tidak. Halaman menghasilkan komponen JavaScript tanpa anotasi tipe.

Spesifikasi dan referensi