Ham bir SVG'yi React projesine yapıştıran her geliştirici bu sorunları çok iyi bilir.
Ham SVG'ler clip-rule, fill-opacity ve stroke-linecap gibi tire içeren öznitelikler kullanır. React camelCase biçimi gerektirir: clipRule, fillOpacity, strokeLinecap. Tek bir özniteliği atlamak çalışma zamanı hatalarına veya iz sürülmesi güç stil hatalarına neden olur.
Figma ve Sketch, fill="#3B82F6" gibi gömülü renkler içeren SVG'ler dışa aktarır. Her simge tek kullanımlık bir bileşen hâline gelir. Karanlık temalar, fareyle üzerine gelme durumları veya farklı marka renkleri için yeniden kullanmak, klonlamayı ve elle düzenlemeyi zorunlu kılar.
Tasarım araçları dışa aktardıkları her SVG'ye <title>, <defs>, boş <g> grupları ve fazladan öznitelikler ekler. Bu gereksiz kod JSX paketini şişirir ve ayrıştırma süresini yavaşlatır — özellikle onlarca satır içi simge kullanıldığında belirgin şekilde hissedilir.
Sol tarafa SVG yapıştırın, sağ tarafta React bileşenini alın
Hepsi tarayıcıda, anında gerçekleştirilen altı üretim düzeyinde dönüşüm.
Herhangi bir SVG yapıştırın, React bileşeni anında görünür. SVG'den React'e dönüşüm tarayıcıda bir AST dönüşümü olarak çalışır — ağ isteği yok, gecikme yok, dosya boyutu sınırı yok.
TSX modunu etkinleştirin; dönüştürücü dosyanın üstüne otomatik olarak interface IconProps extends React.SVGProps<SVGSVGElement> ekler. Her prop tam olarak yazılır — className, özel öznitelikler, zorunlu tür dönüşümü gerekmez.
SVG'den React'e dönüşümden önce araç, Figma veya Sketch'in dışa aktardığı <title>, <defs>, boş gruplar ve gereksiz öznitelikleri kaldırır; yolları birleştirir ve basitleştirir — SVG'den React'e çıkış boyutunu yüzde 60'a kadar küçültür.
Tailwind modu etkin olduğunda SVG'den React'e dönüştürücü, sabit kodlanmış fill ve stroke renklerini className="fill-current" ve currentColor ile değiştirir. Simgeler üst öğenin metin rengini anında devralır ve her temada mükemmel çalışır.
Tire içeren tüm SVG öznitelikleri — clip-rule, fill-opacity, stroke-linecap, xlink:href — React'in camelCase karşılıklarına otomatik olarak yeniden adlandırılır ve class, className olur. SVG'den React'e çıkış her zaman geçerli JSX'tir.
SVG kök öğesindeki sabit kodlanmış width ve height değerlerini tek tıklamayla kaldırın. SVG'den React'e bileşen CSS veya className prop aracılığıyla boyutlanır, tamamen duyarlı ve üst düzenlemeden kolayca kontrol edilebilir olur.
Ham SVG dışa aktarımından yapıştırmaya hazır React bileşenine 30 saniyeden kısa sürede.
SVG kaynağını Figma, Sketch, bir simge kütüphanesi veya SVG dosyasından kopyalayın ve SVG'den React'e aracının sol paneline yapıştırın. Çok yollu simgeler ve karmaşık çizimler dahil her geçerli SVG'yi kabul eder.
Proje gereksinimlerinize göre çıkış biçimini ve optimizasyonları seçin. Yazılı prop'larla TSX çıkışı için TypeScript'i; SVG'den React'e dönüşümden önce Figma gürültüsünü temizlemek için SVGO'yu; sabit kodlanmış renkleri currentColor ile değiştirmek için Tailwind CSS'yi etkinleştirin.
Sağ panel, siz yazarken SVG'den React'e çıkışı gerçek zamanlı olarak gösterir. React bileşenini panoya göndermek için Kopyala'ya tıklayın ve doğrudan .jsx veya .tsx dosyanıza yapıştırın — biçimlendirme ayarı gerekmez.
İster bir tasarım sistemi inşa edin, ister paket boyutunu optimize edin, ister cilalı simgeler sunun — SVG'den React'e dönüştürücü iş akışınıza uyum sağlar.
Sol tarafa ham SVG yapıştırın, React bileşeni gerçek zamanlı olarak sağda belirir. SVG'den React'e dönüşüm tarayıcıda saf bir AST geçişi olarak çalışır — bekleme yok, sunucu yok, hız sınırı yok.
SVG'den React'e çıkışı tek tıklamayla JSX'ten TSX'e geçirin; interface IconProps extends React.SVGProps<SVGSVGElement> otomatik olarak oluşturulur. Her CSS sınıfı, aria etiketi ve olay işleyicisi tam olarak yazılır; katı modda Next.js veya Vite projelerine hazırdır.
Dönüştürücü, SVG'den React'e dönüşümden önce SVGO sıkıştırması çalıştırır — Figma meta verilerini kaldırır, gereksiz yolları birleştirir, dosya boyutunu yüzde 60'a kadar düşürür. Tailwind modu, sabit kodlanmış fill renklerini currentColor ile değiştirir; böylece her simge CSS geçersiz kılmaları olmadan her temaya uyum sağlar.
SVG'yi React bileşenlerine dönüştürme, TypeScript prop'ları ve SVG optimizasyonu hakkında sık sorulan sorular.
SVG'den React'e; Figma, Sketch veya bir simge kütüphanesinden dışa aktarılan ham SVG dosyalarını yeniden kullanılabilir React işlev bileşenlerine dönüştürmek anlamına gelir. SVG işaretlemesi JSX olur, tire içeren öznitelikler camelCase olur ve bileşen className, width ve aria-label gibi prop'ları kabul eder.
SVG'yi React bileşeni olarak satır içi kullanmak fill ve stroke'u CSS ile kontrol etmeyi, Framer Motion ile bireysel yolları canlandırmayı, erişilebilirlik için ARIA etiketleri eklemeyi ve kullanılmayan simgeleri derleme sırasında kaldırmayı mümkün kılar. <img> etiketi SVG'yi opak bir görüntü olarak ele alır ve bu özelliklerin hiçbirini sunmaz.
Evet. TypeScript geçişini açın; SVG'den React'e çıkış .jsx biçiminden .tsx biçimine geçer. Dönüştürücü, dosyanın üstüne otomatik olarak interface IconProps extends React.SVGProps<SVGSVGElement> oluşturur ve her prop için tam tür kapsamı sağlar.
SVG'den React'e araç, bilinen tüm tire içeren öznitelikleri işler: clip-rule → clipRule, fill-opacity → fillOpacity, stroke-linecap → strokeLinecap, stroke-linejoin → strokeLinejoin, stroke-width → strokeWidth, xlink:href → href, class → className. Çıkış her zaman geçerli JSX'tir.
SVG'den React'e dönüşümden önce araç tarayıcıda bir JavaScript SVGO geçişi çalıştırır; tasarım araçlarının eklediği <title>, <desc>, <defs>, boş <g> öğeleri ve gereksiz sunum özniteliklerini kaldırır, yolları birleştirir ve basitleştirir — daha hafif bir React bileşeni üretir.
Tailwind modu etkin olduğunda SVG'den React'e dönüştürücü, sabit kodlanmış fill="#hex" ve stroke="#hex" özniteliklerini fill="currentColor" ve stroke="currentColor" ile değiştirir ve kök <svg> öğesine className="fill-current" ekler. Simgeler üst öğenin text-color sınıflarını anında devralır, karanlık mod ve tema geçişini sorunsuz hale getirir.
Hayır. SVG'den React'e dönüşümün tamamı tarayıcının JavaScript motorunda işlenir. SVG kaynağı cihazınızı asla terk etmez. Arka uç yok, yükleme yok, kayıt tutma yok, hız sınırı yok.
Evet, ancak çok büyük SVG'lerin (yüzlerce yol) işlenmesi biraz daha uzun sürebilir. SVG'den React'e araç çok yollu simgeleri, kırpma maskelerini, degradeleri, maskeleri ve iç içe geçmiş grupları destekler. Son derece karmaşık çizimler için daha iyi React render performansı elde etmek amacıyla bunları daha küçük bileşenlere bölmeyi düşünün.
Tamamen ücretsiz · Kayıt gerekmez · Yükleme yok · Çevrimdışı destek
