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

10 浏览
0 Comments

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

我之前使用了font-awesome的svg图标，但我意识到它们可能对我的网站的LCP产生了显著影响，所以我正在尝试替换它们。我进入了我的html文件，复制了svg代码，并将这些svg组件放入了svg文件中。它们在我的photoshop仿制品中作为图像打开，所以我觉得它们应该没问题。

当我尝试在我的页面上包含它们时，使用以下代码：

import FacebookIcon from '../images/svg/facebookF.svg'
import Email from '../images/svg/email.svg'

并在我的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图标只是没有显示出来，但网页加载正常。

0

3 答案

0 Comments

问题出现的原因是使用gatsby-plugin-react-svg导入svg时出现"InvalidCharacterError: String contains an invalid character"错误。解决方法是在项目根目录下的custom.d.ts文件中声明svg模块，并导出字符串类型的内容。然后在需要使用svg的组件中，通过import语句导入svg文件，并使用标签将其作为图片展示出来。

具体代码如下：

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

需要注意的是，这种解决方法与文档中的方式有所不同，不能保证这是完美的解决方法，但在我看来，这种方式足够简洁优雅。

关于custom.d.ts文件的背景信息，可以参考这个StackOverflow回答：https://stackoverflow.com/a/45887328/3018750。

我在我的项目中尝试了这种方式，并使用标签成功展示了svg文件。

0
0 Comments

问题的原因是在导入SVG时出现了"InvalidCharacterError: String contains an invalid character"错误。这个错误是因为代码中包含了无效的字符，即双引号。

解决这个问题的方法是将代码中的双引号去掉，并确保被包含的文件夹路径是一个正则表达式，并且只包含一个路径，例如"/svg/"。修复后的代码如下：

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

需要注意的是，如果SVG文件中包含任何相同的ID，可能会引发严重的问题，因为它们将被替换为内联SVG中的后续ID。每个矢量图形中的ID必须是不同的。

如果需要包含多个路径，可以尝试将这些路径都以"svg"结尾，例如"images/comp1/svg"、"images/comp2/svg"等。但是Gatsby无法根据多个SVG文件夹自动创建组件，所以更好的做法是将所有的资源文件都放在同一个文件夹下，按类型进行分类。

以上就是关于导入SVG时出现"InvalidCharacterError: String contains an invalid character"错误的原因和解决方法的内容。希望对你有帮助！

0
0 Comments

问题原因：在使用 gatsby-plugin-react-svg 导入 SVG 文件时，可能会收到 "InvalidCharacterError: String contains an invalid character" 的错误提示。

解决方法：根据 create-react-app 文档中提供的方法，可以尝试以下步骤来解决该问题：

1. 确保使用的是 react-scripts 的 0.0 版本及以上，以及 react 的 3.0 版本及以上。

2. 在代码中使用 import 语句导入 SVG 文件，并将其作为 React 组件使用。示例如下：

import { ReactComponent as FacebookIcon } from '../images/svg/facebookF.svg';
import { ReactComponent as Email } from '../images/svg/email.svg';
// 在组件中使用导入的 SVG 组件

通过以上步骤，可以解决使用 gatsby-plugin-react-svg 导入 SVG 文件时可能出现的 "InvalidCharacterError: String contains an invalid character" 错误。

0