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

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


A Rust Farm plugin that transforms SVG files into React components.


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


**npm**

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


**yarn**

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


**pnpm**

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



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


Register the plugin in ` farm.config.ts `:


```ts
import { defineConfig } from "@farmfe/core";
import svgr from "@farmfe/plugin-svgr";

export default defineConfig({
  plugins: [
    svgr({
      include: ["src/**/*.svg"],
      exclude: ["src/icons/*.svg"],
      defaultStyle: { fill: "currentColor" },
      defaultClass: "svg-icon",
    }),
  ],
});
```


Then import SVG files as React components:


```jsx
import Logo from "./logo.svg";

export function App() {
  return <Logo width={50} height={50} />;
}
```


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


- ` include?: string[] ` — SVG file patterns to transform. Defaults to ` ["**/*.svg"] `.
- ` exclude?: string[] ` — SVG file patterns to skip.
- ` defaultClass?: string ` — default class name added to the generated SVG.
- ` defaultStyle?: object ` — default style object added to the generated SVG.


SVG imports with ` ?raw `, ` ?url `, ` ?inline `, or ` ?img=true ` are ignored by this plugin.