Custom transformations

SVGR exposes a simple API but it is extendable, you can extend it to create complex SVG transformations.

Install

npm install @svgr/plugin-jsx
# or use yarn
yarn add @svgr/plugin-jsx

Usage

.svgrrc

{
"plugins": ["@svgr/plugin-jsx"]
}

How does it work?

@svgr/plugin-jsx consists in three phases:

Applying custom transformations

You can extend the Babel config applied in this plugin using jsx.babelConfig config path:

// .svgrrc.js
module.exports = {
jsx: {
babelConfig: {
plugins: [
// For an example, this plugin will remove "id" attribute from "svg" tag
[
'@svgr/babel-plugin-remove-jsx-attribute',
{
elements: ['svg'],
attributes: ['id'],
},
],
],
},
},
}

Several Babel plugins are available:

If you want to create your own, reading Babel Handbook is a good start!