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

| property | required? | type | default | description | | - | - | - | - | - | | bundleFile | required | string | - | The filepath where the generated should be stored. | | bundleUrl | required | string | - | The relative or absolute URL where the bundle can be loaded from. | | hash | optional | string | undefined | To help with cache busting you can specify a hash value for the bundle. Later versions of this plugin will likely do this automatically based on the bundle content. | | gap | optional | number | 1 | Gap between packed images. |