解决Gatsby构建中的SVG错误

在Icon.js（第14行）文件中，您使用的是<svg>。这导致您的问题：

// @flow strict
import React from 'react';
import styles from './Icon.module.scss';

type Props = {
  name: string,
  icon: {
    viewBox?: string,
    path?: string
  }
};

const Icon = ({ name, icon }: Props) => (
  <svg className={styles['icon']} viewBox={icon.viewBox}>
    <title>{name}</title>
    <path d={icon.path} />
  </svg>
);

export default Icon;

在处理SVG时，我建议使用gatsby-plugin-react-svg或使用React内置用法。

• 随着gatsby-plugin-react-svg你只是为了隔离在一个单独的文件夹中只能包含SVGs）的SVG：

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

  然后将其作为React组件导入：

  import Icon from "./path/assets/icon.svg";
  
  // ...
  
  <Icon />;
  

• React内置用法（仅适用于https://create-react-app.dev/docs/adding-images-fonts-and-files/中的[email protected]更高版本，以及[email protected]更高版本，更多详细信息）：

    import { ReactComponent as FacebookIcon } from '../images/svg/facebookF.svg';
    import { ReactComponent as Email } from '../images/svg/email.svg';
  
    ...
  
      <FacebookIcon />
      <Email /> 
  

由于您是从入门主题扩展而来的，因此请从项目中删除该组件及其正在使用的组件，并根据需要按需添加它。

您可以阅读此StackOverflow答案，以了解有关在盖茨比处理SVG的更多详细信息。