Bileşenimdeki neden kayboldu?

SVGO'nun başlık kaldırma seçeneği varsayılan olarak açıktır. Erişilebilirlik için gerekiyorsa Ayarlar'dan bu seçeneği veya tüm optimizasyonu kapatın.

SVG Dosyalarını Kolayca JSX'e Dönüştürün

SVG işaretlemesini React işlev bileşenine dönüştürür: SVGO, SVG'yi tarayıcınızda optimize eder; ardından SVGR yerel olarak dönüştürür. Öznitelikler camelCase olur (stroke-width → strokeWidth), sayısal ölçüler sayıya dönüşür ve kök <svg> üzerinde {...props} yayılır.

Figma veya Illustrator'dan dışa aktarılan bir simgeyi React bileşenine dönüştürmek.

SVG

SVGO optimizasyonu açık.

Sonuç

JSX

Ne zaman kullanılır?

Figma veya Illustrator'dan dışa aktarılan bir simgeyi React bileşenine dönüştürmek.
SVGR'yi derleme sürecine eklemeden önce SVG'yi nasıl yeniden yazacağını kontrol etmek.

Nasıl kullanılır?

SVG işaretlemesi yapıştırın veya .svg dosyası yükleyin; geçerli SVG olmayan girdiler hata ile reddedilir.
SVGO optimizasyonunu kapatmak veya başlık kaldırma ve yolları birleştirme gibi eklentileri açıp kapatmak için Ayarlar'ı açın. Düzenleyicinin altındaki önizleme özgün ve optimize edilmiş SVG'yi karşılaştırır.
Bileşeni kopyalayın ve SvgComponent adını değiştirin; className, width veya fill değerlerini props olarak geçirin.

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>

React bileşeni (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

Ayrıntılar ve sınırlamalar

SVGO ve SVGR tarayıcınızda yerel olarak çalışır; SVG içeriğiniz yüklenmez. Ortak bir cihaz kullandıktan sonra girdiyi temizleyin.

Varsayılan ayarlarda yorumlar, <title>, <desc> ve düzenleyici üst verileri kaldırılır; yol verileri kısaltılır (M5.000 12.000 L19.000 12.000, M5 12h14 olur). SVG'yi yapıştırıldığı gibi dönüştürmek için optimizasyonu kapatın.

style dizeleri stil nesnelerine, class ise className'e dönüşür.

Çıktı React DOM içindir; react-native-svg için SVG → React Native aracını kullanın.

FAQ

Kök neden width ve height değerlerini koruyor?

SVGO ayarlarında boyutları kaldırma kapalıdır ve SVGR varsayılan seçenekleri kullanır; bu yüzden ölçüler sayı olarak korunur (width={24}). {...props} bunlardan sonra geldiği için props ile geçersiz kılabilirsiniz.

fill="currentColor" CSS ile renk ayarlamamı sağlar mı?

Evet. currentColor korunur, dolayısıyla simge üst öğesinin CSS rengini izler. Yolların içindeki sabit renkler değiştirilmez.

Bileşenimdeki <title> neden kayboldu?

SVGO'nun başlık kaldırma seçeneği varsayılan olarak açıktır. Erişilebilirlik için <title> gerekiyorsa Ayarlar'dan bu seçeneği veya tüm optimizasyonu kapatın.

TypeScript çıktısı var mı?

Hayır. Sayfa tür açıklamaları içermeyen bir JavaScript bileşeni üretir.

Teknik özellikler ve kaynaklar

SVGR belgeleri