wmt-polyicon 0.1.5

package/CHANGELOG.md

@@ -0,0 +1,65 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+## [0.1.5] — 2026-04-02
+
+### Fixed
+- Fixed an issue in `stroke-linecap="round"` conversion where inward SVG arcs caused generated icons (like `close.svg`) to render redundantly or blank instead of matching their outline.
+
+## [0.1.4] — 2026-04-02
+
+### Added
+- Stroke-to-fill conversion (`stroke_to_fill.js`) — stroked SVG paths (e.g. line icons from Figma/Heroicons) are now automatically converted to filled outlines for font generation, with support for round, square, and butt linecaps
+
+### Fixed
+- Unified shape extraction regex to correctly match both self-closing and paired SVG element tags in a single pass — the previous `||` alternation silently dropped closing tags from paired elements
+
+## [0.1.3] — 2026-04-02
+
+### Fixed
+- Blank icon generation for SVGs using non-path elements (`<circle>`, `<ellipse>`, `<rect>`, `<polygon>`, `<polyline>`, `<line>`) — previously only `<path>` elements were extracted, silently dropping all other shapes
+- White background rect stripping no longer removes closing tags from non-white rects
+
+## [0.1.2] — 2026-03-18
+
+### Fixed
+- `svgtofont` v6 is ESM-only — switched from `require()` to dynamic `import()` in `run_svgtofont.js` to resolve "svgtofont is not a function" error
+
+## [0.1.1] — 2026-03-18
+
+### Added
+- `.gitignore` — excludes `node_modules/` and tmp build dirs
+
+### Changed
+- `svgtofont` upgraded `4.x` → `6.5.1`
+- `fast-xml-parser` upgraded `4.x` → `5.5.6` (fixes CVE-2026-26278)
+- `CHANGELOG.md` included in published npm package via `files` field
+
+## [0.1.0] — 2026-03-18
+
+### Added
+- Interactive HTML preview (`polyicon-preview.html`) generated at the root of the output folder alongside fonts and CSS
+  - Live search filter by icon name
+  - Click any icon card to copy its class name to clipboard
+  - Displays unicode code point for each icon
+- Programmatic API — `const { buildIcons } = require('polyicon')`
+- `"main"` field in `package.json` pointing to `src/index.js`
+- Success log printed after `polyicon generate` completes
+
+### Fixed
+- `write_polyicon_config.js`: replaced `charCodeAt(0)` with `codePointAt(0)` for correct unicode handling above U+FFFF
+
+### Changed
+- `svgtofont` upgraded `4.x` → `6.5.1` — drops `del`/`node-gyp` chain, eliminating all deprecated transitive dependencies (`rimraf@3`, `glob@7`, `tar@6`, `npmlog`, `gauge`, `are-we-there-yet`, `inflight`)
+- `fast-xml-parser` upgraded `4.x` → `5.5.6` — fixes high-severity CVE-2026-26278 (numeric entity expansion bypass)
+- `npm audit`: 0 vulnerabilities, 0 deprecation warnings
+
+## [0.0.1] — initial release
+
+- SVG → icon font pipeline (`eot`, `svg`, `ttf`, `woff`, `woff2`)
+- Generated CSS with configurable font URL prefix (`importFontsPath`)
+- JS/TS types file (`IconTypes`)
+- Fontello-compatible `config.json` output
+- `polyicon init` and `polyicon generate` CLI commands
+- `.polyiconrc` config file support

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 WebMob Technologies Pvt. Ltd.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,121 @@
+# Polyicon
+
+SVG to icon font generator with HTML preview — Fontello-style output for React and web projects.
+
+Converts a folder of SVGs into `woff2`, `woff`, `ttf`, `eot`, `svg` font files plus a CSS file, a TypeScript/JS types file, and an interactive HTML preview page.
+
+## Install
+
+```bash
+# project dev dependency
+npm i -D polyicon
+
+# or global
+npm i -g polyicon
+
+# or one-off
+npx polyicon init
+```
+
+## Quick Start
+
+```bash
+polyicon init      # creates .polyiconrc with defaults
+polyicon generate  # builds fonts, CSS, types, and preview
+```
+
+Place your SVGs in the folder specified by `svg` in `.polyiconrc`, then run `generate`. Output folders are created automatically.
+
+## Config (`.polyiconrc`)
+
+```json
+{
+  "svg": "./src/assets/svg",
+  "outputFonts": "./src/assets/fontello/font",
+  "outputStyles": "./src/assets/fontello/css/polyicon.css",
+  "outputTypes": "./src/types/IconTypes.js",
+  "polyiconConfig": "./src/assets/fontello/config.json",
+  "importFontsPath": "../font/",
+  "formats": ["eot", "svg", "ttf", "woff", "woff2"]
+}
+```
+
+| Field | Required | Description |
+|---|---|---|
+| `svg` | ✓ | Folder containing your `.svg` files |
+| `outputFonts` | ✓ | Where font files are written |
+| `outputStyles` | | CSS file output path |
+| `outputTypes` | ✓ | JS or TS types file output path |
+| `polyiconConfig` | | Fontello-compatible `config.json` output path |
+| `importFontsPath` | | Font URL prefix in the generated CSS (e.g. `../font/`) |
+| `formats` | | Font formats to generate (default: all five) |
+
+SVG filenames become CSS class names. Spaces and special characters are auto-sanitised to hyphens. Use clean, single-colour SVGs — icon fonts are monochrome.
+
+## Output
+
+```
+src/assets/fontello/
+  polyicon-preview.html   ← interactive icon browser
+  css/
+    polyicon.css
+  font/
+    polyicon.eot
+    polyicon.svg
+    polyicon.ttf
+    polyicon.woff
+    polyicon.woff2
+  config.json
+src/types/
+  IconTypes.js
+```
+
+Open `polyicon-preview.html` in a browser to browse all generated icons, search by name, and click any card to copy its class name to the clipboard.
+
+## Usage in React
+
+Import the generated CSS once (e.g. in your root component or entry file):
+
+```jsx
+import "./assets/fontello/css/polyicon.css";
+```
+
+Use icons by class name:
+
+```jsx
+<i className="polyicon polyicon-home" />
+```
+
+Or with the generated types for autocomplete:
+
+```jsx
+import IconTypes from "./types/IconTypes";
+
+<i className={`polyicon polyicon-${IconTypes.HOME}`} />
+```
+
+## Programmatic API
+
+```js
+const { buildIcons } = require("polyicon");
+
+await buildIcons({
+  svg: "./src/assets/svg",
+  outputFonts: "./dist/fonts",
+  outputStyles: "./dist/polyicon.css",
+  outputTypes: "./src/types/IconTypes.js",
+  importFontsPath: "./fonts/",
+  formats: ["woff2", "woff", "ttf"]
+});
+```
+
+## CLI
+
+```
+polyicon init       Create .polyiconrc
+polyicon generate   Generate fonts, CSS, types, and preview
+
+Options:
+  -c, --config   Path to config (default: .polyiconrc)
+  -f, --force    Overwrite config on init
+```

