Проблема с использованием файлов SVG в качестве ReactComponent в проекте Gatsby - PullRequest
Новая
       17

Проблема с использованием файлов SVG в качестве ReactComponent в проекте Gatsby

0 голосов
/ 04 марта 2020

Я пытаюсь включить файл SVG в свой проект Gatsby. js.

Компонент 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 или я что-то упустил?

1 Ответ

0 голосов
/ 04 марта 2020

Чтобы запустить его, нужно выполнить несколько шагов:

  1. Установить gatsby-plugin-реагировать-svg

  2. Включить в файл gatsby-config.js: 

module.exports = {
  plugins: [
   ...
   `gatsby-plugin-react-svg`,
   ...
  ]
}
Если вы уже сделали это, просто импортируйте его без фигурных скобок : 
// import name doesn't matter
import LogoInstagram from '../assets/img/instagram-logo.svg';
Используйте его как обычный компонент: 
<div>
   <LogoInstagram />
</div>
...