74 lines
2.4 KiB
Markdown
74 lines
2.4 KiB
Markdown
|
# @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 [svg-parser](https://github.com/Rich-Harris/svg-parser)
|
|||
|
|
- 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
|