package/bin/polyicon.js

@@ -0,0 +1,4 @@
+#!/usr/bin/env node
+const { run } = require("../src/cli");
+
+run(process.argv);

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "wmt-polyicon",
+  "version": "0.1.5",
+  "description": "SVG to icon font generator with HTML preview — Fontello-style output for React and web projects.",
+  "license": "MIT",
+  "type": "commonjs",
+  "main": "src/index.js",
+  "keywords": [
+    "polyicon",
+    "icon",
+    "icons",
+    "svg",
+    "font",
+    "iconfont",
+    "fontello",
+    "react",
+    "cli",
+    "woff",
+    "woff2",
+    "ttf"
+  ],
+  "files": [
+    "bin",
+    "src",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "bin": {
+    "polyicon": "bin/polyicon.js"
+  },
+  "scripts": {
+    "generate": "node bin/polyicon.js generate"
+  },
+  "dependencies": {
+    "fast-xml-parser": "^5.5.6",
+    "fs-extra": "^11.1.1",
+    "svgtofont": "^6.5.1"
+  }
+}

package/src/cli/commands/generate.js

@@ -0,0 +1,27 @@
+const fs = require("fs");
+const { loadConfig } = require("../../config/load");
+const { buildIcons } = require("../../generator");
+const { resolveFromCwd } = require("../../utils/paths");
+
+async function generateCommand({ configPath }) {
+  const absConfig = resolveFromCwd(configPath);
+  if (!fs.existsSync(absConfig)) {
+    throw new Error(`Missing config: ${configPath}. Run \`polyicon init\`.`);
+  }
+  const conf = loadConfig(absConfig);
+  if (!conf.svg) {
+    throw new Error("Missing `svg` path in config. Set it to your SVG folder.");
+  }
+  const absSvg = resolveFromCwd(conf.svg);
+  if (!fs.existsSync(absSvg)) {
+    throw new Error(
+      `SVG path not found: ${conf.svg}. Update \`svg\` in ${configPath}.`
+    );
+  }
+  await buildIcons(conf);
+  console.log(`Done. Generated ${conf.outputFonts} and preview HTML.`);
+}
+
+module.exports = {
+  generateCommand
+};

package/src/cli/commands/init.js

@@ -0,0 +1,22 @@
+const fs = require("fs");
+const path = require("path");
+const { DEFAULT_CONFIG } = require("../../config/defaults");
+const { resolveFromCwd } = require("../../utils/paths");
+const { ensureDir } = require("../../utils/fs");
+
+async function initCommand({ configPath, force }) {
+  const targetPath = resolveFromCwd(configPath);
+  if (fs.existsSync(targetPath) && !force) {
+    throw new Error(
+      `Config already exists at ${configPath}. Use --force to overwrite.`
+    );
+  }
+
+  await ensureDir(path.dirname(targetPath));
+  fs.writeFileSync(targetPath, JSON.stringify(DEFAULT_CONFIG, null, 2) + "\n");
+
+}
+
+module.exports = {
+  initCommand
+};

package/src/cli/index.js

@@ -0,0 +1,59 @@
+const { initCommand } = require("./commands/init");
+const { generateCommand } = require("./commands/generate");
+
+function getFlagValue(args, longName, shortName) {
+  const longIndex = args.indexOf(longName);
+  if (longIndex !== -1 && args[longIndex + 1]) return args[longIndex + 1];
+  const shortIndex = shortName ? args.indexOf(shortName) : -1;
+  if (shortIndex !== -1 && args[shortIndex + 1]) return args[shortIndex + 1];
+  return null;
+}
+
+function hasFlag(args, flag) {
+  return args.includes(flag);
+}
+
+function printHelp() {
+  console.log("polyicon <command>");
+  console.log("");
+  console.log("Commands:");
+  console.log("  init           Create .polyiconrc");
+  console.log("  generate       Generate fonts and types");
+  console.log("");
+  console.log("Options:");
+  console.log("  -c, --config   Path to config (default: ./.polyiconrc)");
+  console.log("  -f, --force    Overwrite config on init");
+}
+
+async function run(argv) {
+  const args = argv.slice(2);
+  const command = args[0];
+  const configPath = getFlagValue(args, "--config", "-c") || ".polyiconrc";
+  const force = hasFlag(args, "--force") || hasFlag(args, "-f");
+
+  try {
+    if (command === "init") {
+      await initCommand({ configPath, force });
+      console.log(`Created ${configPath}`);
+      console.log(
+        "Place SVGs in ./src/assets/svg and run `polyicon generate`."
+      );
+      return;
+    }
+
+    if (command === "generate") {
+      await generateCommand({ configPath });
+      return;
+    }
+
+    printHelp();
+    process.exit(command ? 1 : 0);
+  } catch (err) {
+    console.error(err && err.message ? err.message : err);
+    process.exit(1);
+  }
+}
+
+module.exports = {
+  run
+};

