---
git_hash: "943a2a54d98ae07542919b05107b1c45ff47681e"
modified: "2026-08-21"
---

# Build Pipeline & Icon Import

> How `dist/` is generated from `src/`, and how to add icons from npm icon packages.

## Overview

`src/svg/` is the single source of truth for icons. `npm run build` regenerates everything in `dist/` (sprite, font, CSS/SCSS, codepoint map). New icons can be added by hand or imported from npm icon packages via `npm run import`.

## Build Pipeline

Run with `npm run build` → [`scripts/build.js`](../scripts/build.js). Steps in order:

1. **PNG → SVG tracing** — traces PNGs in `src/png/` with Potrace and optimises them with SVGO ([`processPngs`](../scripts/build.js#L21)).
2. **Normalise** — scales every SVG to a 16 × 16 viewBox and strips width/height ([`normalizeSvgs`](../scripts/build.js#L70)).
3. **SVG sprite** — bundles all icons into `dist/ogis-icons.svg` via svg-sprite ([`buildSprite`](../scripts/build.js#L149)).
4. **Codepoints** — assigns stable Unicode values (starting at U+F100) to new icons, persisted in `src/codepoints.json` ([`updateCodepoints`](../scripts/build.js#L183)).
5. **Icon font** — generates `ogis-icons.woff2` / `.woff` plus CSS, SCSS, and JSON outputs via fantasticon ([`buildFont`](../scripts/build.js#L338)). Compound paths with `fill-rule="evenodd"` are rewritten to non-zero winding so holes render correctly in fonts ([`prepareForFont`](../scripts/build.js#L309)).
6. **SCSS variables** — writes `dist/ogis-icons-variables.scss` with the `$ogis-icons-map` ([`buildVariablesScss`](../scripts/build.js#L364)).

## Icon Import

Run with `npm run import <source> <icon-name> [<icon-name>...]` → [`scripts/import-icons.js`](../scripts/import-icons.js).

```bash
npm run import bootstrap-icons file-arrow-down
npm run import bootstrap-icons file-arrow-down file-arrow-up --force
```

Copies `node_modules/<package>/<dir>/<name>.svg` → `src/svg/<name>.svg`. Refuses to overwrite existing icons unless `--force` is passed. Run `npm run build` afterwards to regenerate `dist/`.

### Sources registry

The `SOURCES` registry ([`scripts/import-icons.js`](../scripts/import-icons.js#L22)) maps source names to npm packages and their icon directories:

```js
const SOURCES = {
  "bootstrap-icons": { package: "bootstrap-icons", dir: "icons" },
};
```

Add a new entry here when adopting another icon package (e.g. tabler-icons, phosphor-icons), then install it as a devDependency.

## Related

- [Main README](../README.md)
- [Docs index](README.md)