javascript 接收“无效字符错误：使用gatsby-plugin-react-svg导入svg时字符串包含无效字符

iovurdzv 于 2023-01-11 发布在 Java

关注(0)|答案(3)|浏览(141)

我用的是字体很棒的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

来源：https://stackoverflow.com/questions/63517356/receiving-invalidcharactererror-string-contains-an-invalid-character-from-imp

3条答案

按热度按时间

kqqjbcuj1#

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

赞(0）回复(0）举报 2023-01-11

aelbi1ox2#

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

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

剩下的代码看起来不错。
请记住，如果SVG共享内部的任何ID，可能会导致严重问题，因为它们将被以下内联SVG替换。SVG形状内部的ID对于每个矢量必须不同。

赞(0）回复(0）举报 2023-01-11

nvbavucw3#

使用React脚本5.0.1+React18.2.0+类型脚本，我必须这样做：

// 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 <Image src={image} />;
};

与文档相反，所以不能保证这是完美的方法，但在我看来足够优雅。
有关custom.d.ts的背景信息，请参见this StackOverflow answer。

赞(0）回复(0）举报 2023-01-11

我来回答

javascript 接收“无效字符错误：使用gatsby-plugin-react-svg导入svg时字符串包含无效字符

3条答案

相关问题

热门标签

最新问答