解决 Gatsby 构建中的 SVG 错误答案

【问题标题】：Troubleshooting SVG error in Gatsby build解决 Gatsby 构建中的 SVG 错误
【发布时间】：2021-04-08 01:45:04
【问题描述】：

我正在尝试让一个简单的 Gatsby 网站上线 -- gatsby develop 工作正常，但在 gatsby build 上我收到以下错误消息：

UNHANDLED REJECTION 
- Error in parsing SVG: 
- Unencoded <
- Line: 0
- Column: 2
- Char: <

我没有明确使用任何 SVG，因此很难解决这个问题 - 有什么建议吗？

我的项目是here，改编自lumen starter theme。

【问题讨论】：

您如何以及在何处使用 SVG 资产？你有一个cpu.svg

标签： node.js reactjs svg gatsby

【解决方案1】：

在您的Icon.js (line 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，您只需将 SVG 隔离在一个必须仅包含 SVG 的单独文件夹中）：

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

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

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

// ...

<Icon />;

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

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

您可以阅读this StackOverflow answer 了解有关在 Gatsby 中处理 SVG 的更多详细信息。

【讨论】：

非常感谢 - 我现在更好地理解了这个问题，但仍在努力弄清楚如何解决它。如果我跟踪正确，实际使用 Icon.js 的 SVG 是从预定义的路径对象（Contacts.js -> getIcon -> icons.js）创建的，所以我不知道如何直接将图标导入为反应组件。我尝试从“联系人”侧边栏中删除所有图标，这似乎应该解决了问题，但我得到了同样的错误。
我添加了两种直接将 SVG 导入为 React 组件的方法。一种使用插件，一种使用内置方式
谢谢，由于某种原因，当我今天早上刚刚重新加载页面（没有图标）时，它工作了，即使它昨晚没有工作