Custom transformations

Extend the core of SVGR to creates complex transformations.


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



"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
elements: ['svg'],
attributes: ['id'],

Several Babel plugins are available:

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

Edit this page on GitHub