@hyperbola/svgo-loader v0.2.3

svgo loader for webpack

@hyperbola/svgo-loader is a zero-dependency, evergreen replacement for svgo-loader. @hyperbola/svgo-loader only supports the latest webpack@5 release.

Install

$ npm i -D svgo @hyperbola/svgo-loader

svgo is a peer dependency of this package and must be explicitly installed and added to your package.json.

Usage

Upstream webpack documentation: loaders.

@hyperbola/svgo-loader passes config from webpack.config.js directly to the svgo library.

With asset modules

const svgToMiniDataURI = require("mini-svg-data-uri");

module.exports = {
  ...,
  module: {
    rules: [
      {
        test: /\.svg$/,
        type: "asset",
        use: "@hyperbola/svgo-loader",
        generator: {
          dataUrl: (content) => {
            content = content.toString();
            return svgToMiniDataURI(content);
          },
        },
      },
    ]
  }
}

With SVGO configuration

Pass configuration to SVGO by including it into the loader's options:

module.exports = {
  ...,
  module: {
    rules: [
      {
        test: /\.svg$/,
        type: "asset",
        use: {
          loader: "@hyperbola/svgo-loader",
          options: {
            plugins: [
              "removeTitle",
              { name: "convertColors", params: { shorthex: false } },
              { name: "convertPathData", active: false },
            ],
          },
        },
      },
    ]
  }
}