https://github.com/svg-rust/svgr-rs
Speedy SVGR rewritten in Rust 🦀. Transforms SVG into React Components.
https://github.com/svg-rust/svgr-rs
rust svg svgr swc
Last synced: about 1 year ago
JSON representation
Speedy SVGR rewritten in Rust 🦀. Transforms SVG into React Components.
- Host: GitHub
- URL: https://github.com/svg-rust/svgr-rs
- Owner: svg-rust
- License: mit
- Created: 2023-03-24T03:07:46.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-10-08T04:37:19.000Z (over 1 year ago)
- Last Synced: 2025-03-29T06:04:08.676Z (over 1 year ago)
- Topics: rust, svg, svgr, swc
- Language: Rust
- Homepage:
- Size: 1.15 MB
- Stars: 57
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
SVGR RS
Speedy SVGR rewritten in Rust 🦀
If you are using SVGR RS from Rust, see [rustdoc](https://docs.rs/svgr-rs/0.1.2/svgr_rs/) and for most uses.
# Webpack
SVGR RS provides an [webpack](https://webpack.js.org/) loader to import SVG as React components.
## Install
```sh
npm install --save-dev @svgr-rs/svgrs-plugin
# or use yarn
yarn add --dev @svgr-rs/core
```
## Usage
webpack.config.js
```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](https://vitejs.dev/) plugin to import SVG as React components.
## Install
```sh
npm install --save-dev @svgr-rs/svgrs-plugin
# or use yarn
yarn add --dev @svgr-rs/core
```
## Usage
vite.config.js
```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
```sh
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
```js
import { transform } from '@svgr-rs/core'
const svgCode = `
`
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](https://github.com/svg-rust/svgo-rs) is working in progress)
- [ ] svgoConfig
- [x] ref
- [x] memo
- [x] replaceAttrValues
- [x] svgProps
- [x] titleProp
- [x] descProp
# License
[MIT](./LICENSE)