SVG Sprite Build Tools and Automation

SVG Sprite Build Tools

While the SVG Sprite Generator web tool is perfect for quick one-off sprite creation, production workflows benefit from automated build-time sprite generation.

SVGO (SVG Optimizer)

SVGO is the de facto standard for SVG optimization. It runs as a Node.js CLI or programmatic API:

# Install
npm install -D svgo

# Optimize all SVGs in a directory
npx svgo -f ./src/icons -o ./src/icons-optimized

SVGO configuration (svgo.config.js):

module.exports = {
  plugins: [
    "removeDoctype",
    "removeComments",
    "removeMetadata",
    "removeEditorsNSData",
    { name: "removeAttrs", params: { attrs: ["fill", "stroke", "class"] } },
    { name: "removeDimensions" },
    { name: "removeViewBox", active: false },  // Keep viewBox!
  ],
};

svg-sprite

The svg-sprite npm package generates sprite sheets from a directory of SVGs:

npm install -D svg-sprite

const SVGSpriter = require("svg-sprite");
const fs = require("fs");
const path = require("path");

const spriter = new SVGSpriter({
  mode: { symbol: { dest: ".", sprite: "sprite.svg" } },
});

// Add all SVG files
const iconsDir = "./src/icons";
fs.readdirSync(iconsDir).forEach((file) => {
  if (file.endsWith(".svg")) {
    spriter.add(
      path.resolve(iconsDir, file),
      file,
      fs.readFileSync(path.resolve(iconsDir, file), "utf-8")
    );
  }
});

// Compile sprite
spriter.compile((error, result) => {
  fs.writeFileSync("public/sprite.svg", result.symbol.sprite.contents);
});

Vite Plugin

For Vite-based projects, use vite-plugin-svg-icons:

npm install -D vite-plugin-svg-icons

// vite.config.ts
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
import path from "path";

export default {
  plugins: [
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), "src/icons")],
      symbolId: "icon-[name]",
    }),
  ],
};

Webpack Loader

For Webpack projects, use svg-sprite-loader:

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        include: path.resolve(__dirname, "src/icons"),
        use: [{ loader: "svg-sprite-loader", options: { symbolId: "icon-[name]" } }],
      },
    ],
  },
};

npm Script Workflow

A simple npm script approach without build tool plugins:

{
  "scripts": {
    "icons:optimize": "svgo -f src/icons -o src/icons-opt",
    "icons:sprite": "node scripts/build-sprite.js",
    "icons:build": "npm run icons:optimize && npm run icons:sprite"
  }
}

Run npm run icons:build whenever icons change, or add it to your build pipeline.

CI/CD Integration

Add sprite generation to your CI pipeline:

# GitHub Actions
- name: Build SVG sprite
  run: npm run icons:build
- name: Verify sprite changed
  run: git diff --exit-code public/sprite.svg

This ensures the committed sprite file is always up to date with the source SVGs.