Alat developer / 26

Pengonversi SVG ke React JSX / TSX

Ubah markup vektor SVG menjadi kode React JSX atau TypeScript TSX yang rapi dan terkomponen.

Pengonversi SVG ke React JSX / TSX: TOEA mengonversi atribut SVG kebab-case menjadi camelCase ala React, mengonversi inline styles menjadi objek JS, dan membungkus elemen SVG. Berjalan 100% lokal di browser Anda tanpa upload file ke server.

Kategori: Tools developer
Dijalankan: Di browser Anda
Biaya: Gratis · tanpa daftar
Ketersediaan: Siap digunakan

Nama Komponen

TypeScript (React.FC & SVGProps)

Teruskan props ({...props})

Input Markup SVG Mentah

Komponen React JSX / TSX

import React from "react";

export const CheckIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-check" {...props}>
  <polyline points="20 6 9 17 4 12"></polyline>
</svg>
);

Membuat ikon berperilaku seperti teks

Komponen ikon paling mudah digunakan ulang jika warna dan ukurannya mengikuti tempat ikon tersebut dipasang. Ganti warna fill atau stroke yang ditulis secara hard-code dengan currentColor agar ikon mengikuti warna teks di sekitarnya, lalu hapus width dan height sambil mempertahankan viewBox, sehingga CSS atau className dapat mengatur ukurannya. Jalankan file melalui pembersih SVG terlebih dahulu untuk menghapus metadata editor yang jika tidak akan ikut masuk ke bundle.

ID, style, dan aksesibilitas

Gradien, mask, dan clip path direferensikan oleh id. Jika komponen yang sama dirender dua kali, halaman akan memiliki ID duplikat, sehingga salinan kedua mungkin menunjuk ke gradien milik salinan pertama. Buat ID unik dengan React useId saat ikon menggunakannya.

Elemen <style> di dalam SVG membuat JSX gagal diproses karena kurung kurawal di dalamnya dibaca sebagai ekspresi; pindahkan aturan tersebut ke atribut atau stylesheet. Untuk ikon dekoratif, tambahkan aria-hidden="true"; untuk ikon yang menyampaikan makna, tambahkan role="img" dan <title>.

Cara menggunakannya

Tempel markup SVG mentah.
Atur nama komponen, interface TypeScript, dan penerusan prop.
Salin kode komponen React yang siap pakai.

Privasi & batasan

Transformasi markup dijalankan sepenuhnya di JavaScript sisi klien.

Alat terkait

Pertanyaan umum

Apakah mendukung TypeScript?

Ya, ini menghasilkan komponen React.FC<React.SVGProps<SVGSVGElement>> yang sepenuhnya bertipe.

Alat gratis · berjalan di browser anda · tanpa perlu akun