0.0.13 • Published 9 months ago

@svgr-rs/core v0.0.13

Weekly downloads
-
License
MIT
Repository
github
Last release
9 months ago

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

0.0.13

9 months ago

0.0.11

2 years ago

0.0.12

2 years ago

0.0.9

2 years ago

0.0.8

2 years ago

0.0.7

2 years ago

0.0.6

2 years ago

0.0.5

2 years ago

0.0.4

2 years ago

0.0.3

2 years ago

0.0.1

2 years ago