rollup-plugin-svgr

simple rollup plugin svgr without svgo or babel

Install

npm install --save-dev rollup-plugin-svgr

Alternatives

Official https://www.npmjs.com/package/@svgr/rollup which has svgo and babel enabled by default, unlike this library.

Usage

{
  plugins: [svgr()];
}

{
  plugins: [svgr({ native: true })];
}

You can add a additional transform step. For example, babel: first, you need @babel/core, @babel/preset-react and @babel/preset-env installed, then pass transform option:

import { loadPartialConfig, transformAsync } from "@babel/core";
const babelConfig = loadPartialConfig({
  babelrc: false,
  configFile: false,
  presets: ["@babel/preset-env", "@babel/preset-react"],
});

{
  plugins: [
    svgr({
      transform: async (code) => {
        const result = await transformAsync(code, babelConfig.options);
        if (!result?.code) {
          throw new Error("Error while transforming using Babel");
        }
        return result.code;
      },
    }),
  ];
}

No svgo enabled

Svgo at runtime is costly, consider using a tool like lint-staged-imagemin instead, or simply run and commit svgo modified files.