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

@svgr/babel-preset

Package Overview
Dependencies
9
Maintainers
1
Versions
31
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@svgr/babel-preset

SVGR preset that apply transformations from config


Version published
Maintainers
1
Created

Package description

What is @svgr/babel-preset?

The @svgr/babel-preset package is a Babel preset for transforming SVG icons into React components. This allows developers to import SVG files directly as React components in their projects, facilitating easier manipulation and integration of SVGs within React applications.

What are @svgr/babel-preset's main functionalities?

SVG to React Component Transformation

This feature allows SVG files to be imported directly as React components. This is useful for developers who want to use SVGs as components without manually converting them. The code shows how an SVG file can be imported and used as a React component.

import ReactComponent from './icon.svg';

Customizable SVG Transformation

Developers can customize how SVGs are transformed into React components. Options such as disabling SVGO optimization or adding a title prop to the SVG can be configured. The code sample demonstrates how to customize the Babel preset configuration for SVG transformation.

{
  "presets": [
    "@svgr/babel-preset",
    {
      "icon": true,
      "svgo": false,
      "titleProp": true
    }
  ]
}

Other packages similar to @svgr/babel-preset

Readme

Source

@svgr/babel-preset

Install

npm install --save-dev @svgr/babel-preset

Usage

.babelrc

{
  "presets": [["@svgr/babel-preset", { "svgProps": { "width": 200 } }]]
}

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