Zenicons

Zenicons is a React icon package engineered for production usage rather than demo-only screenshots. It provides 3,201 typed SVG icon components generated from raw source files, with package outputs optimized for modern bundlers and conservative release safety checks for npm publishing.

Problem

Icon systems in real products often degrade into one of these patterns:

• ad-hoc inline SVG duplication across components
• inconsistent naming and style conventions between teams
• icon packs that are difficult to tree-shake, inflating bundle size
• brittle manual packaging that risks shipping unintended files

The objective for Zenicons was to create a repeatable icon pipeline that keeps authoring simple, runtime usage ergonomic, and publication predictable.

Solution

Zenicons uses a generation-first architecture:

1. Raw SVGs live in a canonical source directory.
2. Build scripts transform and normalize icon definitions.
3. Typed React component exports are generated automatically.
4. Distribution files are emitted in ESM, CommonJS, and declaration formats.
5. Pre-publish verification validates tarball contents and blocks unexpected artifacts.

This approach removes manual drift: fixes applied in generation logic improve the entire icon catalogue in a single pass.

Core capabilities

1) Typed React API

Each icon is exported as a React component with TypeScript support and shared IconProps:

• size (number | string, default 24)
• color (string, default currentColor)
• strokeWidth (number | string, default 1.5)
• title (accessibility label support)
• variant (stroke | fill, icon-level override)

This keeps icon usage concise while preserving full SVGProps<SVGSVGElement> compatibility.

2) Theme-friendly rendering

The pipeline normalizes common hardcoded dark fills and strokes to currentColor, allowing icons to inherit typography and theme context naturally without per-icon overrides.

3) Tree-shakeable packaging

The package sets sideEffects: false and exports modular entry points so bundlers can include only the icons imported by the application.

4) Searchable live catalogue

A Vite-powered demo (mic-360.github.io/zenicons) supports keyboard-first search (Ctrl/⌘ + K or /) and import-copy workflows to reduce icon lookup friction in day-to-day development.

5) Hardened release workflow

Zenicons emphasizes release integrity:

• npm publish surface restricted to minimal required files
• tarball inspection via npm pack --dry-run checks
• CI and release workflows in GitHub Actions
• npm provenance for traceable registry artifacts
• committed lockfiles for both package and demo environments

Developer workflow

The repository includes dedicated scripts for generation, build, verification, and demo validation:

• npm run generate — regenerate icon components and metadata from SVG sources
• npm run build — generate and emit package distribution files
• npm run verify:package — validate tarball content before publish
• npm run demo:build — build the catalogue application
• npm run check — run full package + demo verification

This supports consistent contributor onboarding and deterministic release execution.

Security posture

Zenicons includes an explicit security policy with:

• supported version communication (0.x series)
• vulnerability reporting channels
• scope definitions for package and automation risks
• guidance to avoid public exploit disclosure before remediation

For npm consumers, the practical outcome is improved confidence that published artifacts are constrained, auditable, and built through verifiable automation.

Outcome

Zenicons delivers a complete icon-library lifecycle:

• authoring from raw SVG sources
• generation of typed React components at scale
• distribution in multiple module formats
• discovery through a searchable live archive
• publishing with strict release safeguards

The result is a maintainable icon infrastructure package suited for design systems, product surfaces, and frontend platforms where consistency and reliability matter as much as visual coverage.