Skip to main content
FarmFarm
Version: 1.x
On this page

@farmfe/js-plugin-svgr

Support React SVG Components for Farm.

Installation

javascript
npm install @farmfe/js-plugin-svgr
javascript
yarn add @farmfe/js-plugin-svgr
javascript
pnpm add @farmfe/js-plugin-svgr

Usage

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

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

Options

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

svgrOptions

See svgr 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;

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;
100%

Drag or pinch to explore. Keyboard: + / − zoom, arrows pan, 0 resets, Esc closes.