Can't manage to make the plugin work

[Cathaiste]

Hi, I'm building a web app and I would like to use this plugin to use my .svg file on the app but I can't seem to make it works.

The issue I'm getting is InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('http://localhost:8000/static/Blog.7ea27b1f.svg') is not a valid name.

Here is my gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: "Blog"
  },

  plugins: [
    /* ... */ ,

    {
      resolve: "gatsby-plugin-react-svg",
      options: {
        include: "/src/assets/images/"
      }
    }
  ]
};

and here is the file (header.js):

import React from "react";

import HeaderBurger from "./HeaderBurger/HeaderBurger";

import { StyledBar, StyledLink, StyledBrand } from "./Header.styled";

import Blog from "../../../assets/images/Blog.svg";

export default function Header() {
  return (
    <StyledBar>
      <StyledLink to="/" title="Blog">
        <StyledBrand>
          <Blog/>
        </StyledBrand>
      </StyledLink>

      <HeaderBurger />
    </StyledBar>
  );
} 

My working tree is like the next:

• gatsby-config.js
• src folder
  • components folder
  • Layout folder
    • Header folder
    • Header.js
• assets folder
  • images folder
  • blog.js

Version of Gatsby: 1.1.58

I've also tried to import the blog component from "./Blog.svg" and it didn't work. Can I have a little help on this one please ?

[mbalex99]

For gatsby 1.x I had to use v1.1.1 of this plugin. So I installed it using:

yarn add gatsby-plugin-react-svg@1.1.1

My svgs were in src/svg

So then I added to my gatsby.config.js:

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

Then I imported my svg like so:

const MyCoolSvg = require('../svg/my_cool_svg.svg')

<MyCoolSvg/>

[jacobmischka]

Yep, Gatsby v1 requires v ^1.0.0 of this plugin, and v2 v ^2.0.0. Thanks @mbalex99!