从使用 gatsby-plugin-react-svg 导入 svg 收到“InvalidCharacterError: String contains an invalid character”

IT技术 javascript reactjs svg gatsby
2021-05-26 02:57:26

我正在使用字体很棒的 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 repo上查看。在我的实际程序中，svgs 没有显示，但网页加载正常。

2个回答

包含的文件夹是一个正则表达式，因此，/svg/在您的情况下，它只能包含一个路径。此外，您需要删除双引号（是什么导致您的错误，因为它是一个无效字符）：

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

其余的代码看起来不错。

请记住，如果 SVGID在内部共享任何内容，则可能会导致严重问题，因为它们将被以下内联 SVG 替换。所述ID的SVG形状内部s必须是对于每个向量不同。

来自 create-react-app 文档，用于将 SVG 图像添加为React 组件

注意：此功能适用于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 />
其它你可能感兴趣的问题
上一篇Recharts 不会自动计算 YAxis 刻度 下一篇在 ReactJs 中渲染子组件时如何重新加载子组件的数据