1. @svgr/core
Transform SVG into React Components.
@svgr/core
Package: @svgr/core
Created by: gregberge
Last modified: Tue, 15 Aug 2023 06:46:21 GMT
Version: 8.1.0
License: MIT
Downloads: 33,521,233
Repository: https://github.com/gregberge/svgr

Install

npm install @svgr/core
yarn add @svgr/core

@svgr/core

Build Status
version
MIT License

Node API of SVGR.

npm install @svgr/core

Usage

 import { transform } from '@svgr/core'

const svgCode = `
<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect x="10" y="10" height="100" width="100"
    style="stroke:#ff0000; fill: #0000ff"/>
</svg>
`

transform(svgCode, { icon: true }, { componentName: 'MyComponent' }).then(
  (jsCode) => {
    console.log(jsCode)
  },
)

Use svgr.sync(code, config, state) if you would like to use sync version.

Plugins

By default @svgr/core doesn't include any plugin, if you want them, you have to install them and include them in config.

 svgr(svgCode, {
  plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx', '@svgr/plugin-prettier'],
}).then((jsCode) => {
  console.log(jsCode)
})

License

MIT

Dependencies

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code