在 Gatsby 项目中使用 SVG 文件作为 ReactComponent 的问题

Question

我正在尝试在我的 Gatsby.js 项目中包含 svg 文件。

LogoIcon 组件是这样的：

import React from 'react';
import { ReactComponent as LogoInstagram } from '../assets/img/instagram-logo.svg';

const LogoIcon = () => {
  return (
    <div>
      {}
      <LogoInstagram />
    </div>
  );
};

export default LogoIcon;

我收到此错误：

Error: Element type is invalid: expected a string (for built-in components) or a 
class/function (for composite components) but got: undefined. You likely forgot to export 
your component from the file it's defined in, or you might have mixed up default and named 
imports.

Check the render method of `LogoIcon`.
▶ 20 stack frames were collapsed.
(anonymous function)
/website/.cache/app.js:67
  64 | const preferDefault = m => (m && m.default) || m
  65 | let Root = preferDefault(require(`./root`))
  66 | domReady(() => {
> 67 |   renderer(<Root />, rootElement, () => {
  68 |     apiRunner(`onInitialClientRender`)
  69 |   })
  70 | })

它与 SVG 文件有关还是我遗漏了什么？

Answer 1

有几个步骤可以让它工作：

1. 安装gatsby-plugin-react-svg

2. 将其包含在您的 gatsby-config.js 文件中：

module.exports = {
  plugins: [
   ...
   `gatsby-plugin-react-svg`,
   ...
  ]
}

1. 如果您已经这样做了，只需在不带大括号的情况下导入它：

// import name doesn't matter
import LogoInstagram from '../assets/img/instagram-logo.svg';

4. 将其用作常用组件：

<div>
   <LogoInstagram />
</div>