Получение сообщения «InvalidCharacterError: строка содержит недопустимый символ» при импорте SVG с помощью gatsby-plugin-react-svg
Я использовал иконки 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 просто не отображались, но веб-страница загружалась нормально.
Ответы
Включенная папка является регулярным выражением, поэтому /svg/
в вашем случае она должна содержать только один путь . Кроме того, вам необходимо удалить двойные кавычки (что вызывает вашу ошибку, поскольку это недопустимый символ):
{
resolve: 'gatsby-plugin-react-svg',
options: {
rule: {
include: /svg/
}
}
}
Остальной код выглядит хорошо.
Имейте в виду, что если SVG использует что-либо ID
внутри, это может вызвать серьезные проблемы, так как они будут заменены на следующий встроенный SVG. Символы ID
s внутри фигур SVG должны быть разными для каждого вектора.
Из документации 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 />