You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

@svgr/plugin-jsx

Package Overview
Dependencies
5
Maintainers
1
Versions
36
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@svgr/plugin-jsx

Transform SVG into JSX


Version published
Maintainers
1
Created

Package description

What is @svgr/plugin-jsx?

@svgr/plugin-jsx is a plugin for SVGR (SVG to React) that transforms SVG files into JSX code. This allows developers to use SVGs as React components, making it easier to integrate and manipulate SVG graphics within React applications.

What are @svgr/plugin-jsx's main functionalities?

Basic SVG to JSX Transformation

Transforms a basic SVG string into JSX code that can be used as a React component.

const svgCode = '<svg><circle cx="50" cy="50" r="40" /></svg>';
const jsxCode = transform(svgCode, { plugins: ['@svgr/plugin-jsx'] });
console.log(jsxCode);

Customizing JSX Output

Allows customization of the JSX output using Babel presets and other configurations.

const svgCode = '<svg><circle cx="50" cy="50" r="40" /></svg>';
const jsxCode = transform(svgCode, { plugins: ['@svgr/plugin-jsx'], jsx: { babelConfig: { presets: ['@babel/preset-react'] } } });
console.log(jsxCode);

Adding Props to SVG Components

Automatically adds props to the SVG components, making them more flexible and reusable.

const svgCode = '<svg><circle cx="50" cy="50" r="40" /></svg>';
const jsxCode = transform(svgCode, { plugins: ['@svgr/plugin-jsx'], jsx: { expandProps: 'start' } });
console.log(jsxCode);

Other packages similar to @svgr/plugin-jsx

Readme

Source

@svgr/plugin-jsx

Build Status Version MIT License

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:

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

Keywords

FAQs

Package last updated on 15 Aug 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc