Geliştirici aracı / 26

SVG'den React JSX / TSX Dönüştürücü

SVG vektör işaretlemesini temiz, bileşen tabanlı React JSX veya TypeScript TSX koduna dönüştürün.

SVG'den React JSX / TSX Dönüştürücü: TOEA, SVG kebab-case özniteliklerini React camelCase biçimine dönüştürür, satır içi stilleri JS nesnelerine çevirir ve SVG öğesini kapsar. Sunucuya hiçbir dosya yüklenmeden tarayıcınızda %100 yerel olarak çalışır.

Kategori: Geliştirici araçları
Çalıştırma sayısı: Tarayıcınızda
Maliyet: Ücretsiz · kayıt gerekmez
Kullanılabilirlik: Kullanıma hazır

Bileşen adı

TypeScript (React.FC & SVGProps)

İletilen proplar ({...props})

Ham SVG işaretleme girişi

React JSX / TSX bileşeni

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>
);

Simgenin metin gibi davranmasını sağlama

Bir simge bileşeninin yeniden kullanımı, rengini ve boyutunu yerleştirildiği yerden almasıyla kolaylaşır. Sabit kodlanmış fill veya stroke renklerini currentColor ile değiştirin; böylece simge çevresindeki metnin rengini izler. viewBox değerini koruyarak width ve height değerlerini kaldırın; boyutu CSS veya bir className belirlesin. Dosyayı önce SVG temizleyiciden geçirmek, aksi takdirde paketinizde yer alacak düzenleyici meta verilerini kaldırır.

Kimlikler, stiller ve erişilebilirlik

Degradeler, maskeler ve kırpma yollarına id ile başvurulur. Aynı bileşeni iki kez oluşturduğunuzda sayfada yinelenen kimlikler oluşur; bu nedenle ikinci kopya birincinin degradelerine başvurabilir. Simge bunları kullanıyorsa React'in useId özelliğiyle benzersiz kimlikler oluşturun.

SVG içindeki bir <style> öğesi JSX'i bozar; çünkü süslü parantezleri ifadeler olarak okunur. Bu kuralları özniteliklere veya bir stil sayfasına taşıyın. Dekoratif bir simgeye aria-hidden="true"; anlam taşıyan bir simgeye ise role="img" ve bir <title> ekleyin.

Nasıl kullanılır?

Ham SVG işaretlemesini yapıştırın.
Bileşen adını, TypeScript arabirimlerini ve prop aktarımını yapılandırın.
Kullanıma hazır React bileşeni kodunu kopyalayın.

Gizlilik ve sınırlamalar

İşaretleme dönüşümü tamamen istemci tarafındaki JavaScript içinde gerçekleştirilir.

İlgili araçlar

Sık sorulan sorular

TypeScript destekleniyor mu?

Evet, tam tür tanımlı React.FC<React.SVGProps<SVGSVGElement>> bileşenleri oluşturur.

Ücretsiz araç · tarayıcınızda kez çalıştırma · hesap gerekmez