@zerolinkspace/material-symbols-sync

Extract a Material Symbols subset font from your project sources and emit ready-to-use @font-face files. Icon names are collected from two pluggable sources and unioned:

• miniprogram-src — scans .ts/.tsx for icon props (icon, leftIcon, …) and <MaterialIcon name="…"> via the TypeScript AST.
• stitch-html — scans Google Stitch design HTML for class="material-symbols-outlined" elements.

The union is sent to the Google Fonts CSS2 icon_names subsetter, and the resulting WOFF/WOFF2 is written either inline (base64) or as a linked font file. Built for web and WeChat/Alipay (.wxss/.acss) miniprograms.

Install

npm i -D @zerolinkspace/material-symbols-sync

Configure

Create material-symbols.config.mjs at your project root. All paths resolve relative to this file.

export default {
  fontFamily: 'Material Symbols Outlined',
  axis: 'opsz,wght,FILL,GRAD@24,100..700,0..1,0',
  budgetBytes: 50 * 1024,
  manifest: 'src/assets/fonts/material-symbols-manifest.json',
  collectors: [
    { type: 'miniprogram-src', root: 'src' },
    { type: 'stitch-html', root: '../stitch/app/html' }, // optional; skipped if absent
  ],
  emit: [
    // Miniprogram: inline WOFF into per-platform styles
    { file: 'src/styles/material-symbols-font.css', format: 'woff', inline: true },
    { file: 'src/custom-tab-bar/material-symbols-font.wxss', format: 'woff', inline: true },
    { file: 'src/custom-tab-bar/material-symbols-font.acss', format: 'woff', inline: true },
    // Web: linked WOFF2 file
    // { file: 'src/fonts.css', format: 'woff2', inline: false, fontFile: 'src/assets/material-symbols.woff2' },
  ],
}

Collector options

• miniprogram-src: root, iconPropertyNames (string[]), jsxIconTag (default MaterialIcon).
• stitch-html: root, optional (default true — missing dir is skipped silently).

Emit options

file, format (woff | woff2), inline (boolean). When inline: false, fontFile is required (the font is written there and referenced by relative url()).

Commands

msym-sync                 # download subset font and write outputs
msym-sync --check         # CI mode: non-zero exit if any output is missing/outdated, writes nothing
msym-sync --collect-only  # offline: print the icon union and per-source counts
msym-sync --config <path> # override config discovery

CI

msym-sync --check

Fails the build when icons changed (new icon in code, or a new Stitch design) but the font wasn't regenerated.

Notes

• WOFF is fetched with a legacy User-Agent (miniprograms only support WOFF); WOFF2 uses a modern User-Agent. This is handled per format.
• Only Google-hosted Material Symbols are supported (uses the icon_names subsetter).

License

MIT