接收"InvalidCharacterError: String包含无效字符“的svgs与gatsby插件反应svg
接收"InvalidCharacterError: String包含无效字符“的svgs与gatsby插件反应svg
提问于 2020-08-21 06:07:04
我使用字体-令人敬畏的svg图标，但我意识到它们可能会对我的网站的LCP产生重大影响，所以我试图替换它们。我进入我的html并复制svg代码，并将这些svg组件放入svg文件中。它们在我的photoshop仿制品中作为图片打开，所以我认为它们应该是好的。
当我尝试将它们包含在我的页面中时，使用
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只是没有出现，但是网页加载得很好。
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-08-21 06:12:22
包含的文件夹是一个正则表达式，所以它必须只包含一个路径，在您的情况下是/svg/。此外，您还需要删除双引号(导致错误的原因是因为它是无效字符)：
{
resolve: 'gatsby-plugin-react-svg',
options: {
rule: {
include: /svg/
}
}
}剩下的代码看起来不错。
请记住，如果SVG共享内部的任何ID，可能会导致严重的问题，因为它们将被替换为下面的内联SVG。SVG形状中的ID对于每个向量必须是不同的。
Stack Overflow用户
发布于 2020-08-21 06:12:06
从创建- react -app文档中添加SVG图像作为app组件。
注意:这个特性适用于
react-scripts@2.0.0和更高版本，以及react@16.3.0和更高版本。
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 /> 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63517356
复制相关文章
相似问题
腾讯云开发者