package/src/config/defaults.js

@@ -0,0 +1,14 @@
+const DEFAULT_CONFIG = {
+  svg: "./src/assets/svg",
+  outputFonts: "./src/assets/fontello/font",
+  importFontsPath: "../font/",
+  outputTypes: "./src/types/IconTypes.js",
+  outputStyles: "./src/assets/fontello/css/polyicon.css",
+  formats: ["eot", "svg", "ttf", "woff", "woff2"],
+  polyiconConfig: "./src/assets/fontello/config.json",
+  classPrefix: "icon"
+};
+
+module.exports = {
+  DEFAULT_CONFIG
+};

package/src/config/load.js

@@ -0,0 +1,15 @@
+const fs = require("fs");
+
+function loadConfig(filePath) {
+  const raw = fs.readFileSync(filePath, "utf8");
+  try {
+    return JSON.parse(raw);
+  } catch (err) {
+    const message = err && err.message ? err.message : "Invalid JSON";
+    throw new Error(`Invalid JSON in ${filePath}: ${message}`);
+  }
+}
+
+module.exports = {
+  loadConfig
+};

package/src/constants.js

@@ -0,0 +1,21 @@
+const WEBSITE = {
+  title: "polyicon",
+  version: 1,
+  logo: "logo.png",
+  meta: {
+    description: "Converts SVG icons to font files.",
+    keywords: "polyicon,TTF,EOT,WOFF,WOFF2,SVG"
+  },
+  links: []
+};
+
+const FONT_NAME = "polyicon";
+const CLASS_PREFIX = "icon";
+const TMP_DIR = ".polyicon_tmp";
+
+module.exports = {
+  WEBSITE,
+  FONT_NAME,
+  CLASS_PREFIX,
+  TMP_DIR
+};

package/src/generator/index.js

@@ -0,0 +1,116 @@
+const path = require("path");
+const fse = require("fs-extra");
+const { TMP_DIR, CLASS_PREFIX } = require("../constants");
+const { resolveFromCwd } = require("../utils/paths");
+const { runSvgToFont } = require("./run_svgtofont");
+const { parseGlyphs } = require("./parse_svg");
+const { writeTypes } = require("./write_types");
+const { writeCss } = require("./write_css");
+const { writeFonts } = require("./write_fonts");
+const { writeHtml } = require("./write_html");
+const { writePolyiconConfig } = require("./write_polyicon_config");
+const { convertStrokesToFills } = require("./stroke_to_fill");
+
+async function buildIcons(conf) {
+  const svgPath = resolveFromCwd(conf.svg);
+  const outputFontsPath = resolveFromCwd(conf.outputFonts);
+  const outputTypesPath = resolveFromCwd(conf.outputTypes);
+  const outputStylesPath = conf.outputStyles
+    ? resolveFromCwd(conf.outputStyles)
+    : null;
+  const polyiconConfigPath = conf.polyiconConfig
+    ? resolveFromCwd(conf.polyiconConfig)
+    : null;
+  const importFontsPath = conf.importFontsPath || "";
+  const formats = conf.formats || ["eot", "svg", "ttf", "woff", "woff2"];
+  const classPrefix = conf.classPrefix || CLASS_PREFIX;
+  const tmpPath = path.resolve(process.cwd(), TMP_DIR);
+  const tmpSvgPath = path.resolve(process.cwd(), `${TMP_DIR}_svgs`);
+
+  await fse.ensureDir(tmpSvgPath);
+  const svgFiles = (await fse.readdir(svgPath)).filter((file) =>
+    file.toLowerCase().endsWith(".svg")
+  );
+  if (!svgFiles.length) {
+    throw new Error(`No SVG files found in ${svgPath}.`);
+  }
+
+  const seen = new Map();
+  const sanitizeName = (name) => {
+    let safe = name
+      .replace(/[^a-zA-Z0-9]+/g, "-")
+      .replace(/-+/g, "-")
+      .replace(/^-+|-+$/g, "");
+    if (!safe) safe = "icon";
+    if (/^\d/.test(safe)) safe = `icon-${safe}`;
+    return safe;
+  };
+
+  for (const file of svgFiles) {
+    const inputPath = path.resolve(svgPath, file);
+    const baseName = path.basename(file, ".svg");
+    const safeBase = sanitizeName(baseName);
+    if (seen.has(safeBase)) {
+      throw new Error(
+        `Duplicate icon name after sanitizing: "${baseName}" conflicts with "${seen.get(
+          safeBase
+        )}". Rename one of the SVG files.`
+      );
+    }
+    seen.set(safeBase, baseName);
+    const outputPath = path.resolve(tmpSvgPath, `${safeBase}.svg`);
+    const raw = await fse.readFile(inputPath, "utf8");
+    const cleaned = raw
+      .replace(/<defs[\s\S]*?<\/defs>/gi, "")
+      .replace(/\sclip-path="[^"]*"/gi, "")
+      .replace(/\sclip-path='[^']*'/gi, "")
+      .replace(/\sfilter="[^"]*"/gi, "")
+      .replace(/\sfilter='[^']*'/gi, "")
+      .replace(/\smask="[^"]*"/gi, "")
+      .replace(/\smask='[^']*'/gi, "")
+      // Remove common white background rects (and their closing tags)
+      // that create square glyphs.
+      .replace(
+        /<rect\b[^>]*fill=["'](?:#fff|#ffffff|white)["'][^>]*(?:\/>|>(?:\s*<\/rect>)?)/gi,
+        ""
+      );
+    // Convert stroke-only paths to filled outlines — font renderers
+    // only understand fills, so stroked paths produce blank glyphs.
+    const converted = convertStrokesToFills(cleaned);
+    // Extract all SVG drawing elements — not just <path>.
+    // Covers circle, ellipse, rect, polygon, polyline, and line so icons
+    // built from basic shapes are no longer silently dropped.
+    const shapeTags = converted.match(
+      /<(path|circle|ellipse|rect|polygon|polyline|line)\b[^>]*>[\s\S]*?<\/\1>|<(?:path|circle|ellipse|rect|polygon|polyline|line)\b[^>]*\/>/gi
+    );
+    let outputSvg = converted;
+    if (shapeTags && shapeTags.length) {
+      const viewBoxMatch = converted.match(/viewBox="([^"]+)"/i);
+      const viewBoxAttr = viewBoxMatch ? ` viewBox="${viewBoxMatch[1]}"` : "";
+      outputSvg = `<svg xmlns="http://www.w3.org/2000/svg"${viewBoxAttr}>${shapeTags.join(
+        ""
+      )}</svg>`;
+    }
+    await fse.writeFile(outputPath, outputSvg, "utf8");
+  }
+
+  await runSvgToFont({ svgPath: tmpSvgPath, tmpPath, classPrefix });
+  const glyphs = await parseGlyphs(tmpPath);
+
+  await writeTypes({ outputTypesPath, glyphs });
+  await writePolyiconConfig({ outputPath: polyiconConfigPath, glyphs, classPrefix });
+  await writeCss({
+    tmpPath,
+    outputStylesPath,
+    importFontsPath
+  });
+  await writeFonts({ tmpPath, outputFontsPath, formats });
+  await writeHtml({ tmpPath, outputFontsPath, glyphs, classPrefix });
+
+  await fse.remove(tmpPath);
+  await fse.remove(tmpSvgPath);
+}
+
+module.exports = {
+  buildIcons
+};

