Difference with airbnb/babel-plugin-inline-react-svg

[kopax]

One of my coworker did work with https://github.com/airbnb/babel-plugin-inline-react-svg in a distributed package.

I've told him to use svgr because it is now the default with create-react-app.

I would like to ask the same question as in #74 , how to deal when you are writing a distributed package?

What is the difference between this plugin and the babel plugin?

So far we didn't find a working way to import *.svg with webpack and rollup when it comes to distributed package.

[gregberge]

SVGR doesn't have a Babel plugin because it doesn't not work in sync mode (Prettier, etc...). But it is plan to support this way too.

[kopax]

I think now I can get an explanation:

It is better to use babel-plugin-inline-react-svg because it will export your svg as a react component during transpilation. This way, your svg react won't depend of any plugin anymore.

What's the difference with this plugin?

This plugin work with webpack, the svg is converted to react using loaders, and after the production build, you won't need any plugin as well. This fits if you are in an application, not in a module.

What about modules?

rollup can be used to create modules, and svgr have a module for it. If you want to bundle your code with rollup, it is perfect, but if you want to transpile your lib with babel, and have an aside configuration for producing a bundle with rollup, this plugin doesn't fit.

We personally choose to use @svgr/webpack for all svg that are imported in application, and we use babel-plugin-inline-react-svg for svg imported within modules.

We do not use @svgr/rollup only because it doesn't fit well with babel-plugin-inline-react-svg, but it would be nice if it could.