8.1.0 • Published 8 months ago
@svgr/plugin-jsx v8.1.0
@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-preset
transformations
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
8.1.0
8 months ago
8.0.1
12 months ago
8.0.0
12 months ago
7.0.0
1 year ago
6.5.0
2 years ago
6.4.0
2 years ago
6.5.1
1 year ago
6.3.0
2 years ago
6.3.1
2 years ago
6.2.1
2 years ago
6.2.0
2 years ago
6.0.0-alpha.3
2 years ago
6.0.0-alpha.4
2 years ago
6.1.0
2 years ago
6.0.0
2 years ago
6.1.2
2 years ago
6.0.0-alpha.2
2 years ago
6.0.0-alpha.1
2 years ago
6.0.0-alpha.0
3 years ago
5.5.0
3 years ago
5.4.0
4 years ago
5.3.1
4 years ago
5.3.0
4 years ago
5.2.0
4 years ago
5.0.1
4 years ago
5.0.0
4 years ago
4.3.3
5 years ago
4.3.2
5 years ago
4.3.1
5 years ago
4.3.0
5 years ago
4.2.0
5 years ago
4.1.0
5 years ago
4.0.3
5 years ago
4.0.2
5 years ago
4.0.1
5 years ago
4.0.0
5 years ago