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

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


支持将 ` SVG ` 编译成 ` React ` 组建


<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


请参阅 [svgr 选项](<https://react-svgr.com/docs/options/>)。


示例:


```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


哪些文件应该由 ` svgr ` 处理。 默认为 ` {resolvedPaths: ['\\.svg$'] } `。


- ` resolvedPaths `: 仅处理这些路径下的文件。 支持正则表达式。


示例:


```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;
```