@svgr/plugin-jsx (5.5.0)
Published 2026-02-24 13:51:19 +00:00 by atheaadmin
Installation
@svgr:registry=npm install @svgr/plugin-jsx@5.5.0"@svgr/plugin-jsx": "5.5.0"About this package
@svgr/plugin-jsx
Transforms SVG into JSX.
Install
npm install --save-dev @svgr/plugin-jsx
Usage
.svgrrc
{
"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-presettransformations
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:
@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
Dependencies
Dependencies
| ID | Version |
|---|---|
| @babel/core | ^7.12.3 |
| @svgr/babel-preset | ^5.5.0 |
| @svgr/hast-util-to-babel-ast | ^5.5.0 |
| svg-parser | ^2.0.2 |
Keywords
svgr-plugin