@pkoooo/typetool_icons

The single source of truth for Typetool icons. One font, one registry, generated SVGs, and the <Icon> component — consumed by typetool_react, typetool_app/frontend, and the docs. Zero runtime deps (React is a peer, only needed for <Icon>).

Layout

fonts/Typetool_Icons_2-Regular.otf   ← the font — draw / edit icons here (Glyphs)
src/icons.ts                         ← iconRegistry: name → { char, label, category }
src/svgSource.ts                     ← multi-tone / not-yet-in-font icons (annex)
src/iconPaths.generated.ts           ← codegen output (never hand-edit)
src/Icon.tsx                         ← <Icon name="…" /> (svgSource → path → font glyph)
src/index.ts                         ← public surface
scripts/generate-icon-svgs.cjs       ← font → SVG codegen (npm run icons:gen)

Public API

import { Icon, iconRegistry, icons, iconPaths, iconViewBox, svgSource } from '@pkoooo/typetool_icons'
import type { TypeIcon, IconDef, IconCategory } from '@pkoooo/typetool_icons'

The font ships in the package; consumers @font-face it from @pkoooo/typetool_icons/fonts/Typetool_Icons_2-Regular.otf.

Designing icons — the Glyphs source

The carrier is a .glyphs file (fonts/Typetool_Icons.glyphs) with two masters:

• Stroke — the OPEN centre-line paths with each icon's own strokeWidth applied. Edit the shape and dial the weight here; every icon keeps its designed weight (not a uniform fraction).
• Outline — the stroke-EXPANDED filled outline (the baked result / reference).

Workflow:

1. npm run icons:glyphs [weightMultiplier] — (re)builds the .glyphs from the staged sources (each icon at its own stroke weight; ×mult scales all).
2. Open fonts/Typetool_Icons.glyphs in Glyphs. Refine in the Stroke master; the Outline master shows the expansion.
3. Export an OTF → overwrite fonts/Typetool_Icons_2-Regular.otf.
4. npm run icons:gen — rewrites iconPaths.generated.ts.
5. npm run pub (or root pub:only icons); consumers refresh to @latest.

Figma

npm run icons:figma normalises every icon onto a 24×24 canvas and writes figma/ — a local Figma plugin that builds the library as real component sets (Icon with one variant per icon, IconButton, Button, Toolbar with 1–10 swappable slots), plus figma/svg/ as a drag-in fallback. Import figma/manifest.json in Figma once, then hit Build library after each re-export. See figma/README.md.

Staging scripts

• icons:import-app — pull the frontend's inline <svg> icons into src/appIconsSource.generated.ts (staging).
• icons:glyphs — build the two-master .glyphs design source (recommended).
• icons:inject [strokeFrac] — bake a quick stroke-expanded OTF directly (fonts/…_2-staged.otf) without Glyphs; good for a fast preview, less control than the .glyphs.
• Review everything (font vs SVG vs injected, live stroke slider) in the preview app: root npm run preview:icons → http://localhost:5012.

Multi-tone icons (opacity / two-colour) can't be mono font glyphs — they live in svgSource.ts and are rendered as SVG directly. svgSource icons carry a suggestedChar; scripts/inject-icons-to-font.cjs seeds them into a fresh OTF to refine in Glyphs.

Cutover — remaining work (deliberate, needs a publish)

This package was extracted from typetool_react/src/icons (which still has the working copy). To finish making it the single source:

1. Publish — npm run pub:only icons from the repo root (publishes @pkoooo/typetool_icons, refreshes consumers). Already wired into scripts/publish-chain.sh (order: types → icons → …).
2. typetool_react — add @pkoooo/typetool_icons to deps; replace src/icons/* with re-exports from it, and export Icon from the package index so the app can reach it. The 18 internal Icon importers keep working.
3. typetool_app/frontend — add the dep, @font-face the font, and migrate the ~61 inline <svg> icons (see the docs "App icon audit") to <Icon name="…" />.
4. typetool_docs — import iconRegistry / iconPaths from the package instead of regex-scanning source (more accurate: 83 registry entries vs the 61 the scan catches).

Until step 2, typetool_react/src/icons remains the live copy so nothing breaks.