package/src/generator/parse_svg.js

@@ -0,0 +1,57 @@
+const fse = require("fs-extra");
+const { XMLParser } = require("fast-xml-parser");
+const path = require("path");
+const { FONT_NAME } = require("../constants");
+
+async function parseGlyphs(tmpPath) {
+  const svgPath = path.resolve(tmpPath, `${FONT_NAME}.svg`);
+  const svg = await fse.readFile(svgPath, "utf8");
+  const parser = new XMLParser({
+    ignoreAttributes: false,
+    attributeNamePrefix: "",
+    processEntities: true,
+    htmlEntities: true
+  });
+  const json = parser.parse(svg);
+  const defs = json && json.svg && json.svg.defs ? json.svg.defs : null;
+  let font = defs && defs.font ? defs.font : null;
+  if (Array.isArray(font)) font = font[0];
+  let glyphs = font && font.glyph ? font.glyph : null;
+  if (!glyphs) {
+    throw new Error(`No glyphs found in ${svgPath}.`);
+  }
+  if (!(glyphs instanceof Array)) glyphs = [glyphs];
+
+  const normalizeUnicode = (value) => {
+    if (typeof value !== "string") return value;
+    if (value.startsWith("&#x") && value.endsWith(";")) {
+      const code = parseInt(value.slice(3, -1), 16);
+      if (!Number.isNaN(code)) return String.fromCharCode(code);
+    }
+    if (value.startsWith("&#") && value.endsWith(";")) {
+      const code = parseInt(value.slice(2, -1), 10);
+      if (!Number.isNaN(code)) return String.fromCharCode(code);
+    }
+    return value;
+  };
+
+  glyphs = glyphs.map((g) => {
+    if (!g) return g;
+    const unicode = normalizeUnicode(g.unicode);
+    return { ...g, unicode };
+  });
+
+  const invalid = glyphs.filter(
+    (g) => !g || !g["glyph-name"] || !g.unicode
+  );
+  if (invalid.length) {
+    throw new Error(
+      `Invalid glyphs in ${svgPath}. Expected glyph-name and unicode attributes.`
+    );
+  }
+  return glyphs;
+}
+
+module.exports = {
+  parseGlyphs
+};

package/src/generator/run_svgtofont.js

@@ -0,0 +1,22 @@
+const { WEBSITE, FONT_NAME } = require("../constants");
+
+async function runSvgToFont({ svgPath, tmpPath, classPrefix }) {
+  const mod = await import("svgtofont");
+  const svgtofont = mod.default;
+  await svgtofont({
+    src: svgPath,
+    dist: tmpPath,
+    fontName: FONT_NAME,
+    css: true,
+    classNamePrefix: classPrefix,
+    website: WEBSITE,
+    svgicons2svgfont: {
+      fontHeight: 1000,
+      normalize: true
+    }
+  });
+}
+
+module.exports = {
+  runSvgToFont
+};

package/src/generator/stroke_to_fill.js

