@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