SVG'den JSX'e Dönüştürücü

SVG'den JSX'e Dönüştürücü nedir?

SVG'den JSX'e Dönüştürücü, sıradan SVG işaretlemesini doğrudan bir bileşene yapıştırabileceğiniz geçerli React JSX'e çeviren ücretsiz, tarayıcı içi bir araçtır. React, DOM özniteliklerini camelCase olarak bekler (strokeWidth, clipPath, fillRule), class yerine className kullanır ve style özniteliğini dize yerine camelCase özelliklerden oluşan bir nesne olarak ister — bu araç bunların hepsini otomatik olarak düzeltir. Ön uç geliştiriciler ve tasarımcılar, Figma, Illustrator veya bir ikon setinden ikon dışa aktarırken kullanır. İsteğe bağlı temizliği açarak yorumları, düzenleyici meta verilerini ve XML bildirimlerini kaldırabilir; çıktının satır içi JSX mi yoksa React.SVGProps ile tiplenmiş bir fonksiyon, memo() veya forwardRef bileşeni mi olacağını seçebilirsiniz.

SVG'den JSX'e Dönüştürücü nasıl kullanılır

1. SVG işaretlemenizi giriş kutusuna yapıştırın veya bir .svg dosyasını bırakma alanına bırakın.
2. Dönüştürülen JSX'i aşağıdaki çıktı kutusunda okuyun — öznitelikler camelCase olur, class className'e dönüşür, satır içi style bir style nesnesine dönüşür ve boş etiketler kendiliğinden kapanır.
3. Ayarlar'ı açın ve bir Bileşen çıktısı seçin: satır içi JSX, fonksiyon bileşeni, memo() bileşeni veya forwardRef bileşeni.
4. Sarmalayıcıda kullanılan adı denetlemek için Bileşen adı alanını ayarlayın (örneğin MyIcon).
5. Bileşeni React.SVGProps ile tiplemek için TypeScript props'u açın veya önce yorumları ve düzenleyici meta verilerini kaldırmak için SVG'yi temizle'yi açın.
6. JSX'i kopyalamak için Kopyala'ya tıklayın, ardından React veya Next.js projenize yapıştırın.

Örnekler

<svg viewBox="0 0 24 24"><path stroke-width="2" style="fill:none;stroke-linecap:round" d="M4 12h16"/></svg>

<svg viewBox="0 0 24 24"><path strokeWidth="2" style={{ fill: "none", strokeLinecap: "round" }} d="M4 12h16" /></svg>

<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>

export const MyIcon = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(function MyIcon(props, ref) {
  return (
    <svg viewBox="0 0 24 24" ref={ref} {...props}><circle cx="12" cy="12" r="10" /></svg>
  );
});

Sıkça sorulan sorular

Dönüştürücü SVG'mde neyi değiştirir?

Tireli ve ad alanlı öznitelikleri React'in camelCase biçimine dönüştürür (stroke-width'i strokeWidth'e, xlink:href'i xlinkHref'e), class'ı className'e çevirir, satır içi bir style dizesini camelCase anahtarlı bir JSX style nesnesine yeniden yazar ve path ile rect gibi boş öğeleri geçerli JSX olmaları için kendiliğinden kapatır.

Bileşen çıktısı seçenekleri nasıl çalışır?

İşaretlemeyi her yere koymak için satır içi JSX'i seçin ya da girdiğiniz Bileşen adıyla onu fonksiyon, memo() veya forwardRef bileşeni olarak sarın. Bir forwardRef bileşeni, kök svg'ye eklenen bir ref alır. Herhangi bir sarmalayıcıyı React.SVGProps ile tiplemek ve {...props} yaymak için TypeScript props'u açın.

Satır içi stilleri dönüştürür mü?

Evet. style="fill:red;stroke-width:2" gibi bir öznitelik, style={{ fill: "red", strokeWidth: "2" }} gibi bir JSX style nesnesine yeniden yazılır; özellik adları camelCase olur ve değerler dize olarak kalır. CSS özel özellikleri (--var) dize anahtarları olarak korunur.

SVGO tarzı temizlik ne yapar?

SVG'yi temizle açıkken araç, XML bildirimlerini, DOCTYPE'ı, yorumları, <metadata>'yı, inkscape: ve sodipodi: gibi düzenleyici ad alanlarını ve svg'nin version özniteliğini kaldırır, ardından boşlukları daraltır — hepsi JSX dönüşümü çalışmadan önce.

SVG'm bir yere yüklenir mi?

Hayır. Bir dosya bırakmak veya işaretleme yapıştırmak, tamamen tarayıcınızda çalışan saf bir dize dönüşümü çalıştırır, bu yüzden SVG'niz asla bir sunucuya gönderilmez ve araç çevrimdışı çalışır.