Import SVG as a component in Gatsby

Question

I've seen the following solution:

import { ReactComponent as Img } from 'path/to/file.svg'

But in Gatsby, this doesn't work. I know exist plugins for this, but maybe it can be done more easily.

Impious

Answer 1

As you said, there are plugins to achieve this, which means a cleaner code (not the full SVG tag inlined in the component) with the same final result. Using gatsby-plugin-react-svg plugin you just need to import your SVG like this:

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

To install, you only need to add the dependency using npm or yarn and in your gatsby-config.js use this snippet:

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

Note that /assets/ is an including rule based on a regular expression so the value must be your SVG folder (i.e: /svg/) and must only contain .svg files. In other words, if your path is /images/svg/ your including rule can only contain /svg/ (you can also add the full path but you'll need to escape slashes).

Afterward, you will need to style the SVG if their inline styles don't apply.

---

If you want to follow the non-plugin approach you can simply use a React-based approach, just creating a component that returns the SVG:

export const YourSvgComponent = () => (
  <svg
    version="1.1"
    baseProfile="full"
    width="300"
    height="200"
    xmlns="http://www.w3.org/2000/svg"
  >
    <rect width="100%" height="100%" fill="red" />
    <circle cx="150" cy="100" r="80" fill="green" />
    <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">
      SVG
    </text>
  </svg>
);

Now you just need to import it and use it.

Phyllys

gatsby-node.js or gatsby-config.js? – Bleach

Do you have any idea why the svg might just not be appearing? The div that it is inside is empty – Bleach

These are the files I'm using github.com/samgermain/somefiles . I'll try to make an MRE and post a new questions – Bleach

The SVG is not loading? The SVG folder must only contain SVG files – Phyllys

Well I made one, but it gets a different error – Bleach

Non plugin approach doesn’t work in Gatsby. – Depoliti

Answer 2

1. Add new package:

npm install gatsby-plugin-react-svg

or

yarn add gatsby-plugin-react-svg

2. Configure at gatsby-config.js:

    {
      resolve: 'gatsby-plugin-react-svg',
      options: {
        rule: {
          include: /\.inline\.svg$/,
        },
      },
    },

Here's an example of what this file might look like when completed

module.exports = {
  siteMetadata: {
    title: `Gatsby`,
  },
  plugins: [
    {
      resolve: 'gatsby-plugin-react-svg',
      options: {
        rule: {
          include: /assets/,
        },
      },
    },
  ],
};

3. Rename your files to something like example.inline.svg

4. Import:

import Illustration from './illustration.inline.svg'

5. Usage:

<Illustration className="example" />

All the information from official Gatsby guide

Din

Answer 3

This is because you are using a setup that has SVGR installed by default.

You can easily get this to work by installing this SVGR plugin for Gatsby.

npm install @svgr/webpack gatsby-plugin-svgr

Then add it to your Gatsby config:

// gatsby-config.js
module.exports = {
  plugins: [
    'gatsby-plugin-svgr',
  ],
}

And use it as you mentioned in your question:

import { ReactComponent as Img } from 'path/to/file.svg'

I have just tested it and it works great!

Fastigiate

Answer 4

Just do like this...

import YourDesiredName from 'path/to/file.svg'

Subbasement

Not exactly. This you can use as src of img tag. And this method: import { ReactComponent as Img } from 'path/to/file.svg' allows you to import inline svg. – Impious