@svgr-rs/core
v0.0.13
Published
<h1 align="center">SVGR RS</h1>
Downloads
811
Readme
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 transformoptions
: the options used to transform the SVGstate
: 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:
Roadmap
- [x] jsxRuntime
- [x] jsxRuntimeImport
- [x] icon
- [x] native
- [x] typescript
- [x] dimensions
- [x] expandProps
- [ ] prettier
- [ ] prettierConfig
- [ ] svgo (Speedy SVGO rewritten in Rust is working in progress)
- [ ] svgoConfig
- [x] ref
- [x] memo
- [x] replaceAttrValues
- [x] svgProps
- [x] titleProp
- [x] descProp