从使用 gatsby-plugin-react-svg 导入 svg 接收“InvalidCharacterError：字符串包含无效字符”答案

【问题标题】：Receiving "InvalidCharacterError: String contains an invalid character" from importing svgs with gatsby-plugin-react-svg从使用 gatsby-plugin-react-svg 导入 svg 接收“InvalidCharacterError：字符串包含无效字符”
【发布时间】：2020-12-10 12:22:03
【问题描述】：

我使用了字体很棒的 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 只是没有显示，但网页加载正常。

【问题讨论】：

标签： javascript reactjs svg gatsby

【解决方案1】：

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

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

其余代码看起来不错。

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

【讨论】：

有没有办法包含多个路径？如果所有这些路径都以 svg 结尾会怎样（例如 images/comp1/svg、images/comp2/svg ...）
@Sam 您可以尝试，但 Gatsby 将无法基于多个 SVG 文件夹推断和创建组件。此外，更有意义并使您的结构更清晰，以将资产保存在按类型包装的同一文件夹中

【解决方案2】：

来自用于添加 SVG 图像的 create-react-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 />

【讨论】：