@@ -0,0 +1,257 @@
+/**
+ * Convert stroked SVG elements to filled outlines.
+ *
+ * Font generators (svgtofont / svg2ttf) only render filled shapes.
+ * Stroke-only paths (e.g. line icons from Figma / Heroicons) produce
+ * zero-area glyphs → blank icons.  This module converts the most
+ * common stroke patterns into equivalent filled outlines that font
+ * renderers can handle.
+ *
+ * Supported:
+ *  - <path> with M/L/H/V commands (straight line segments)
+ *  - <line> elements
+ *  - Stroke linecaps: round, butt, square
+ */
+
+/**
+ * Parse an SVG path `d` attribute into an array of
+ * { cmd, args[] } objects.  Only absolute commands are
+ * handled here (the icons we target are already absolute).
+ */
+function parsePathData(d) {
+  const commands = [];
+  const re = /([MLHVZmlhvz])\s*([^MLHVZmlhvz]*)/gi;
+  let m;
+  while ((m = re.exec(d)) !== null) {
+    const cmd = m[1];
+    const nums = m[2]
+      .trim()
+      .split(/[\s,]+/)
+      .filter(Boolean)
+      .map(Number);
+    commands.push({ cmd, args: nums });
+  }
+  return commands;
+}
+
+/**
+ * Given a line segment (x1,y1)→(x2,y2), stroke-width `w` and
+ * linecap style, return an SVG path `d` string that represents
+ * the filled outline of that stroke.
+ */
+function lineToFilledPath(x1, y1, x2, y2, w, linecap) {
+  const hw = w / 2;
+  const dx = x2 - x1;
+  const dy = y2 - y1;
+  const len = Math.sqrt(dx * dx + dy * dy);
+  if (len === 0) {
+    // Degenerate: a dot → circle
+    return `M${x1 - hw} ${y1}A${hw} ${hw} 0 1 0 ${x1 + hw} ${y1}A${hw} ${hw} 0 1 0 ${x1 - hw} ${y1}Z`;
+  }
+
+  // Perpendicular offsets
+  const px = (-dy / len) * hw;
+  const py = (dx / len) * hw;
+
+  // Four corners of the stroke rectangle
+  const p1 = `${x1 + px} ${y1 + py}`;
+  const p2 = `${x2 + px} ${y2 + py}`;
+  const p3 = `${x2 - px} ${y2 - py}`;
+  const p4 = `${x1 - px} ${y1 - py}`;
+
+  if (linecap === "round") {
+    // Rectangle + semicircular arcs at each end
+    return `M${p1}L${p2}A${hw} ${hw} 0 0 0 ${p3}L${p4}A${hw} ${hw} 0 0 0 ${p1}Z`;
+  }
+
+  if (linecap === "square") {
+    // Extend rectangle by hw along the line direction at each end
+    const ex = (dx / len) * hw;
+    const ey = (dy / len) * hw;
+    const s1 = `${x1 - ex + px} ${y1 - ey + py}`;
+    const s2 = `${x2 + ex + px} ${y2 + ey + py}`;
+    const s3 = `${x2 + ex - px} ${y2 + ey - py}`;
+    const s4 = `${x1 - ex - px} ${y1 - ey - py}`;
+    return `M${s1}L${s2}L${s3}L${s4}Z`;
+  }
+
+  // butt (default)
+  return `M${p1}L${p2}L${p3}L${p4}Z`;
+}
+
+/**
+ * Detect whether a <path> is stroke-only (has stroke, no meaningful
+ * fill), extract the relevant attributes, and return filled
+ * replacement markup.  Returns `null` when conversion is not needed
+ * or not supported.
+ */
+function convertPathElement(tag) {
+  const attr = (name) => {
+    const re = new RegExp(`${name}\\s*=\\s*["']([^"']*)["']`, "i");
+    const m = tag.match(re);
+    return m ? m[1] : null;
+  };
+
+  const stroke = attr("stroke");
+  if (!stroke || stroke === "none") return null; // nothing to convert
+
+  const fill = attr("fill");
+  // If the element already has a visible fill, leave it alone
+  if (fill && fill !== "none") return null;
+
+  const d = attr("d");
+  if (!d) return null;
+
+  const strokeWidth = parseFloat(attr("stroke-width") || "1");
+  const linecap = attr("stroke-linecap") || "butt";
+
+  const commands = parsePathData(d);
+
+  // Collect line segments from consecutive M/L/H/V commands
+  const segments = [];
+  let cx = 0,
+    cy = 0,
+    startX = 0,
+    startY = 0;
+  let supported = true;
+
+  for (const { cmd, args } of commands) {
+    switch (cmd) {
+      case "M":
+        cx = args[0];
+        cy = args[1];
+        startX = cx;
+        startY = cy;
+        // M can carry implicit L args after the first pair
+        for (let i = 2; i + 1 < args.length; i += 2) {
+          segments.push({ x1: cx, y1: cy, x2: args[i], y2: args[i + 1] });
+          cx = args[i];
+          cy = args[i + 1];
+        }
+        break;
+      case "m":
+        cx += args[0];
+        cy += args[1];
+        startX = cx;
+        startY = cy;
+        for (let i = 2; i + 1 < args.length; i += 2) {
+          const nx = cx + args[i],
+            ny = cy + args[i + 1];
+          segments.push({ x1: cx, y1: cy, x2: nx, y2: ny });
+          cx = nx;
+          cy = ny;
+        }
+        break;
+      case "L":
+        for (let i = 0; i + 1 < args.length; i += 2) {
+          segments.push({ x1: cx, y1: cy, x2: args[i], y2: args[i + 1] });
+          cx = args[i];
+          cy = args[i + 1];
+        }
+        break;
+      case "l":
+        for (let i = 0; i + 1 < args.length; i += 2) {
+          const nx = cx + args[i],
+            ny = cy + args[i + 1];
+          segments.push({ x1: cx, y1: cy, x2: nx, y2: ny });
+          cx = nx;
+          cy = ny;
+        }
+        break;
+      case "H":
+        segments.push({ x1: cx, y1: cy, x2: args[0], y2: cy });
+        cx = args[0];
+        break;
+      case "h":
+        segments.push({ x1: cx, y1: cy, x2: cx + args[0], y2: cy });
+        cx += args[0];
+        break;
+      case "V":
+        segments.push({ x1: cx, y1: cy, x2: cx, y2: args[0] });
+        cy = args[0];
+        break;
+      case "v":
+        segments.push({ x1: cx, y1: cy, x2: cx, y2: cy + args[0] });
+        cy += args[0];
+        break;
+      case "Z":
+      case "z":
+        if (cx !== startX || cy !== startY) {
+          segments.push({ x1: cx, y1: cy, x2: startX, y2: startY });
+        }
+        cx = startX;
+        cy = startY;
+        break;
+      default:
+        // Curves, arcs, etc. — bail out and leave the element untouched
+        supported = false;
+        break;
+    }
+    if (!supported) break;
+  }
+
+  if (!supported || segments.length === 0) return null;
+
+  // Build filled outline for each segment
+  const color = stroke === "currentColor" ? "black" : stroke;
+  const paths = segments.map((s) => {
+    const outline = lineToFilledPath(
+      s.x1,
+      s.y1,
+      s.x2,
+      s.y2,
+      strokeWidth,
+      linecap
+    );
+    return `<path d="${outline}" fill="${color}"/>`;
+  });
+
+  return paths.join("");
+}
+
+/**
+ * Convert a <line> element to a filled path.
+ */
+function convertLineElement(tag) {
+  const attr = (name) => {
+    const re = new RegExp(`${name}\\s*=\\s*["']([^"']*)["']`, "i");
+    const m = tag.match(re);
+    return m ? m[1] : null;
+  };
+
+  const stroke = attr("stroke");
+  if (!stroke || stroke === "none") return null;
+
+  const x1 = parseFloat(attr("x1") || "0");
+  const y1 = parseFloat(attr("y1") || "0");
+  const x2 = parseFloat(attr("x2") || "0");
+  const y2 = parseFloat(attr("y2") || "0");
+  const strokeWidth = parseFloat(attr("stroke-width") || "1");
+  const linecap = attr("stroke-linecap") || "butt";
+
+  const color = stroke === "currentColor" ? "black" : stroke;
+  const outline = lineToFilledPath(x1, y1, x2, y2, strokeWidth, linecap);
+  return `<path d="${outline}" fill="${color}"/>`;
+}
+
+/**
+ * Main entry point — transform an SVG string, converting stroked
+ * elements to filled outlines where possible.
+ */
+function convertStrokesToFills(svgString) {
+  // Handle <path> elements (self-closing)
+  let result = svgString.replace(
+    /<path\b[^>]*\/?>/gi,
+    (match) => convertPathElement(match) || match
+  );
+
+  // Handle <line> elements (self-closing)
+  result = result.replace(
+    /<line\b[^>]*\/?>/gi,
+    (match) => convertLineElement(match) || match
+  );
+
+  return result;
+}
+
+module.exports = { convertStrokesToFills };

