# @svgr/plugin-jsx

> Transform SVG into JSX

Latest version **8.1.0** (published 2023-08-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install @svgr/plugin-jsx
pnpm add @svgr/plugin-jsx
yarn add @svgr/plugin-jsx
bun add @svgr/plugin-jsx
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; popular repo.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 8.1.0 |
| Published | 2023-08-15 |
| First published | 2018-11-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=14 |
| Dependencies | 4 |
| Unpacked size | 12.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11061 |
| Author | Greg Bergé |
| Maintainers | neoziro |
| Keywords | svgr-plugin |

## Links

- npm: https://www.npmjs.com/package/@svgr/plugin-jsx
- Repository: https://github.com/gregberge/svgr.git#main
- Homepage: https://react-svgr.com
- Issues: https://github.com/gregberge/svgr/issues
- Funding: https://github.com/sponsors/gregberge
- npm.io page: https://npm.io/package/@svgr/plugin-jsx

## Dependencies (4)

- [svg-parser](https://npm.io/package/svg-parser.md) ^2.0.4
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.21.3
- [@svgr/babel-preset](https://npm.io/package/@svgr/babel-preset.md) 8.1.0
- [@svgr/hast-util-to-babel-ast](https://npm.io/package/@svgr/hast-util-to-babel-ast.md) 8.0.0

## Recent versions

- 8.1.0 (latest) — 2023-08-15
- 6.0.0-alpha.4 (next) — 2021-11-13
- 8.0.1 — 2023-05-09
- 8.0.0 — 2023-05-09
- 7.0.0 — 2023-03-24
- 6.5.1 — 2022-10-27
- 6.5.0 — 2022-10-14
- 6.4.0 — 2022-10-01
- 6.3.1 — 2022-07-22
- 6.3.0 — 2022-07-18
- 6.2.1 — 2022-01-30
- 6.2.0 — 2022-01-10
- 6.1.2 — 2021-12-12
- 6.1.0 — 2021-12-01
- 6.0.0 — 2021-11-28
- … 21 more at https://npm.io/package/@svgr/plugin-jsx/versions

## README

# @svgr/plugin-jsx

[![Build Status](https://img.shields.io/travis/smooth-code/svgr.svg)](https://travis-ci.org/smooth-code/svgr)
[![Version](https://img.shields.io/npm/v/@svgr/plugin-jsx.svg)](https://www.npmjs.com/package/@svgr/plugin-jsx)
[![MIT License](https://img.shields.io/npm/l/@svgr/plugin-jsx.svg)](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

---
_Source: https://npm.io/package/@svgr/plugin-jsx · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._