---
title: "@farmfe/js-plugin-svgr"
locale: "en"
version: "1.x"
canonicalUrl: "https://farmfe.org/docs/1.x/plugins/official-plugins/js-svgr"
publicationStatus: "prerelease"
---

<a id="farmfejs-plugin-svgr"></a>
# @farmfe/js-plugin-svgr


Support ` React SVG Components ` for Farm.


<a id="installation"></a>
## Installation


**npm**

```javascript
npm install @farmfe/js-plugin-svgr
```


**yarn**

```javascript
yarn add @farmfe/js-plugin-svgr
```


**pnpm**

```javascript
pnpm add @farmfe/js-plugin-svgr
```



<a id="usage"></a>
## Usage


```ts
import { UserConfig } from '@farmfe/core';
import farmJsPluginSvgr from '@farmfe/js-plugin-svgr';

const config: UserConfig = {
  plugins: [
    farmJsPluginSvgr({ /* options */ })
  ]
}
```


<a id="options"></a>
## Options


```ts
export interface FarmSvgrPluginOptions {
  svgrOptions?: SvgrOptions;
  filters?: {
    resolvedPaths?: string[];
  };
}
```


<a id="svgroptions"></a>
### svgrOptions


See [svgr options](<https://react-svgr.com/docs/options/>) for more details.


Example:


```ts
import path from 'node:path';
import { UserConfig } from '@farmfe/core';
import farmJsPluginSvgr from '@farmfe/js-plugin-svgr';

const config: UserConfig = {
  plugins: [
    farmJsPluginSvgr({
      svgrOptions: {
        loadPaths: [path.resolve(process.cwd(), 'styles')]
      }
    })
  ]
}

export default config;
```


<a id="filters"></a>
### filters


Which files should be processed by ` svgr `. Default to ` { resolvedPaths: ['\\.svg$'] } `.


- ` resolvedPaths `: Only files under these paths will be processed. Support regex.


Example:


```ts
import { UserConfig } from '@farmfe/core';
import farmJsPluginSvgr from '@farmfe/js-plugin-svgr';

const config: UserConfig = {
  plugins: [
    farmJsPluginSvgr({
      filters: {
        // all files end with .custom-svg will be processed
        resolvedPaths: ['\\.custom-svg$'],
      }
    })
  ]
}

export default config;
```