@svgr/plugin-jsx

  

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
• Converting the HAST into a Babel AST
• 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 is a good start!

License

MIT