@svgr/plugin-svgo

What is @svgr/plugin-svgo?

The @svgr/plugin-svgo package is a plugin for SVGR that allows you to optimize SVG files using SVGO during the transformation of SVGs into React components. This optimization can include removing unnecessary attributes, minifying the file, and more, which can result in smaller and more efficient SVG components for use in web applications.

What are @svgr/plugin-svgo's main functionalities?

Optimize SVGs during conversion to React components

This feature allows you to optimize SVG files using SVGO while converting them into React components. The code sample demonstrates how to use the SVGR core library with the SVGO plugin to optimize an SVG string.

import svgr from '@svgr/core';
import svgoPlugin from '@svgr/plugin-svgo';

const svgCode = '<svg>...</svg>';
const optimizedComponent = svgr(svgCode, { plugins: [svgoPlugin()] });
console.log(optimizedComponent);

Other packages similar to @svgr/plugin-svgo

svgo

SVGO is a Node.js-based tool for optimizing SVG vector graphics files. It is the underlying tool used by @svgr/plugin-svgo for optimization. While SVGO can be used directly for optimizing SVG files, @svgr/plugin-svgo integrates this functionality within the SVG to React component transformation process.

react-svg-loader

React SVG Loader is a webpack loader that allows you to import SVGs as React components. Similar to @svgr/plugin-svgo, it can optimize SVGs during the import process, but it is specifically designed to work as part of a webpack build pipeline.

svg-sprite-loader

SVG Sprite Loader is another webpack loader that compiles all SVGs into an SVG sprite. While it also optimizes SVG files, its primary focus is on creating sprite sheets which can be a different use case compared to individual SVG to React component transformation offered by @svgr/plugin-svgo.

README

@svgr/plugin-svgo

Optimize SVG using SVGO.

Install

npm install --save-dev @svgr/plugin-svgo

Usage

.svgrrc

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

License

MIT