Ricezione di "InvalidCharacterError: String contiene un carattere non valido" dall'importazione di svgs con gatsby-plugin-react-svg

Question

Stavo usando icone svg fantastiche per i caratteri, ma mi sono reso conto che potrebbero avere un effetto significativo sull'LCP del mio sito Web, quindi sto cercando di sostituirle. Sono entrato nel mio html e ho copiato il codice SVG e ho inserito questi componenti SVG nei file SVG. Si aprono come immagini nel mio knockoff di Photoshop, quindi ho pensato che dovrebbero essere buoni.

Quando provo a includerli nella mia pagina usando

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

      <FacebookIcon />
      <Email /> 

E aggiungendo quanto segue al mio gatsby-config.js(dopo aver installatogatsby-plugin-react-svg

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

Ricevo l'errore

InvalidCharacterError: String contains an invalid character

---

Questo errore si sta verificando nel mio MRE, che puoi visualizzare su questo repository Github . Nel mio programma attuale gli SVG non venivano visualizzati, ma la pagina web veniva caricata correttamente.

Answer 1

La cartella inclusa è un'espressione regolare quindi, /svg/nel tuo caso , deve contenere un solo percorso . Inoltre, è necessario rimuovere le virgolette doppie (cosa sta causando il tuo errore poiché è un carattere non valido):

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

Il resto del codice sembra buono.

Tieni presente che se l'SVG ne condivide IDall'interno, potrebbe causare gravi problemi poiché verranno sostituiti per il seguente SVG inline. Le IDs all'interno delle forme SVG devono essere diverse per ogni vettore.

Answer 2

Dai documenti di create-react-app per aggiungere immagini SVG come componenti di react

Nota: questa funzione è disponibile con [email protected]e successive e [email protected]e successive.

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

Provare

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

...

  <FacebookIcon />
  <Email />