Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
# @svgr/plugin-jsx
[](https://travis-ci.org/smooth-code/svgr)
[](https://www.npmjs.com/package/@svgr/plugin-jsx)
[](https://github.com/smooth-code/svgr/blob/master/LICENSE)
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 [rehype](https://github.com/rehypejs/rehype)
- Converting the [HAST](https://github.com/syntax-tree/hast) into a [Babel AST](https://github.com/babel/babel/blob/master/packages/babel-parser/ast/spec.md)
- Applying [`@svgr/babel-preset`](../babel-preset/README.md) 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`](../babel-plugin-add-jsx-attribute/README.md)
- [`@svgr/babel-plugin-remove-jsx-attribute`](../babel-plugin-remove-jsx-attribute/README.md)
- [`@svgr/babel-plugin-remove-jsx-empty-expression`](../babel-plugin-remove-jsx-empty-expression/README.md)
- [`@svgr/babel-plugin-replace-jsx-attribute-value`](../babel-plugin-replace-jsx-attribute-value/README.md)
- [`@svgr/babel-plugin-svg-dynamic-title`](../babel-plugin-svg-dynamic-title/README.md)
- [`@svgr/babel-plugin-svg-em-dimensions`](../babel-plugin-svg-em-dimensions/README.md)
- [`@svgr/babel-plugin-transform-react-native-svg`](../babel-plugin-transform-react-native-svg/README.md)
- [`@svgr/babel-plugin-transform-svg-component`](../babel-plugin-transform-svg-component/README.md)
If you want to create your own, reading [Babel Handbook](https://github.com/jamiebuilds/babel-handbook/blob/master/translations/en/plugin-handbook.md) is a good start!
## License
MIT