Package Exports

@svgr/plugin-jsx

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@svgr/plugin-jsx) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@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:

If you want to create your own, reading Babel Handbook is a good start!

License

MIT