Build System

/**
 * Available Gulp tasks for asset processing
 */
interface GulpTasks {
  "png-sprites": "Generate PNG sprite sheets with CSS for each category/color";
  "svg-sprites": "Generate SVG sprite sheets and symbol sprites for each category";  
  "iconjar": "Generate IconJar integration file (.ijmap format)";
  "default": "Run all sprite generation tasks (png-sprites, svg-sprites, iconjar)";
}

// Task execution
gulp.task(taskName: string, taskFunction: Function): void;

# Install dependencies
npm install

# Run individual tasks
npx gulp png-sprites    # Generate PNG sprites only
npx gulp svg-sprites    # Generate SVG sprites only  
npx gulp iconjar        # Generate IconJar file only

# Run all tasks
npx gulp                # or npx gulp default

/**
 * PNG sprite generation configuration
 * Processes PNG icons into sprite sheets for each category/color combination
 */
interface PngSpriteConfig {
  src: string;           // Source pattern: `./{category}/1x_web/*_{color}_24dp.png`
  style: string;         // CSS filename: `sprite-{category}-{color}.css`
  name: string;          // Sprite name: `sprite-{category}-{color}`
  engine: "sprity-gm";   // Graphics processing engine
  orientation: "left-right"; // Sprite layout direction
}

const ICON_CATEGORIES: string[] = [
  "action", "alert", "av", "communication", "content", "device",
  "editor", "file", "hardware", "image", "maps", "navigation", 
  "notification", "places", "social", "toggle"
];

const PNG_COLORS: string[] = ["black", "white", "grey600"];

sprites/css-sprite/
├── sprite-action-black.png      # PNG sprite image
├── sprite-action-black.css      # CSS positioning rules
├── sprite-action-white.png      
├── sprite-action-white.css
├── sprite-action-grey600.png    
├── sprite-action-grey600.css
├── sprite-alert-black.png
├── sprite-alert-black.css
└── ...                          # All category/color combinations

/**
 * SVG sprite configuration
 * Creates both CSS-positioned sprites and symbol-based sprites
 */
interface SvgSpriteConfig {
  shape: {
    dimension: {
      maxWidth: 24;
      maxHeight: 24;
    };
  };
  mode: {
    css: {
      bust: false;
      dest: "./";
      sprite: `./svg-sprite-{category}.svg`;
      example: `./svg-sprite-{category}.html`;
      render: {
        css: {
          dest: `./svg-sprite-{category}.css`;
        };
      };
    };
    symbol: {
      bust: false; 
      dest: "./";
      sprite: `./svg-sprite-{category}-symbol.svg`;
      example: `./svg-sprite-{category}-symbol.html`;
    };
  };
}

sprites/svg-sprite/
├── svg-sprite-action.svg              # SVG sprite sheet
├── svg-sprite-action.css              # CSS positioning
├── svg-sprite-action.html             # Usage example
├── svg-sprite-action-symbol.svg       # SVG symbol sprite
├── svg-sprite-action-symbol.html      # Symbol usage example
└── ...                                # All categories

/**
 * IconJar integration file generation
 * Converts codepoints to IconJar .ijmap format
 */
interface IconJarConfig {
  src: "./iconfont/codepoints";
  dest: "./iconfont/MaterialIcons-Regular.ijmap";
  format: "ijmap";
}

/**
 * Generated IconJar file structure
 */
interface IjmapFormat {
  icons: {
    [codepoint: string]: {
      name: string; // Human-readable icon name
    };
  };
}

// Generated .ijmap file content (example)
{
  "icons": {
    "e84d": { "name": "3d Rotation" },
    "eb3b": { "name": "Ac Unit" },
    "e190": { "name": "Access Alarm" }
    // ... all 932 icons
  }
}

