murl-icons

Murl's own icon set, drawn on a block grid. One pure path engine turns each grid definition into a single rounded SVG path (convex corners, concave fillets, optional diagonal "star" pinches), and a generator compiles the set into tree-shakable React components.

definitions/*.json  →  npm run generate  →  src/icons.generated.ts  →  dist/

Usage

npm install murl-icons

Per-icon imports (tree-shakable — only what you import ships):

import { HomeIcon, WalletIcon } from "murl-icons";

<HomeIcon size={20} className="text-muted-foreground" />

By-name lookup (bundles the whole set; drop-in for the old in-app component):

import { MurlIcon } from "murl-icons";

<MurlIcon name="home" size={20} />

Icons render fill="currentColor" and default to 24px, mirroring lucide. Pass aria-label for meaningful icons; they're aria-hidden otherwise.

The grid engine itself (gridToPath, gridToSvg, the IconDefinition format) is exported too, for tooling built on top of the set.

The maker

Every icon is authored in the maker — the grid designer + library browser:

npm install
npm run dev        # → http://localhost:5173

In local dev, Save writes definitions/<name>.json and regenerates src/icons.generated.ts on the spot (via the Vite dev endpoint), so a new icon is immediately part of the package source. Deleting from the library detail panel works the same way.

Deploy the maker as a read-only gallery (Cloudflare Worker, static assets):

npm run maker:deploy

On the deployed maker there is no filesystem, so Save falls back to downloading the definition JSON — drop it into definitions/ and run npm run generate.

Adding an icon (manual path)

1. Author it in the maker, or hand-write definitions/<name>.json (kebab-case name matching the filename; cells are [row, col] fills).
2. npm run generate
3. npm run test && npm run build

Publishing

npm login
npm publish        # prepublishOnly runs typecheck + tests + build

The package ships only dist/ (ESM + CJS + types), sideEffects: false, with React as a peer dependency. Once published, jsDelivr/unpkg serve it automatically (e.g. https://cdn.jsdelivr.net/npm/murl-icons/dist/index.js).