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

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

Usage

webpack.config.js

1{
2  test: /\.svg$/i,
3  issuer: /\.[jt]sx?$/,
4  resourceQuery: /react/,
5  use: [
6    {
7      loader: '@svgr-rs/svgrs-plugin/webpack',
8      options: {
9        exportType: 'named',
10        namedExport: 'ReactComponent',
11      },
12    },
13  ],
14}

Vite

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

Install

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

Usage

vite.config.js

1import react from '@vitejs/plugin-react'
2import { svgrs } from '@svgr-rs/svgrs-plugin/vite'
3import { defineConfig } from 'vite'
4
5export default defineConfig({
6  plugins: [
7    react(),
8    svgrs({
9      exportType: 'named',
10      namedExport: 'ReactComponent',
11    })
12  ],
13})

Node.js

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

Install

1npm install --save-dev @svgr-rs/core
2# or use yarn
3yarn 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

1import { transform } from '@svgr-rs/core'
2
3const svgCode = `
4<svg xmlns="http://www.w3.org/2000/svg"
5  xmlns:xlink="http://www.w3.org/1999/xlink">
6  <rect x="10" y="10" height="100" width="100"
7    style="stroke:#ff0000; fill: #0000ff"/>
8</svg>
9`
10
11const jsCode = await transform(
12  svgCode,
13  { icon: true },
14  { componentName: 'MyComponent' },
15)

Benchmarks

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

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