{
  "devDependencies": {
    "babel-core": "^6.1.2",
    "babel-preset-es2015": "^6.1.2", 
    "gulp": "^3.9.0",
    "gulp-if": "^2.0.0",
    "gulp-svg-sprite": "^1.2.14",
    "lodash": "^3.10.1",
    "sprity": "^1.0.8",
    "sprity-gm": "^1.0.2",
    "through2": "^2.0.0",
    "underscore.string": "^3.2.2",
    "vinyl": "^1.1.0"
  }
}

/**
 * Get SVG sprite configuration for a specific category
 * @param category - Icon category name
 * @returns Sprite configuration object
 */
function getSvgSpriteConfig(category: string): SvgSpriteConfig;

/**
 * Generate cartesian product of categories and colors
 * @returns Array of [category, color] pairs for sprite generation
 */
function getCategoryColorPairs(): Array<[string, string]>;

/**
 * Transform codepoints file to IconJar format
 * @param ijmapPath - Output path for .ijmap file
 * @returns Transform stream for processing codepoints
 */
function generateIjmap(ijmapPath: string): NodeJS.Transform;

// gulpfile.custom.js - Extend existing build system
const gulp = require("gulp");
const merge = require("merge-stream");
const sprity = require("sprity");

// Custom task: Generate sprites for specific icons only
gulp.task("custom-sprites", () => {
  const neededIcons = [
    "action/1x_web/ic_home_black_24dp.png",
    "action/1x_web/ic_search_black_24dp.png", 
    "navigation/1x_web/ic_menu_black_24dp.png"
  ];
  
  return sprity.src({
    src: neededIcons,
    style: "custom-sprite.css",
    name: "custom-sprite",
    engine: "sprity-gm"
  }).pipe(gulp.dest("./build/sprites/"));
});

// Custom task: Copy only needed SVG files
gulp.task("copy-needed-svgs", () => {
  const neededSvgs = [
    "action/svg/production/ic_home_24px.svg",
    "action/svg/production/ic_search_24px.svg"
  ];
  
  return gulp.src(neededSvgs, { base: "." })
    .pipe(gulp.dest("./build/icons/"));
});

// webpack.config.js - Process sprites at build time
const { STATIC_PATH } = require("material-design-icons");
const path = require("path");

module.exports = {
  resolve: {
    alias: {
      "material-icons-sprites": path.join(STATIC_PATH, "sprites")
    }
  },
  
  module: {
    rules: [
      {
        test: /\.svg$/,
        include: path.join(STATIC_PATH, "sprites"),
        use: [
          {
            loader: "file-loader",
            options: {
              name: "sprites/[name].[ext]"
            }
          }
        ]
      }
    ]
  }
};

// build-custom-sprites.js - Node.js build integration
const { STATIC_PATH } = require("material-design-icons");
const fs = require("fs");
const path = require("path");
const { execSync } = require("child_process");

// Copy build files to project
const buildFiles = [
  "gulpfile.babel.js",
  ".babelrc",
  "package.json"
];

const buildDir = "./material-icons-build";
fs.mkdirSync(buildDir, { recursive: true });

// Copy source files
buildFiles.forEach(file => {
  const src = path.join(STATIC_PATH, file);
  const dest = path.join(buildDir, file);
  fs.copyFileSync(src, dest);
});

// Install dependencies and run build
process.chdir(buildDir);
execSync("npm install", { stdio: "inherit" });
execSync("npx gulp", { stdio: "inherit" });

console.log("Custom sprites generated in:", path.join(buildDir, "sprites"));

sprites/
├── css-sprite/                    # PNG-based sprites
│   ├── sprite-{category}-{color}.png
│   └── sprite-{category}-{color}.css
├── svg-sprite/                    # SVG-based sprites  
│   ├── svg-sprite-{category}.svg
│   ├── svg-sprite-{category}.css
│   ├── svg-sprite-{category}.html
│   ├── svg-sprite-{category}-symbol.svg
│   └── svg-sprite-{category}-symbol.html
└── iconfont/
    └── MaterialIcons-Regular.ijmap # IconJar integration