Menerima "InvalidCharacterError: String berisi karakter tidak valid" dari mengimpor svg dengan gatsby-plugin-react-svg

Aug 21 2020

Saya menggunakan ikon font-awesome svg, tetapi saya menyadari bahwa mereka mungkin memiliki efek yang signifikan pada LCP situs web saya, jadi saya mencoba untuk menggantinya. Saya masuk ke html saya dan menyalin kode svg, dan memasukkan komponen svg ini ke dalam file svg. Mereka terbuka sebagai gambar di tiruan photoshop saya jadi saya pikir itu harus bagus.

Saat saya mencoba memasukkannya ke dalam halaman saya menggunakan

import FacebookIcon from '../images/svg/facebookF.svg'
import Email from '../images/svg/email.svg'

      <FacebookIcon />
      <Email /> 

Dan menambahkan yang berikut ini ke saya gatsby-config.js(setelah menginstalgatsby-plugin-react-svg

{
  resolve: 'gatsby-plugin-react-svg',
  options: {
    rule: {
      include: "/src/images/svg/"
    }
  }
}

Saya menerima kesalahan

InvalidCharacterError: String contains an invalid character

Kesalahan ini terjadi di MRE saya, yang dapat Anda lihat di repo Github ini . Dalam program saya yang sebenarnya, svg tidak muncul, tetapi halaman web dimuat dengan baik.

Jawaban

1 FerranBuireu Aug 21 2020 at 06:12

Folder yang disertakan adalah ekspresi reguler jadi, folder tersebut hanya boleh berisi satu jalur, /svg/dalam kasus Anda. Selain itu, Anda perlu menghapus tanda kutip ganda (apa yang menyebabkan kesalahan Anda karena itu adalah karakter yang tidak valid):

{
  resolve: 'gatsby-plugin-react-svg',
  options: {
    rule: {
      include: /svg/
    }
  }
}

Kode lainnya terlihat bagus.

Perlu diingat bahwa jika SVG berbagi IDbagian dalamnya, hal itu dapat menyebabkan masalah parah karena akan diganti untuk SVG sebaris berikut. The IDs dalam bentuk SVG harus berbeda untuk setiap vektor.

DrewReese Aug 21 2020 at 06:12

Dari dokumen create-react-app untuk menambahkan gambar SVG sebagai komponen react

Catatan: fitur ini tersedia dengan [email protected]dan lebih tinggi, [email protected]dan lebih tinggi.

https://create-react-app.dev/docs/adding-images-fonts-and-files/

Mencoba

import { ReactComponent as FacebookIcon } from '../images/svg/facebookF.svg';
import { ReactComponent as Email } from '../images/svg/email.svg';

...

  <FacebookIcon />
  <Email />