Adds svg-react-loader to gatsby webpack config.
Note: the plugin can remove
SVGs from the built-inurl-loaderconfig in case invalid configuration.
npm install --save gatsby-plugin-react-svg
// In your gatsby-config.js
plugins: [
{
resolve: "gatsby-plugin-react-svg",
options: {
rule: {
include: /assets/ // See below to configure properly
}
}
}
];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.svgand process them withsvg-react-loader - name other SVGs (e.g. used in css/scss)
something.svgand process them with the defaulturl-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);
}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.
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";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); }]
}
}
},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.
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.
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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
