Получение сообщения «InvalidCharacterError: строка содержит недопустимый символ» при импорте SVG с помощью gatsby-plugin-react-svg

Aug 21 2020

Я использовал иконки svg с отличным шрифтом, но понял, что они могут иметь значительное влияние на LCP моего веб-сайта, поэтому я пытаюсь заменить их. Я вошел в свой html, скопировал код svg и поместил эти компоненты svg в файлы svg. Они открываются как изображения в моей подделке в фотошопе, поэтому я решил, что они должны быть хорошими.

Когда я пытаюсь включить их на свою страницу, используя

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

      <FacebookIcon />
      <Email /> 

И добавив в мой gatsby-config.js(после установкиgatsby-plugin-react-svg

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

Я получаю ошибку

InvalidCharacterError: String contains an invalid character

Эта ошибка происходит в моем MRE, который вы можете просмотреть в этом репозитории Github . В моей реальной программе svgs просто не отображались, но веб-страница загружалась нормально.

Ответы

1 FerranBuireu Aug 21 2020 at 06:12

Включенная папка является регулярным выражением, поэтому /svg/в вашем случае она должна содержать только один путь . Кроме того, вам необходимо удалить двойные кавычки (что вызывает вашу ошибку, поскольку это недопустимый символ):

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

Остальной код выглядит хорошо.

Имейте в виду, что если SVG использует что-либо IDвнутри, это может вызвать серьезные проблемы, так как они будут заменены на следующий встроенный SVG. Символы IDs внутри фигур SVG должны быть разными для каждого вектора.

DrewReese Aug 21 2020 at 06:12

Из документации create-react-app для добавления изображений SVG в качестве компонентов реакции

Примечание: эта функция доступна в версиях [email protected]и выше, [email protected]и выше.

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

Пытаться

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

...

  <FacebookIcon />
  <Email />