使用gatsby-plugin-react-svg导入svg时收到“InvalidCharacterError：String contains an invalid character”的错误信息。

Question

我之前使用了font-awesome 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存储库中查看它。在我的实际程序中，SVG图像只是没有显示出来，但网页加载得很好。

- Sam

Answer 1

以下是将SVG图像作为React组件添加的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 /> 

- Drew Reese

Answer 2

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

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

代码的其余部分看起来不错。

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

- Ferran Buireu

---

有没有办法包含多个路径？如果所有这些路径都以 svg 结尾（例如 images/comp1/svg，images/comp2/svg ...），该怎么办？ - Sam

@Sam 你可以尝试，但 Gatsby 无法根据多个 SVG 文件夹推断和创建组件。此外，将资产保留在相同文件夹中并按类型包装可以使结构更清晰，更有意义。 - Ferran Buireu

Answer 3

使用 react-scripts 5.0.1 + React 18.2.0 + TypeScript，我需要这样做：

// custom.d.ts (in project root)
declare module "*.svg" {
  const content: string;
  export default content;
}

// MyComponent.tsx
import image from "./image.svg";

const MyComponent = () => {
  return <img src={image} />;
};

与文档相反, 所以不能保证这是完美的方法。不过在我看来，它看起来很优雅。

关于custom.d.ts的背景信息，请参阅这个StackOverflow答案。

- rkok

---

这个但带有<img对我有效。 - Alejo Salvo

这个但是带有<img对我有用 - undefined