3.3.0 • Published 1 year ago

gatsby-plugin-react-svg v3.3.0

Weekly downloads
86,061
License
MIT
Repository
github
Last release
1 year ago

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.

@hacktion/test-libraryportfolio-gatsbysomoy-portfoliogatsby-universal@jayellul/gatsby-theme-craftcmsgatsby-fassetjam-cms-starter@afuh/gatsby-theme-up42@up42/gatsby-theme-up42@leptest/gatsby-netlify-cmstest-theme-shawacademygatsby-theme-c32brawl-capped-webpage@rodriguesmyron/gatsby-theme-podcastgatsby-theme-utopix@kimchico/gatsby-themegatsby-theme-testlandonschropp.comgatsby-theme-fencinggit-repo-blog-generator@everything-registry/sub-chunk-1722@amorist/gatsby-theme-antd@addono/gatsby-theme-intro@arene/gatsby-theme-intro@arene/gatsby-theme-intro-academic@aryan03/gatsby-theme-intro@arturthemaslov/gatsby-theme-intro-maslovboost-cms@defite/gatsby-theme-defite@bridgetool/gatsby-theme-dev@caldera-digital/caldera-www@ccerda0520/gatsby-theme-woocommercerocketbelttemp-gatsby-theme@cratosw/gatsby-antd@hashinteractive/gatsby-theme-reactor@iamgarrett/gatsby-theme-dmcm@iamgarrett/gatsby-theme-gmcm@indicius/design-system@antv/gatsby-theme-antv@arcblock/gatsby-config@arcblock/gatsby-theme-docs@arcblock/gatsby-theme-www@exposuredesign/gatsby-theme-seen-alpha@adamwebster/tabini@lambdacurry/gatsby-theme@jcaguirre/gatsby-shopify-theme@joe-fuentes/gatsby-theme-intro@lehnfeld/gatsby-theme-introgatsby-theme-advancedgatsby-theme-amaranthgatsby-starter-unogatsby-theme-art-graphgatsby-starter-hero-bloggatsby-theme-documentsgatsby-theme-dromedargatsby-theme-emulsifygatsby-theme-conegatsby-theme-cone-ocgatsby-theme-consumer-sitegatsby-theme-w3fgatsby-theme-registrygatsby-theme-sarvasyagatsby-theme-wtfgatsby-theme-zhgatsby-theme-personal-bloggatsby-theme-materialgatsby-theme-introgatsby-theme-intro-personalgatsby-theme-iotgatsby-theme-minimalistgatsby-theme-nestxgatsby-theme-potatogatsby-theme-rdfsitegatsby-theme-hansingatsby-theme-mdx-suite-basegatsby-introgatsby-sleek@mmintel/gatsby-theme-indiegram@mknudsen01/gatsby-theme-buildo@lundgren/gatsby-theme-lundgren-blog@philpl/gatsby-theme-mdx-deck@jaenjs/jaen@octopusthink/ghost-ship@prg/gatsby-theme-bedrock@opensumi/gatsby-theme@packdigital/gatsby-theme-ripperoni@packdigital/gatsby-theme-ripperoni-core@pusdn/gatsby-theme-antv@rafaelquintanilha/gatsby-theme-countdown@scaleph/scaleph-gatsby-themejesielviana-gatsby-theme-minimal-blog@silentsky/gatsby-theme-intro@robinguan/gatsby-mdx-mui-theme@rohs/gatsby-theme-intro@somoykhan/gatsby-theme-bootstrap-portfolio@spraoi/gatsby-config@spiredigital1/chameleon@rennehir/gatsby-theme-personal-site@up42/gatsby-theme-core
3.3.0

1 year ago

3.1.0

2 years ago

3.0.1

3 years ago

3.0.0

4 years ago

2.1.2

5 years ago

2.1.1

5 years ago

2.1.0

5 years ago

2.0.0

6 years ago

2.0.0-beta1

6 years ago

1.1.1

6 years ago

1.1.0

6 years ago