package/src/generator/write_css.js

@@ -0,0 +1,34 @@
+const fse = require("fs-extra");
+const path = require("path");
+const { ensureDir } = require("../utils/fs");
+const { FONT_NAME } = require("../constants");
+
+async function writeCss({ tmpPath, outputStylesPath, importFontsPath }) {
+  if (!outputStylesPath) return;
+
+  await ensureDir(path.dirname(outputStylesPath));
+
+  let css = await fse.readFile(
+    path.resolve(tmpPath, `${FONT_NAME}.css`),
+    "utf8"
+  );
+
+  while (css.indexOf(`url('${FONT_NAME}`) > -1) {
+    css = css.replace(
+      `url('${FONT_NAME}`,
+      `url('${importFontsPath}${FONT_NAME}`
+    );
+  }
+  while (css.indexOf(`url("${FONT_NAME}`) > -1) {
+    css = css.replace(
+      `url("${FONT_NAME}`,
+      `url("${importFontsPath}${FONT_NAME}`
+    );
+  }
+
+  await fse.writeFile(outputStylesPath, css, "utf8");
+}
+
+module.exports = {
+  writeCss
+};

package/src/generator/write_fonts.js

@@ -0,0 +1,25 @@
+const fse = require("fs-extra");
+const path = require("path");
+const { ensureDir } = require("../utils/fs");
+const { FONT_NAME } = require("../constants");
+
+async function writeFonts({ tmpPath, outputFontsPath, formats }) {
+  await ensureDir(outputFontsPath);
+
+  const copyIf = async (ext) => {
+    await fse.copy(
+      path.resolve(tmpPath, `${FONT_NAME}.${ext}`),
+      path.resolve(outputFontsPath, `${FONT_NAME}.${ext}`)
+    );
+  };
+
+  if (formats.includes("svg")) await copyIf("svg");
+  if (formats.includes("ttf")) await copyIf("ttf");
+  if (formats.includes("woff")) await copyIf("woff");
+  if (formats.includes("woff2")) await copyIf("woff2");
+  if (formats.includes("eot")) await copyIf("eot");
+}
+
+module.exports = {
+  writeFonts
+};

package/src/generator/write_html.js

