Menerima "InvalidCharacterError: String berisi karakter tidak valid" dari mengimpor svg dengan gatsby-plugin-react-svg
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
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 ID
bagian dalamnya, hal itu dapat menyebabkan masalah parah karena akan diganti untuk SVG sebaris berikut. The ID
s dalam bentuk SVG harus berbeda untuk setiap vektor.
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 />