Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

gatsby-plugin-react-svg

Package Overview
Dependencies
Maintainers
1
Versions
11
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

gatsby-plugin-react-svg

Adds svg-react-loader to gatsby webpack config.

  • 3.3.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

gatsby-plugin-react-svg npm version

Adds svg-react-loader to gatsby webpack config.

Note: the plugin can remove SVGs from the built-in url-loader config in case invalid configuration.

Install

npm install --save gatsby-plugin-react-svg

How to use

// In your gatsby-config.js

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

Configuration

The rule plugin option can be used to pass rule options. If either include or exclude options are present, svg-react-loader will use them and url-loader will be re-enabled with the inverse.

The following configuration uses svg-react-loader to process SVGs from a path matching /assets/, and url-loader to process SVGs from everywhere else.

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

From now on you can import SVGs and use them as Components:

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

// ...

<Icon />;

Another common configuration:

  • name SVGs used in React components like something.inline.svg and process them with svg-react-loader
  • name other SVGs (e.g. used in css/scss) something.svg and process them with the default url-loader
{
  resolve: 'gatsby-plugin-react-svg',
  options: {
    rule: {
      include: /\.inline\.svg$/
    }
  }
}

In React components:

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

// ...

<Something />;

In styles file:

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

Using with typescript

To use SVGs with Typescript, create a custom type definition like this:

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

Make sure the file is contained in your tsconfig.json include.

SVG-React-Loader options

Any of the svg-react-loader query parameters can be passed down via the webpack config by including an options prop within the rule prop.

// 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)]
          }
        }
      }
  }
];

They can also be defined at the import level:

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

Removing svg props (filters)

Unwanted SVG props can be removed with filters. Since filters are quite complex this plugin adds a simple key omitKeys to allow end users to quickly remove props that are problematic from their svg files.

{
  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

Example of this error:

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

It's likely that you use SVG in your React component, that is processed by url-loader instead of svg-react-loader due to incorrect configuration.

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

It's likely that some of your SVGs used in css/sass files are processed by svg-react-loader instead of url-loader due to incorrect configuration.

I get error "Module parse failed" in console

Example of this error:

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

In case you see such error, it's likely that you configured exclude/include rule options incorrectly. Please check configuration section above.

Keywords

FAQs

Package last updated on 15 Nov 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc