Skip to content

Latest commit

 

History

History
138 lines (104 loc) · 2.48 KB

README.md

File metadata and controls

138 lines (104 loc) · 2.48 KB

SVGR RS

Speedy SVGR rewritten in Rust 🦀

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' },
)

Benchmarks

Transform time without SVGO and Prettier in W3C SVG 1.1 TestSuite:

Transform time

Roadmap

  • jsxRuntime
  • jsxRuntimeImport
  • icon
  • native
  • typescript
  • dimensions
  • expandProps
  • prettier
  • prettierConfig
  • svgo (Speedy SVGO rewritten in Rust is working in progress)
  • svgoConfig
  • ref
  • memo
  • replaceAttrValues
  • svgProps
  • titleProp
  • descProp

License

MIT