Recibiendo "InvalidCharacterError: String contiene un carácter no válido" de la importación de svgs con gatsby-plugin-react-svg

Aug 21 2020

Estaba usando íconos svg de fuentes increíbles, pero me di cuenta de que podrían estar teniendo un efecto significativo en el LCP de mi sitio web, así que estoy tratando de reemplazarlos. Entré en mi html, copié el código svg y puse estos componentes svg en archivos svg. Se abren como imágenes en mi imitación de Photoshop, así que pensé que deberían ser buenas.

Cuando trato de incluirlos en mi página usando

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

      <FacebookIcon />
      <Email /> 

Y agregando lo siguiente a mi gatsby-config.js(después de instalargatsby-plugin-react-svg

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

Recibo el error

InvalidCharacterError: String contains an invalid character

Este error está ocurriendo en mi MRE, que puede ver en este repositorio de Github . En mi programa real, los svgs simplemente no aparecían, pero la página web se cargaba bien.

Respuestas

1 FerranBuireu Aug 21 2020 at 06:12

La carpeta incluida es una expresión regular, por lo que solo debe contener una ruta única, /svg/en su caso. Además, debe eliminar las comillas dobles (lo que está causando su error ya que es un carácter no válido):

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

El resto del código se ve bien.

Tenga en cuenta que si el SVG comparte algo IDdentro, puede causar problemas graves, ya que serán reemplazados por el siguiente SVG en línea. Las IDs dentro de las formas SVG deben ser diferentes para cada vector.

DrewReese Aug 21 2020 at 06:12

De los documentos de la aplicación create-react-app para agregar imágenes SVG como componentes de reacción

Nota: esta función está disponible con [email protected]y superior [email protected]y superior.

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

Tratar

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

...

  <FacebookIcon />
  <Email />