{"id":15450,"library":"icon-pipeline","title":"Icon Pipeline","description":"Icon Pipeline is a utility for optimizing SVG icons and generating SVG sprites, along with individual optimized SVG files and a manifest of available icons. It aims to provide a 'no-nonsense' automated pipeline for icon management in web projects. As of version 0.2.0, the package is in early development, suggesting an irregular release cadence and that its API might not yet be stable. Its key differentiator lies in its integrated approach, handling both SVG optimization and sprite generation (for both HTML `<use>` and JavaScript injection) within a single tool, outputting multiple formats ready for different consumption patterns, which simplifies the icon build process compared to using separate tools for each step. It is designed to be included as a development dependency and run as part of a project's build process.","status":"active","version":"0.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/DavidWells/icon-pipeline","tags":["javascript","icons","svg","optimization","sprite"],"install":[{"cmd":"npm install icon-pipeline","lang":"bash","label":"npm"},{"cmd":"yarn add icon-pipeline","lang":"bash","label":"yarn"},{"cmd":"pnpm add icon-pipeline","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The main `iconPipeline` function is currently exported using CommonJS `module.exports` syntax. Attempting to use ES Modules `import` syntax will result in an error or `undefined`.","wrong":"import { iconPipeline } from 'icon-pipeline'","symbol":"iconPipeline","correct":"const iconPipeline = require('icon-pipeline')"},{"note":"The `sprite` (and `icon-list`) files are *generated outputs* of the `icon-pipeline` process, not direct exports from the package itself. They are typically imported from the specified `outputDir` path, using ES Modules syntax for the generated `.js` files.","wrong":"import { sprite } from 'icon-pipeline'","symbol":"sprite","correct":"import sprite from './build/icons/sprite.js'"}],"quickstart":{"code":"const path = require('path');\nconst iconPipeline = require('icon-pipeline');\n\nconst iconSrcFolder = path.join(__dirname, 'src', 'icons');\nconst iconOutputFolder = path.join(__dirname, 'build', 'icons');\n\n// Ensure output directories exist before running, or icon-pipeline handles it.\n// For demonstration, let's assume 'src/icons' contains some .svg files.\n// Example: fs.mkdirSync(iconSrcFolder, { recursive: true });\n// Example: fs.writeFileSync(path.join(iconSrcFolder, 'profile.svg'), '<svg viewBox=\"0 0 24 24\"><path d=\"M12 4a4 4 0 014 4 4 4 0 01-4 4 4 4 0 01-4-4 4 4 0 014-4z\"></path></svg>');\n\niconPipeline({\n  srcDir: iconSrcFolder,\n  outputDir: iconOutputFolder,\n  includeSpriteInSrc: true,\n  // Optional: disable additional svg classes\n  // disableClasses: true,\n  // Optional: namespace icon IDs\n  // namespace: 'company'\n}).then((iconData) => {\n  console.log('Icon pipeline completed successfully.');\n  console.log('Generated icon data:', iconData);\n  // iconData will contain details like the paths to the generated files\n}).catch((error) => {\n  console.error('Error running icon pipeline:', error);\n});\n","lang":"javascript","description":"This quickstart demonstrates how to configure and run the `icon-pipeline` using CommonJS `require`. It sets source and output directories, then executes the pipeline asynchronously to optimize SVGs and generate sprite files, logging the resulting metadata."},"warnings":[{"fix":"Pin to specific patch versions (`~0.2.0` instead of `^0.2.0`) and review the GitHub repository for changes before upgrading. Exercise caution when deploying to production.","message":"This package is currently in early development (version 0.2.0). The API is subject to change without adhering to semantic versioning for breaking changes, and overall stability for critical production environments is not guaranteed.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Always use `.then()` to process the results of `iconPipeline` or `await` it within an `async` function to ensure icon data is available when accessed.","message":"The `iconPipeline` function returns a Promise. Forgetting to handle this Promise with `.then()` or `await` will result in subsequent code attempting to access the `iconData` asynchronously receiving an `undefined` value or a pending Promise object.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"If `includeSpriteInSrc` is true, ensure your `.gitignore` file explicitly excludes `sprite.js` and `sprite.svg` from the source directory, or set `includeSpriteInSrc: false` and manage these files in your `outputDir`.","message":"The `includeSpriteInSrc: true` option places generated `sprite.js` and `sprite.svg` directly into the `srcDir`. This can lead to issues with source control (e.g., unintended commits) if not properly managed with `.gitignore`.","severity":"gotcha","affected_versions":">=0.0.1"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Access `iconData` only within the `.then()` callback of the `iconPipeline` Promise, or by using `await iconPipeline(...)` within an `async` function.","cause":"Attempting to access the `iconData` variable synchronously after calling the `iconPipeline` function, which is asynchronous and returns a Promise.","error":"ReferenceError: iconData is not defined"},{"fix":"For the main `iconPipeline` function, use `const iconPipeline = require('icon-pipeline')`. If your project strictly uses ESM, you might need to use a CommonJS wrapper or wait for native ESM support in future versions of the package.","cause":"The `icon-pipeline` package, in its current version, primarily uses CommonJS `module.exports`. When a project is configured for ES Modules, a `require` call might fail.","error":"TypeError: require is not a function (when using 'import { iconPipeline } from \"icon-pipeline\"')"}],"ecosystem":"npm"}