gatsby-plugin-svgr-loader []
gatsby-plugin-react-svg equivalent but using @svgr/webpack
instead.
Adds @svgr/webpack
to gatsby webpack config.
Note: the plugin can remove
SVG
s from the built-inurl-loader
config in case invalid configuration.
Install
npm install --save gatsby-plugin-svgr-loader
How to use
// In your gatsby-config.js
plugins: [
{
resolve: "gatsby-plugin-svgr-loader",
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, @svgr/webpack
will use them and url-loader
will be re-enabled with the inverse.
The following configuration uses @svgr/webpack
to process SVGs from a path matching /assets/
, and url-loader
to process SVGs from everywhere else.
{
resolve: 'gatsby-plugin-svgr-loader',
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@svgr/webpack
- name other SVGs (e.g. used in css/scss)
something.svg
and process them with the defaulturl-loader
{
resolve: 'gatsby-plugin-svgr-loader',
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);
}