我使用了字体很棒的 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 只是没有显示,但网页加载正常。
最佳答案
来自用于添加 SVG 图像的 create-react-app 文档作为 react 组件
Note: this feature is available with
react-scripts@2.0.0
and higher, andreact@16.3.0
and higher.
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 />
关于javascript - 使用 gatsby-plugin-react-svg 从导入 svg 接收 "InvalidCharacterError: String contains an invalid character",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63517356/