CODEWITHSUNDEEP
reactjssvggatsby
Burak
Burak

Reputation: 5764

Problem with using SVG files as ReactComponent in Gatsby project

I'm trying to include svg file in my Gatsby.js project.

LogoIcon component is like this:

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

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

export default LogoIcon;

I'm getting this error:

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 | })

is it related to the SVG file or am I missing something?

Upvotes: 1

Views: 2172

Answers (1)

awran5
awran5

Reputation: 4546

There are a few steps in order to get it to work:

  1. Install gatsby-plugin-react-svg

  2. Include it in your gatsby-config.js file:

module.exports = {
  plugins: [
   ...
   `gatsby-plugin-react-svg`,
   ...
  ]
}
  1. If you already did that, just import it without curly brackets: 
// import name doesn't matter
import LogoInstagram from '../assets/img/instagram-logo.svg';
  1. Use it as a usual component:
<div>
   <LogoInstagram />
</div>

Upvotes: 2

Related Questions