[英]Receiving "InvalidCharacterError: String contains an invalid character" from importing svgs with gatsby-plugin-react-svg
I was using font-awesome svg icons, but I realized that they might be having a significant effect on the LCP of my website, so I'm trying to replace them.我使用的字体很棒 svg 图标,但我意识到它们可能会对我网站的 LCP 产生重大影响,所以我正在尝试替换它们。 I went into my html and copied the svg code, and put these svg components into svg files.
我进入我的 html 并复制了 svg 代码,并将这些 svg 组件放入 svg 文件中。 They open as images in my photoshop knockoff so I figured they should be good.
它们在我的 Photoshop 仿制品中以图像形式打开,所以我认为它们应该不错。
When I try to include them in on my page using当我尝试将它们包含在我的页面上时
import FacebookIcon from '../images/svg/facebookF.svg'
import Email from '../images/svg/email.svg'
<FacebookIcon />
<Email />
And adding the following to my gatsby-config.js
(after installing gatsby-plugin-react-svg
并将以下内容添加到我的
gatsby-config.js
(安装gatsby-plugin-react-svg
之后
{
resolve: 'gatsby-plugin-react-svg',
options: {
rule: {
include: "/src/images/svg/"
}
}
}
I receive the error我收到错误
InvalidCharacterError: String contains an invalid character
This error is happening in my MRE, which you can view on this Github repo .这个错误发生在我的 MRE 中,您可以在这个Github repo上查看。 In my actual program the svgs were just not showing up, but the web page loaded fine.
在我的实际程序中,svg 只是没有显示,但 web 页面加载正常。
From the create-react-app docs for adding SVG images as react components从 create-react-app 文档添加 SVG 图像作为反应组件
Note: this feature is available with
react-scripts@2.0.0
and higher, andreact@16.3.0
and higher.注意:此功能适用于
react-scripts@2.0.0
及更高版本,以及react@16.3.0
及更高版本。
https://create-react-app.dev/docs/adding-images-fonts-and-files/ https://create-react-app.dev/docs/adding-images-fonts-and-files/
Try尝试
import { ReactComponent as FacebookIcon } from '../images/svg/facebookF.svg';
import { ReactComponent as Email } from '../images/svg/email.svg';
...
<FacebookIcon />
<Email />
The included folder is a regular expression so, it must only contain a single path, /svg/
in your case.包含的文件夹是一个正则表达式,因此它必须只包含一个路径,在您的情况下为
/svg/
。 In addition, you need to remove the double quotes (what is causing your error since it's an invalid character):此外,您需要删除双引号(导致错误的原因是它是无效字符):
{
resolve: 'gatsby-plugin-react-svg',
options: {
rule: {
include: /svg/
}
}
}
The rest of the code looks good.代码的rest看起来不错。
Keep in mind that if the SVG shares any ID
inside, it may cause severe issues since they will be replaced for the following inlined SVG. The ID
s inside the SVG shapes must be different for each vector.请记住,如果 SVG 在内部共享任何
ID
,则可能会导致严重问题,因为它们将被替换为以下内联的 SVG。每个向量的 SVG 形状内的ID
必须不同。
With react-scripts 5.0.1 + React 18.2.0 + TypeScript, I'm having to do this:使用 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 <Image src={image} />;
};
Contrary to the docs , so can't promise this is the perfect way to do it. 与文档相反,所以不能 promise 这是做到这一点的完美方法。 Looks elegant enough to me though.
虽然对我来说看起来足够优雅。
For background info about custom.d.ts
, see this StackOverflow answer .有关
custom.d.ts
的背景信息,请参阅此 StackOverflow 答案。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.