Speedy SVGR rewritten in Rust 🦀. Transforms SVG into React Components.
MIT License
If you are using SVGR RS from Rust, see rustdoc and for most uses.
SVGR RS provides an webpack loader to import SVG as React components.
npm install --save-dev @svgr-rs/svgrs-plugin
# or use yarn
yarn add --dev @svgr-rs/core
webpack.config.js
{
test: /\.svg$/i,
issuer: /\.[jt]sx?$/,
resourceQuery: /react/,
use: [
{
loader: '@svgr-rs/svgrs-plugin/webpack',
options: {
exportType: 'named',
namedExport: 'ReactComponent',
},
},
],
}
SVGR RS provides an vite plugin to import SVG as React components.
npm install --save-dev @svgr-rs/svgrs-plugin
# or use yarn
yarn add --dev @svgr-rs/core
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',
})
],
})
Use SVGR RS in Node.js to complex transformations or tools.
npm install --save-dev @svgr-rs/core
# or use yarn
yarn add --dev @svgr-rs/core
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 transformationimport { 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' },
)
Transform time without SVGO and Prettier in W3C SVG 1.1 TestSuite: