@svgr/plugin-jsx


Transforms SVG into JSX.

Install

``
npm install --save-dev @svgr/plugin-jsx
`

Usage

.svgrrc

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

How does it work?

@svgr/plugin-jsx consists in three phases:

- Parsing the SVG code using svg-parser
- Converting the HAST into a Babel AST
- Applying @svgr/babel-preset transformations

Applying custom transformations

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

`js
// .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:

- @svgr/babel-plugin-add-jsx-attribute
- @svgr/babel-plugin-remove-jsx-attribute
- @svgr/babel-plugin-remove-jsx-empty-expression
- @svgr/babel-plugin-replace-jsx-attribute-value
- @svgr/babel-plugin-svg-dynamic-title
- @svgr/babel-plugin-svg-em-dimensions
- @svgr/babel-plugin-transform-react-native-svg
- @svgr/babel-plugin-transform-svg-component`

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

License

MIT