# svgrs-plugin

> Use svgr-rs with vite and webpack

Latest version **0.0.2** (published 2023-05-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install svgrs-plugin
pnpm add svgrs-plugin
yarn add svgrs-plugin
bun add svgrs-plugin
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2023-05-09 |
| First published | 2023-04-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=14 |
| Dependencies | 2 |
| Unpacked size | 12.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | JW |
| Maintainers | qidanta |

## Links

- npm: https://www.npmjs.com/package/svgrs-plugin
- Repository: https://github.com/svg-rust/svgrs-plugin
- Homepage: https://github.com/svg-rust/svgrs-plugin#readme
- Issues: https://github.com/svg-rust/svgrs-plugin/issues
- npm.io page: https://npm.io/package/svgrs-plugin

## Dependencies (2)

- [@svgr-rs/core](https://npm.io/package/@svgr-rs/core.md) ^0.0.8
- [@rollup/pluginutils](https://npm.io/package/@rollup/pluginutils.md) ^5.0.2

## Recent versions

- 0.0.2 (latest) — 2023-05-09
- 0.0.1 — 2023-04-26

## README

# svgrs-plugin

[![npm](https://img.shields.io/npm/v/svgrs-plugin)](https://github.com/JiangWeixian/svgrs-plugin) [![GitHub](https://img.shields.io/npm/l/svgrs-plugin)](https://github.com/JiangWeixian/svgrs-plugin)

Use [svgr-rs](https://github.com/svg-rust/svgr-rs) with vite and webpack.

## install

```console
pnpm i svgrs-plugin -D
```

## usage

### `vite`

```ts
import path from 'node:path'

import react from '@vitejs/plugin-react'
import { svgrs } from 'svgrs-plugin/vite'
import { defineConfig } from 'vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    svgrs({
      exportType: 'named',
      namedExport: 'ReactComponent',
    })
  ],
})
```

#### `options`

Check supported options from [svg-rust/svgr-rs](https://github.com/svg-rust/svgr-rs). 

**Extra options for vite:**

`include`

- type `string[]`
- default `['**/*.svg']`

`exclude`

- type `string[]`
- default `[]`

### `webpack`

Add the following `module rule` to your `webpack.config`

```ts
{
  test: /\.svg$/i,
  issuer: /\.[jt]sx?$/,
  resourceQuery: /react/,
  use: [
    {
      loader: 'esbuild-loader',
      options: {
        loader: 'tsx',
        target: 'es2015',
      },
    },
    {
      loader: 'svgrs-plugin/webpack',
      options: {
        exportType: 'named',
        namedExport: 'ReactComponent',
      },
    },
  ],
}
```

Check supported options from [svg-rust/svgr-rs](https://github.com/svg-rust/svgr-rs). 

## development

- **Setup** - `pnpm i`
- **Build** - `pnpm build`

# 
<div align='right'>

*built with ❤️ by 😼*

</div>

---
_Source: https://npm.io/package/svgrs-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._