gem-hunter

gatsby-plugin-react-svg

Install

How to use

// In your gatsby-config.js

plugins: [
  {
    resolve: "gatsby-plugin-react-svg",
    options: {
      rule: {
        include: /assets/ // See below to configure properly
      }
    }
  }
];

Configuration

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

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

// ...

<Icon />;

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

import Something from "./path/something.inline.svg";

// ...

<Something />;

.header-background {
  background-image: url(./path/something.svg);
}

Using with typescript

declare module "*.svg" {
  const content: any;
  export default content;
}

SVG-React-Loader options

// In your gatsby-config.js

plugins: [
  {
    resolve: "gatsby-plugin-react-svg",
      options: {
        rule: {
          include: /\.inline\.svg$/,
          options: {
            tag: "symbol",
            name: "MyIcon",
            props: {
              className: "my-class",
              title: "example"
            },
            filters: [value => console.log(value)]
          }
        }
      }
  }
];

  import Fork from "-!svg-react-loader?props[]=className:w-4 h-4!../components/Icons/Fork.inline.svg";

Removing svg props (filters)

{
  resolve: `gatsby-plugin-react-svg`,
  options: {
    rule: {
      include: /images\/.*\.svg/,
      omitKeys: ['xmlnsDc', 'xmlnsCc', 'xmlnsRdf', 'xmlnsSvg', 'xmlnsSodipodi', 'xmlnsInkscape']
      ///OR
      filters: [(value) => { console.log(value); }]
    }
  }
},

Troubleshooting

I get "InvalidCharacterError" overlay in my browser during development

InvalidCharacterError: Failed to execute 'createElement' on 'Document':
The tag name provided ('data:image/svg+xml; ...

I get endless spinner (with an infinite loop in the background) in my browser during development

I get error "Module parse failed" in console

ERROR in ./src/images/some-image.png 1:0
Module parse failed: Unexpected character '�' (1:0)