javascript - 使用 gatsby-plugin-react-svg 从导入 svg 接收 "InvalidCharacterError: String contains an invalid character"

Question

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

Answer 1

来自用于添加 SVG 图像的 create-react-app 文档作为 react 组件

Note: this feature is available with react-scripts@2.0.0 and higher,and react@16.3.0 and higher.

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 />