@svgr-rs/core NPM

If you are using SVGR RS from Rust, see rustdoc and for most uses.

Webpack

SVGR RS provides an webpack loader to import SVG as React components.

Install

npm install --save-dev @svgr-rs/svgrs-plugin
# or use yarn
yarn add --dev @svgr-rs/core

Usage

webpack.config.js

{
  test: /\.svg$/i,
  issuer: /\.[jt]sx?$/,
  resourceQuery: /react/,
  use: [
    {
      loader: '@svgr-rs/svgrs-plugin/webpack',
      options: {
        exportType: 'named',
        namedExport: 'ReactComponent',
      },
    },
  ],
}

Vite

SVGR RS provides an vite plugin to import SVG as React components.

Install

npm install --save-dev @svgr-rs/svgrs-plugin
# or use yarn
yarn add --dev @svgr-rs/core

Usage

vite.config.js

import react from '@vitejs/plugin-react'
import { svgrs } from '@svgr-rs/svgrs-plugin/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    react(),
    svgrs({
      exportType: 'named',
      namedExport: 'ReactComponent',
    })
  ],
})

Node.js

Use SVGR RS in Node.js to complex transformations or tools.

Install

npm install --save-dev @svgr-rs/core
# or use yarn
yarn add --dev @svgr-rs/core

Usage

Import transform from @svgr-rs/core to transform a file. It takes three arguments:

source: the SVG source code to transform
options: the options used to transform the SVG
state: a state linked to the transformation

import { transform } from '@svgr-rs/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>
`

const jsCode = await transform(
  svgCode,
  { icon: true },
  { componentName: 'MyComponent' },
)