Recibiendo "InvalidCharacterError: String contiene un carácter no válido" de la importación de svgs con gatsby-plugin-react-svg
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
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 ID
dentro, puede causar problemas graves, ya que serán reemplazados por el siguiente SVG en línea. Las ID
s dentro de las formas SVG deben ser diferentes para cada vector.
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 />