@@ -0,0 +1,302 @@
+const fse = require("fs-extra");
+const path = require("path");
+const { ensureDir } = require("../utils/fs");
+const { FONT_NAME } = require("../constants");
+
+async function writeHtml({ tmpPath, outputFontsPath, glyphs, classPrefix }) {
+  const outputDir = path.dirname(outputFontsPath);
+  const fontsSubDir = path.basename(outputFontsPath);
+
+  let css = await fse.readFile(
+    path.resolve(tmpPath, `${FONT_NAME}.css`),
+    "utf8"
+  );
+
+  css = css.replace(
+    /url\((['"]?)([^'")\s]+\.(eot|woff2?|ttf|svg)[^'")\s]*)\1\)/gi,
+    (_, quote, href) => {
+      const q = quote || "'";
+      const file = href.split("?")[0];
+      const query = href.includes("?") ? "?" + href.split("?")[1] : "";
+      return `url(${q}${fontsSubDir}/${path.basename(file)}${query}${q})`;
+    }
+  );
+
+  const items = glyphs
+    .map((g) => {
+      const name = g["glyph-name"];
+      const className = `${classPrefix}-${name}`;
+      const code = g.unicode.codePointAt(0).toString(16).padStart(4, "0");
+      return `        <div class="icon-card" data-class="${classPrefix} ${className}" data-name="${className}">
+          <div class="icon-preview">
+            <i class="${classPrefix} ${className}"></i>
+          </div>
+          <div class="icon-info">
+            <span class="icon-name" title="${className}">${className}</span>
+            <span class="icon-code">U+${code.toUpperCase()}</span>
+          </div>
+          <button class="copy-btn" title="Copy class name">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
+            </svg>
+          </button>
+          <div class="copied-badge">Copied!</div>
+        </div>`;
+    })
+    .join("\n");
+
+  const html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>${FONT_NAME} — Icon Preview</title>
+  <style>
+${css}
+
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      background: #f0f2f5;
+      color: #1a1a1a;
+      min-height: 100vh;
+    }
+
+    /* ── Header ── */
+    .header {
+      background: #fff;
+      border-bottom: 1px solid #e5e7eb;
+      padding: 28px 40px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 16px;
+      flex-wrap: wrap;
+    }
+    .header-left h1 {
+      font-size: 20px;
+      font-weight: 700;
+      color: #111;
+      letter-spacing: -0.3px;
+    }
+    .header-left p {
+      font-size: 13px;
+      color: #6b7280;
+      margin-top: 2px;
+    }
+    .search-wrap {
+      position: relative;
+      flex: 0 0 260px;
+    }
+    .search-wrap svg {
+      position: absolute;
+      left: 10px;
+      top: 50%;
+      transform: translateY(-50%);
+      color: #9ca3af;
+      pointer-events: none;
+    }
+    #search {
+      width: 100%;
+      padding: 8px 12px 8px 34px;
+      border: 1px solid #d1d5db;
+      border-radius: 8px;
+      font-size: 13px;
+      outline: none;
+      background: #f9fafb;
+      transition: border-color 0.15s, background 0.15s;
+    }
+    #search:focus { border-color: #6366f1; background: #fff; }
+
+    /* ── Grid ── */
+    .grid-wrap { padding: 32px 40px; }
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+      gap: 12px;
+    }
+    .empty-msg {
+      display: none;
+      grid-column: 1 / -1;
+      text-align: center;
+      padding: 60px 0;
+      color: #9ca3af;
+      font-size: 14px;
+    }
+
+    /* ── Icon card ── */
+    .icon-card {
+      position: relative;
+      background: #fff;
+      border: 1px solid #e5e7eb;
+      border-radius: 10px;
+      padding: 20px 12px 14px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 10px;
+      cursor: pointer;
+      transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
+      overflow: hidden;
+    }
+    .icon-card:hover {
+      border-color: #6366f1;
+      box-shadow: 0 4px 16px rgba(99,102,241,0.12);
+      transform: translateY(-1px);
+    }
+    .icon-preview {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 48px;
+      height: 48px;
+    }
+    .icon-preview i { font-size: 30px; color: #374151; transition: color 0.15s; }
+    .icon-card:hover .icon-preview i { color: #6366f1; }
+    .icon-info {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 3px;
+      width: 100%;
+    }
+    .icon-name {
+      font-size: 11px;
+      color: #374151;
+      font-weight: 500;
+      text-align: center;
+      word-break: break-all;
+      line-height: 1.4;
+      max-width: 100%;
+    }
+    .icon-code {
+      font-size: 10px;
+      color: #9ca3af;
+      font-family: "SF Mono", "Fira Code", monospace;
+    }
+
+    /* ── Copy button ── */
+    .copy-btn {
+      position: absolute;
+      top: 7px;
+      right: 7px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      background: transparent;
+      border: none;
+      border-radius: 5px;
+      color: #9ca3af;
+      cursor: pointer;
+      opacity: 0;
+      transition: opacity 0.15s, background 0.15s, color 0.15s;
+    }
+    .icon-card:hover .copy-btn { opacity: 1; }
+    .copy-btn:hover { background: #f3f4f6; color: #6366f1; }
+
+    /* ── Copied badge ── */
+    .copied-badge {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: rgba(99,102,241,0.92);
+      color: #fff;
+      font-size: 12px;
+      font-weight: 600;
+      border-radius: 10px;
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.15s;
+    }
+    .icon-card.copied .copied-badge { opacity: 1; }
+
+    /* ── Footer ── */
+    .footer {
+      text-align: center;
+      padding: 24px;
+      color: #9ca3af;
+      font-size: 11px;
+      border-top: 1px solid #e5e7eb;
+      background: #fff;
+    }
+  </style>
+</head>
+<body>
+
+  <header class="header">
+    <div class="header-left">
+      <h1>${FONT_NAME}</h1>
+      <p id="count">${glyphs.length} icon${glyphs.length !== 1 ? "s" : ""}</p>
+    </div>
+    <div class="search-wrap">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
+      </svg>
+      <input id="search" type="text" placeholder="Search icons…" autocomplete="off" />
+    </div>
+  </header>
+
+  <main class="grid-wrap">
+    <div class="grid" id="grid">
+${items}
+      <div class="empty-msg" id="empty">No icons match your search.</div>
+    </div>
+  </main>
+
+  <footer class="footer">Generated by polyicon &nbsp;·&nbsp; ${glyphs.length} icons total</footer>
+
+  <script>
+    const cards = Array.from(document.querySelectorAll('.icon-card'));
+    const search = document.getElementById('search');
+    const empty = document.getElementById('empty');
+    const count = document.getElementById('count');
+    const total = ${glyphs.length};
+
+    // Copy on card click or copy-btn click
+    function copyClass(card, e) {
+      e.stopPropagation();
+      const cls = card.dataset.name;
+      navigator.clipboard.writeText(cls).then(() => {
+        card.classList.add('copied');
+        setTimeout(() => card.classList.remove('copied'), 1200);
+      });
+    }
+
+    cards.forEach(card => {
+      card.addEventListener('click', e => copyClass(card, e));
+      card.querySelector('.copy-btn').addEventListener('click', e => copyClass(card, e));
+    });
+
+    // Search filter
+    search.addEventListener('input', () => {
+      const q = search.value.trim().toLowerCase();
+      let visible = 0;
+      cards.forEach(card => {
+        const match = !q || card.dataset.name.toLowerCase().includes(q);
+        card.style.display = match ? '' : 'none';
+        if (match) visible++;
+      });
+      empty.style.display = visible === 0 ? 'block' : 'none';
+      count.textContent = q
+        ? visible + ' of ' + total + ' icon' + (total !== 1 ? 's' : '')
+        : total + ' icon' + (total !== 1 ? 's' : '');
+    });
+  </script>
+
+</body>
+</html>`;
+
+  await ensureDir(outputDir);
+  await fse.writeFile(
+    path.resolve(outputDir, `${FONT_NAME}-preview.html`),
+    html,
+    "utf8"
+  );
+}
+
+module.exports = { writeHtml };

package/src/generator/write_polyicon_config.js

@@ -0,0 +1,28 @@
+const { ensureFile, writeJson } = require("../utils/fs");
+const { FONT_NAME } = require("../constants");
+
+async function writePolyiconConfig({ outputPath, glyphs, classPrefix }) {
+  if (!outputPath) return;
+
+  const config = {
+    name: FONT_NAME,
+    css_prefix_text: `${classPrefix}-`,
+    css_use_suffix: false,
+    hinting: true,
+    units_per_em: 1000,
+    ascent: 850,
+    glyphs: glyphs.map((glyph) => {
+      return {
+        css: glyph["glyph-name"],
+        code: glyph.unicode.codePointAt(0)
+      };
+    })
+  };
+
+  await ensureFile(outputPath);
+  await writeJson(outputPath, config);
+}
+
+module.exports = {
+  writePolyiconConfig
+};

package/src/generator/write_types.js

@@ -0,0 +1,28 @@
+const fse = require("fs-extra");
+const path = require("path");
+const { toConstName } = require("../utils/strings");
+const { ensureFile } = require("../utils/fs");
+
+async function writeTypes({ outputTypesPath, glyphs }) {
+  const isTypescript = outputTypesPath.endsWith(".ts");
+  let types = "";
+
+  glyphs.forEach((glyph, index) => {
+    const line = isTypescript
+      ? `\t${toConstName(glyph["glyph-name"])} = '${glyph["glyph-name"]}',`
+      : `\t${toConstName(glyph["glyph-name"])}: '${glyph["glyph-name"]}',`;
+    types += line;
+    if (index < glyphs.length - 1) types += "\n";
+  });
+
+  const content = isTypescript
+    ? `enum IconTypes { ${types} } export default IconTypes; `
+    : `const IconTypes = { ${types} }; export default IconTypes; `;
+
+  await ensureFile(outputTypesPath);
+  await fse.writeFile(outputTypesPath, content, "utf8");
+}
+
+module.exports = {
+  writeTypes
+};

package/src/index.js

@@ -0,0 +1,3 @@
+const { buildIcons } = require("./generator");
+
+module.exports = { buildIcons };

package/src/utils/fs.js

@@ -0,0 +1,21 @@
+const fse = require("fs-extra");
+
+async function ensureDir(dirPath) {
+  if (!dirPath || dirPath === ".") return;
+  await fse.ensureDir(dirPath);
+}
+
+async function ensureFile(filePath) {
+  await fse.ensureFile(filePath);
+}
+
+async function writeJson(filePath, data) {
+  await fse.ensureFile(filePath);
+  await fse.writeJSON(filePath, data);
+}
+
+module.exports = {
+  ensureDir,
+  ensureFile,
+  writeJson
+};

package/src/utils/paths.js

@@ -0,0 +1,11 @@
+const path = require("path");
+
+function resolveFromCwd(inputPath) {
+  if (!inputPath) return inputPath;
+  if (path.isAbsolute(inputPath)) return inputPath;
+  return path.resolve(process.cwd(), inputPath);
+}
+
+module.exports = {
+  resolveFromCwd
+};

package/src/utils/strings.js

@@ -0,0 +1,11 @@
+function toConstName(value) {
+  let staticName = String(value).toUpperCase();
+  while (staticName.indexOf("-") > -1) {
+    staticName = staticName.replace("-", "_");
+  }
+  return staticName;
+}
+
+module.exports = {
+  toConstName
+};