esbuild-plugin-svg-bundle v1.3.0

esbuild-plugin-svg-bundle

This is a plugin for esbuild that bundles all SVG files referenced in CSS files into a single SVG bundle consisting nested SVGs accessible via fragment ids. SVGs will be optimized using svgo when the minify option is enabled.

Install

npm i -D esbuild-plugin-svg-bundle

Usage

import esbuild from "esbuild";
import svgBundlePlugin from "esbuild-plugin-svg-bundle";

esbuild.build({
    entryPoints: ["src/app.ts"],
    bundle: true,
    outdir: "dist/",
    plugins: [
      svgBundlePlugin({
        bundleFile: "assets/svg-bundle.svg",
        bundleUrl: "../assets/svg-bundle.svg"
      })
    ]
});

This will create dist/assets/svg-bundle.svg and references in CSS will get remapped from

.element-with-svg-background {
  background-image: url(svg-file.svg);
}

using the specified bundleUrl to

.element-with-svg-background {
  background-image: url(../assets/svg-bundle.svg#svg-file);
}

Configuration