@farmfe/js-plugin-svgr

支持将 SVG 编译成 React 组建

Installation

javascript

npm install @farmfe/js-plugin-svgr

javascript

yarn add @farmfe/js-plugin-svgr

javascript

pnpm add @farmfe/js-plugin-svgr

Usage

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

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

Options

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

svgrOptions

请参阅 svgr 选项。

示例:

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

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

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

示例:

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;