or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-svgr--plugin-svgo

SVGR plugin that optimizes SVG files using SVGO before they are transformed into React components

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@svgr/plugin-svgo@8.1.x

To install, run

npx @tessl/cli install tessl/npm-svgr--plugin-svgo@8.1.0

index.mddocs/

@svgr/plugin-svgo

@svgr/plugin-svgo is an SVGR plugin that optimizes SVG files using SVGO (SVG Optimizer) before they are transformed into React components. It integrates seamlessly with the SVGR ecosystem to provide SVG optimization capabilities including minification, cleaning up unused elements, and applying various optimization transforms. The plugin supports flexible configuration through cosmiconfig, allowing users to customize SVGO settings via various configuration files or through SVGR's configuration system.

Package Information

  • Package Name: @svgr/plugin-svgo
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install --save-dev @svgr/plugin-svgo

Core Imports

import svgoPlugin from "@svgr/plugin-svgo";

For CommonJS:

const svgoPlugin = require("@svgr/plugin-svgo");

The package only exports the default plugin function. The getSvgoConfig function is internal and not exposed in the public API.

Basic Usage

As SVGR Plugin

import { transform } from "@svgr/core";
import svgoPlugin from "@svgr/plugin-svgo";

const svgCode = `<svg xmlns="http://www.w3.org/2000/svg" width="88px" height="88px" viewBox="0 0 88 88">
  <title>My Icon</title>
  <g>
    <path d="M10,10 L50,50" fill="red"/>
  </g>
</svg>`;

const result = await transform(
  svgCode,
  {
    plugins: [svgoPlugin],
    svgo: true,
  },
  { componentName: "MyIcon" }
);

SVGR Configuration

.svgrrc

{
  "plugins": ["@svgr/plugin-svgo"],
  "svgo": true,
  "runtimeConfig": true
}

Capabilities

SVGO Plugin Function

Main plugin function that optimizes SVG code using SVGO as part of the SVGR transformation pipeline.

/**
 * SVGR plugin that optimizes SVG code using SVGO
 * @param code - SVG source code to optimize
 * @param config - SVGR configuration object
 * @param state - SVGR state containing file path and component metadata  
 * @returns Optimized SVG code
 */
function svgoPlugin(code: string, config: Config, state: State): string;

The plugin:

  • Returns original code unchanged if config.svgo is false
  • Applies SVGO optimization with resolved configuration
  • Throws errors for invalid SVG syntax
  • Preserves viewBox for icon mode and when dimensions are disabled
  • Configures inline styles handling for React Native mode

Configuration Resolution

The plugin internally resolves SVGO configuration from multiple sources with priority-based loading:

  1. config.svgoConfig - Direct SVGO configuration (highest priority)
  2. Runtime configuration files (when config.runtimeConfig is true)
  3. Generated configuration based on SVGR options (fallback)

Configuration Options

SVGR Config Properties

interface Config {
  /** Enable/disable SVGO optimization */
  svgo?: boolean;
  /** Direct SVGO configuration object */
  svgoConfig?: SvgoConfig;
  /** Enable runtime configuration file loading */
  runtimeConfig?: boolean;
  /** Icon mode - preserves viewBox */
  icon?: boolean | string | number;
  /** Dimensions handling - when false, preserves viewBox */
  dimensions?: boolean;
  /** React Native mode - configures inline styles handling */
  native?: boolean;
  // ... other SVGR config properties
}

interface State {
  /** File path for configuration resolution and error context */
  filePath?: string;
  /** Component name for the generated React component */
  componentName: string;
  caller?: {
    name?: string;
    previousExport?: string | null;
    defaultPlugins?: ConfigPlugin[];
  };
}

Runtime Configuration Files

When runtimeConfig is enabled, the plugin searches for SVGO configuration in:

  • package.json (svgo property)
  • .svgorc
  • .svgorc.js, .svgorc.json
  • .svgorc.yaml, .svgorc.yml
  • svgo.config.js, svgo.config.cjs
  • .svgo.yml

Default SVGO Configuration

Generated configuration based on SVGR options:

interface DefaultSvgoConfig {
  plugins: [
    {
      name: "preset-default";
      params: {
        overrides: {
          /** Preserves viewBox when icon mode or dimensions disabled */
          removeViewBox?: false;
          /** Configures inline styles for React Native */
          inlineStyles?: {
            onlyMatchedOnce: false;
          };
        };
      };
    },
    "prefixIds"
  ];
}

Usage Examples

Custom SVGO Configuration

import { transform } from "@svgr/core";
import svgoPlugin from "@svgr/plugin-svgo";

const result = await transform(
  svgCode,
  {
    plugins: [svgoPlugin],
    svgo: true,
    svgoConfig: {
      plugins: [
        {
          name: "preset-default",
          params: {
            overrides: {
              removeDesc: false, // Keep descriptions
              removeTitle: false, // Keep titles
            },
          },
        },
        "prefixIds",
      ],
    },
  },
  { componentName: "CustomIcon" }
);

Icon Mode (Preserves ViewBox)

const result = await transform(
  svgCode,
  {
    plugins: [svgoPlugin],
    svgo: true,
    icon: true, // Preserves viewBox for proper scaling
  },
  { componentName: "IconComponent" }
);

React Native Mode

const result = await transform(
  svgCode,
  {
    plugins: [svgoPlugin],
    svgo: true,
    native: true, // Configures inline styles for React Native
  },
  { componentName: "NativeIcon" }
);

Runtime Configuration

// .svgorc.js in project root
module.exports = {
  plugins: [
    {
      name: "preset-default",
      params: {
        overrides: {
          removeViewBox: false,
          cleanupIds: false,
        },
      },
    },
    "prefixIds",
  ],
};

// SVGR usage
const result = await transform(
  svgCode,
  {
    plugins: [svgoPlugin],
    svgo: true,
    runtimeConfig: true, // Enables loading of .svgorc.js
  },
  { 
    componentName: "ConfiguredIcon",
    filePath: "/path/to/icon.svg" // Used for config discovery
  }
);

Error Handling

The plugin handles errors by:

  • Returning original code if config.svgo is false
  • Throwing SVGO modernError for invalid SVG syntax
  • Gracefully handling missing configuration files
  • Providing descriptive error messages for configuration issues

Common error scenarios:

  • Invalid SVG markup (malformed XML)
  • Missing or inaccessible configuration files
  • Invalid SVGO plugin configurations