wmt-polyicon 0.1.5 → 0.2.0

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 All notable changes to this project will be documented in this file.
 
+## [0.2.0] — 2026-04-08
+
+### Added
+- **`fontName` config option** — controls font-family name and output filenames (default: `"fontello"`). Generate drop-in replacements for existing Fontello fonts
+- **`hashOutput` config option** — appends a content hash to the output folder for cache busting (default: `true`). Same icons = same hash; change an SVG = new hash. Old hashed folders are auto-deleted on regenerate
+- **Commented `.polyiconrc`** — `polyicon init` now creates a config file with inline comments explaining every field
+- **Improved CLI output** — `polyicon init` shows next steps; `polyicon generate` shows full output paths and usage example
+
+### Changed
+- Default output paths changed from `./src/assets/` to `./public/assets/` (more common in modern web projects)
+- Default `fontName` changed from `"polyicon"` to `"fontello"` — output now matches traditional Fontello structure
+- Default `outputStyles` changed from `polyicon.css` to `fontello.css`
+- Preview file renamed from `{fontName}-preview.html` to `demo.html`
+- Config parser now supports `//` comments in `.polyiconrc`
+
+## [0.1.6] — 2026-04-02
+
+### Fixed
+- Configurable `classPrefix` — the `.polyiconrc` `classPrefix` field now correctly propagates to CSS selectors, HTML preview, and config.json output
+
 ## [0.1.5] — 2026-04-02
 
 ### Fixed

package/README.md

@@ -1,121 +1,327 @@
-# Polyicon
+# wmt-polyicon
 
-SVG to icon font generator with HTML preview — Fontello-style output for React and web projects.
+SVG to icon font generator — drop in SVGs, get a production-ready Fontello-style icon font with one command.
 
-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.
+Converts a folder of SVGs into `woff2`, `woff`, `ttf`, `eot`, `svg` font files plus CSS, JS constants, and an interactive preview page.
+
+---
 
 ## Install
 
 ```bash
-# project dev dependency
-npm i -D polyicon
+# global (recommended)
+npm i -g wmt-polyicon
 
-# or global
-npm i -g polyicon
+# or project dev dependency
+npm i -D wmt-polyicon
 
 # or one-off
-npx polyicon init
+npx wmt-polyicon init
 ```
 
 ## Quick Start
 
 ```bash
-polyicon init      # creates .polyiconrc with defaults
-polyicon generate  # builds fonts, CSS, types, and preview
+polyicon init                    # creates .polyiconrc with defaults
+# edit .polyiconrc → set "svg" to your SVG folder
+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.
+That's it — 3 steps:
+
+1. `polyicon init`
+2. Change `"svg"` path in `.polyiconrc`
+3. `polyicon generate`
+
+---
 
 ## Config (`.polyiconrc`)
 
-```json
+Running `polyicon init` creates a fully commented config file:
+
+```jsonc
 {
-  "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",
+  // Path to your SVG icons folder (change this to your SVG folder)
+  "svg": "./public/assets/svg",
+
+  // Output paths
+  "outputFonts": "./public/assets/fontello/font",
+  "outputStyles": "./public/assets/fontello/css/fontello.css",
+  "outputTypes": "./public/assets/fontello/IconTypes.js",
+  "polyiconConfig": "./public/assets/fontello/config.json",
+
+  // Font URL prefix used inside the generated CSS (relative to CSS file)
   "importFontsPath": "../font/",
-  "formats": ["eot", "svg", "ttf", "woff", "woff2"]
+  // Font file formats to generate
+  "formats": ["eot", "svg", "ttf", "woff", "woff2"],
+  // Font family name used in CSS and font filenames
+  "fontName": "fontello",
+  // CSS class prefix (e.g. "icon" → .icon-home, "pi" → .pi-home)
+  "classPrefix": "icon",
+  // Append content hash to output folder for cache busting (e.g. fontello-a3f7b2c1/)
+  "hashOutput": true
 }
 ```
 
-| Field | Required | Description |
+### Config Reference
+
+| Field | Default | 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` | `./public/assets/svg` | **Required.** Folder containing your `.svg` icon files |
+| `outputFonts` | `./public/assets/fontello/font` | Where font files (`fontello.woff2`, etc.) are written |
+| `outputStyles` | `./public/assets/fontello/css/fontello.css` | CSS file output path |
+| `outputTypes` | `./public/assets/fontello/IconTypes.js` | JS constants file output path |
+| `polyiconConfig` | `./public/assets/fontello/config.json` | Fontello-compatible config output path |
+| `importFontsPath` | `../font/` | Font URL prefix in generated CSS — use relative path or CDN URL |
+| `formats` | `["eot","svg","ttf","woff","woff2"]` | Font formats to generate |
+| `fontName` | `fontello` | Font family name in CSS and font filenames |
+| `classPrefix` | `icon` | CSS class prefix for icons |
+| `hashOutput` | `true` | Append content hash to output folder for cache busting |
+
+---
+
+## Features
+
+### Font Name (`fontName`)
+
+Controls the font-family name in CSS and the output filenames.
+
+```jsonc
+"fontName": "fontello"     // → fontello.woff2, font-family: "fontello"
+"fontName": "myicons"      // → myicons.woff2, font-family: "myicons"
+```
+
+This means you can generate a **drop-in replacement** for an existing Fontello font — same filenames, same `font-family`, just upload to CDN.
+
+### Class Prefix (`classPrefix`)
+
+Controls the CSS class prefix for all icons. SVG filename becomes the icon name.
+
+```jsonc
+"classPrefix": "icon"      // → .icon-home, .icon-settings, .icon-user
+"classPrefix": "pi"        // → .pi-home, .pi-settings, .pi-user
+```
+
+### Cache Busting (`hashOutput`)
 
-SVG filenames become CSS class names. Spaces and special characters are auto-sanitised to hyphens. Use clean, single-colour SVGs — icon fonts are monochrome.
+When `true`, the output folder gets a content hash suffix:
+
+```
+fontello-5f3f3c64/
+  ├── css/fontello.css
+  ├── font/fontello.woff2 ...
+  ├── IconTypes.js
+  ├── config.json
+  └── demo.html
+```
+
+- **Same icons** → same hash → CDN cache works
+- **Add/remove/change an SVG** → new hash → CDN cache is busted automatically
+- Old hashed folders are auto-deleted on regenerate
+
+Set `"hashOutput": false` for a plain `fontello/` folder without hash.
+
+### CDN Support (`importFontsPath`)
+
+Controls the font URL prefix inside the generated CSS.
+
+```jsonc
+// Relative (default) — for local hosting
+"importFontsPath": "../font/"
+// → url('../font/fontello.woff2')
+
+// CDN — for remote hosting
+"importFontsPath": "https://cdn.example.com/font/"
+// → url('https://cdn.example.com/font/fontello.woff2')
+```
+
+### Stroke-to-Fill Conversion
+
+Line/stroke icons (e.g. from Figma, Heroicons) are automatically converted to filled outlines. Icon fonts only support fills — this conversion happens transparently so your stroke-based SVGs work out of the box.
+
+### SVG Sanitisation
+
+- Spaces and special characters in filenames are auto-sanitised to hyphens
+- `<defs>`, `clip-path`, `filter`, `mask` elements are stripped
+- White background `<rect>` elements are removed
+- Non-path elements (`<circle>`, `<ellipse>`, `<rect>`, `<polygon>`, `<polyline>`, `<line>`) are fully supported
+
+---
 
 ## 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
+fontello-5f3f3c64/
+  ├── css/
+  │   └── fontello.css          ← @font-face + all .icon-* classes
+  ├── font/
+  │   ├── fontello.woff2        ← primary web font
+  │   ├── fontello.woff
+  │   ├── fontello.ttf
+  │   ├── fontello.eot
+  │   └── fontello.svg
+  ├── IconTypes.js              ← JS constants for icon names
+  ├── config.json               ← Fontello-compatible glyph metadata
+  └── demo.html                 ← interactive icon browser (search, click to copy)
 ```
 
-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.
+Open `demo.html` in a browser to browse all icons, search by name, and click any card to copy its class name.
 
-## Usage in React
+---
 
-Import the generated CSS once (e.g. in your root component or entry file):
+## Usage
+
+### HTML
+
+```html
+<!-- Load CSS once -->
+<link rel="stylesheet" href="fontello/css/fontello.css" />
+
+<!-- Use icons -->
+<i class="icon-home"></i>
+<i class="icon-settings"></i>
+<i class="icon-arrow-right"></i>
+```
+
+### React / Next.js
+
+Import the CSS once in your root layout or entry file:
 
 ```jsx
-import "./assets/fontello/css/polyicon.css";
+// Option 1: <link> tag (for public/ assets or CDN)
+<link rel="stylesheet" href="/assets/fontello/css/fontello.css" />
+
+// Option 2: CSS import (for src/ assets)
+import "./assets/fontello/css/fontello.css";
 ```
 
-Use icons by class name:
+Use icons anywhere:
 
 ```jsx
-<i className="polyicon polyicon-home" />
+// Direct class name
+<i className="icon-home" />
+
+// With Tailwind — control size and color
+<i className="icon-home text-4xl text-blue-500" />
+
+// Dynamic from variable or CMS
+<i className={`icon-${iconName} text-2xl`} />
+```
+
+### Using IconTypes.js
+
+The generated `IconTypes.js` provides constants for every icon name:
+
+```js
+const IconTypes = {
+  HOME: 'home',
+  SETTINGS: 'settings',
+  ARROW_RIGHT: 'arrow-right',
+  // ...
+};
+export default IconTypes;
 ```
 
-Or with the generated types for autocomplete:
+Use for consistent, typo-free icon references:
 
 ```jsx
-import IconTypes from "./types/IconTypes";
+import IconTypes from "./fontello/IconTypes";
 
-<i className={`polyicon polyicon-${IconTypes.HOME}`} />
+<i className={`icon-${IconTypes.HOME}`} />
+<i className={`icon-${IconTypes.SETTINGS}`} />
 ```
 
+### Sizing and Coloring
+
+Icons are a **font**, so standard text CSS properties control their appearance:
+
+```css
+/* Size — use font-size */
+.icon-home { font-size: 24px; }
+.icon-home { font-size: 2rem; }
+
+/* Color — use color */
+.icon-home { color: #335fff; }
+
+/* Tailwind shorthand */
+<i class="icon-home text-4xl text-blue-500" />
+<i class="icon-home text-6xl text-red-600 hover:text-red-800" />
+```
+
+---
+
 ## 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/",
+const { buildIcons } = require("wmt-polyicon");
+
+const result = await buildIcons({
+  svg: "./icons",
+  outputFonts: "./dist/fontello/font",
+  outputStyles: "./dist/fontello/css/fontello.css",
+  outputTypes: "./dist/fontello/IconTypes.js",
+  importFontsPath: "../font/",
+  fontName: "fontello",
+  classPrefix: "icon",
+  hashOutput: true,
   formats: ["woff2", "woff", "ttf"]
 });
+
+console.log(result.outputDir);
+// → ./dist/fontello-a3f7b2c1
 ```
 
-## CLI
+---
+
+## CLI Reference
 
 ```
-polyicon init       Create .polyiconrc
-polyicon generate   Generate fonts, CSS, types, and preview
+polyicon <command> [options]
+
+Commands:
+  init           Create .polyiconrc with defaults and comments
+  generate       Generate fonts, CSS, types, and preview
 
 Options:
-  -c, --config   Path to config (default: .polyiconrc)
-  -f, --force    Overwrite config on init
+  -c, --config   Path to config file (default: .polyiconrc)
+  -f, --force    Overwrite existing config on init
+```
+
+### Examples
+
+```bash
+# Standard workflow
+polyicon init
+polyicon generate
+
+# Custom config path
+polyicon init --config icons.json
+polyicon generate --config icons.json
+
+# Overwrite existing config
+polyicon init --force
+```
+
+---
+
+## SVG Guidelines
+
+For best results, your SVG icons should be:
+
+- **Single colour** — icon fonts are monochrome (colour is applied via CSS)
+- **Square artboard** — e.g. 24×24, 32×32, or any consistent size
+- **Clean paths** — remove masks, filters, clip-paths (auto-stripped but cleaner input = better output)
+- **Filled or stroked** — both work (strokes are auto-converted to fills)
+
+SVG filenames become CSS class names:
 ```
+mobile-app.svg    → .icon-mobile-app
+Web-Development.svg → .icon-Web-Development
+AI ML Model.svg   → .icon-AI-ML-Model  (spaces → hyphens)
+```
+
+---
+
+## License
+
+MIT

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wmt-polyicon",
-  "version": "0.1.5",
-  "description": "SVG to icon font generator with HTML preview — Fontello-style output for React and web projects.",
+  "version": "0.2.0",
+  "description": "SVG to icon font generator — drop in SVGs, get a production-ready Fontello-style icon font with one command.",
   "license": "MIT",
   "type": "commonjs",
   "main": "src/index.js",
@@ -13,11 +13,16 @@
     "font",
     "iconfont",
     "fontello",
+    "svg-to-font",
+    "icon-font",
+    "webfont",
     "react",
+    "nextjs",
     "cli",
     "woff",
     "woff2",
-    "ttf"
+    "ttf",
+    "cache-busting"
   ],
   "files": [
     "bin",

package/src/cli/commands/generate.js

@@ -18,8 +18,17 @@ async function generateCommand({ configPath }) {
       `SVG path not found: ${conf.svg}. Update \`svg\` in ${configPath}.`
     );
   }
-  await buildIcons(conf);
-  console.log(`Done. Generated ${conf.outputFonts} and preview HTML.`);
+  const result = await buildIcons(conf);
+  const fontName = conf.fontName || "fontello";
+  const outDir = result.outputDir;
+  console.log(`\n✔ Generated successfully!\n`);
+  console.log(`  Output:  ${outDir}`);
+  console.log(`  Fonts:   ${outDir}/font/${fontName}.woff2 (+woff, ttf, eot, svg)`);
+  console.log(`  CSS:     ${outDir}/css/${fontName}.css`);
+  console.log(`  Types:   ${outDir}/IconTypes.js`);
+  console.log(`  Preview: ${outDir}/demo.html\n`);
+  console.log(`Usage in HTML/JSX:`);
+  console.log(`  <i class="icon-YourIconName"></i>\n`);
 }
 
 module.exports = {

package/src/cli/commands/init.js

@@ -13,7 +13,33 @@ async function initCommand({ configPath, force }) {
   }
 
   await ensureDir(path.dirname(targetPath));
-  fs.writeFileSync(targetPath, JSON.stringify(DEFAULT_CONFIG, null, 2) + "\n");
+
+  const configWithComments = `{
+  // ── REQUIRED ──────────────────────────────────────────────────
+  // Path to your SVG icons folder (change this to your SVG folder)
+  "svg": "${DEFAULT_CONFIG.svg}",
+
+  // ── OUTPUT PATHS ──────────────────────────────────────────────
+  "outputFonts": "${DEFAULT_CONFIG.outputFonts}",
+  "outputStyles": "${DEFAULT_CONFIG.outputStyles}",
+  "outputTypes": "${DEFAULT_CONFIG.outputTypes}",
+  "polyiconConfig": "${DEFAULT_CONFIG.polyiconConfig}",
+
+  // ── FONT SETTINGS ────────────────────────────────────────────
+  // Font URL prefix used inside the generated CSS (relative to CSS file)
+  "importFontsPath": "${DEFAULT_CONFIG.importFontsPath}",
+  // Font file formats to generate
+  "formats": ${JSON.stringify(DEFAULT_CONFIG.formats)},
+  // Font family name used in CSS and font filenames
+  "fontName": "${DEFAULT_CONFIG.fontName}",
+  // CSS class prefix (e.g. "icon" → .icon-home, "pi" → .pi-home)
+  "classPrefix": "${DEFAULT_CONFIG.classPrefix}",
+  // Append content hash to output folder for cache busting (e.g. fontello-a3f7b2c1/)
+  "hashOutput": ${DEFAULT_CONFIG.hashOutput}
+}
+`;
+
+  fs.writeFileSync(targetPath, configWithComments);
 
 }
 

package/src/cli/index.js

@@ -34,10 +34,10 @@ async function run(argv) {
   try {
     if (command === "init") {
       await initCommand({ configPath, force });
-      console.log(`Created ${configPath}`);
-      console.log(
-        "Place SVGs in ./src/assets/svg and run `polyicon generate`."
-      );
+      console.log(`\n✔ Created ${configPath}\n`);
+      console.log(`Next steps:`);
+      console.log(`  1. Update "svg" path in ${configPath} to your SVG folder`);
+      console.log(`  2. Run: polyicon generate\n`);
       return;
     }
 

package/src/config/defaults.js

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

package/src/config/load.js

@@ -2,8 +2,10 @@ const fs = require("fs");
 
 function loadConfig(filePath) {
   const raw = fs.readFileSync(filePath, "utf8");
+  // Strip single-line comments (// ...) so users can annotate .polyiconrc
+  const stripped = raw.replace(/^\s*\/\/.*$/gm, "").replace(/,\s*([}\]])/g, "$1");
   try {
-    return JSON.parse(raw);
+    return JSON.parse(stripped);
   } catch (err) {
     const message = err && err.message ? err.message : "Invalid JSON";
     throw new Error(`Invalid JSON in ${filePath}: ${message}`);

package/src/constants.js

@@ -9,7 +9,7 @@ const WEBSITE = {
   links: []
 };
 
-const FONT_NAME = "polyicon";
+const FONT_NAME = "fontello";
 const CLASS_PREFIX = "icon";
 const TMP_DIR = ".polyicon_tmp";
 

package/src/generator/index.js

@@ -1,6 +1,7 @@
 const path = require("path");
+const crypto = require("crypto");
 const fse = require("fs-extra");
-const { TMP_DIR, CLASS_PREFIX } = require("../constants");
+const { TMP_DIR, CLASS_PREFIX, FONT_NAME } = require("../constants");
 const { resolveFromCwd } = require("../utils/paths");
 const { runSvgToFont } = require("./run_svgtofont");
 const { parseGlyphs } = require("./parse_svg");
@@ -24,6 +25,7 @@ async function buildIcons(conf) {
   const importFontsPath = conf.importFontsPath || "";
   const formats = conf.formats || ["eot", "svg", "ttf", "woff", "woff2"];
   const classPrefix = conf.classPrefix || CLASS_PREFIX;
+  const fontName = conf.fontName || FONT_NAME;
   const tmpPath = path.resolve(process.cwd(), TMP_DIR);
   const tmpSvgPath = path.resolve(process.cwd(), `${TMP_DIR}_svgs`);
 
@@ -94,21 +96,59 @@ async function buildIcons(conf) {
     await fse.writeFile(outputPath, outputSvg, "utf8");
   }
 
-  await runSvgToFont({ svgPath: tmpSvgPath, tmpPath, classPrefix });
-  const glyphs = await parseGlyphs(tmpPath);
+  await runSvgToFont({ svgPath: tmpSvgPath, tmpPath, classPrefix, fontName });
+  const glyphs = await parseGlyphs(tmpPath, fontName);
 
   await writeTypes({ outputTypesPath, glyphs });
-  await writePolyiconConfig({ outputPath: polyiconConfigPath, glyphs, classPrefix });
+  await writePolyiconConfig({ outputPath: polyiconConfigPath, glyphs, classPrefix, fontName });
   await writeCss({
     tmpPath,
     outputStylesPath,
-    importFontsPath
+    importFontsPath,
+    fontName
   });
-  await writeFonts({ tmpPath, outputFontsPath, formats });
-  await writeHtml({ tmpPath, outputFontsPath, glyphs, classPrefix });
+  await writeFonts({ tmpPath, outputFontsPath, formats, fontName });
+  await writeHtml({ tmpPath, outputFontsPath, glyphs, classPrefix, fontName });
+
+  // Compute content hash BEFORE cleaning up tmp files
+  let contentHash = null;
+  if (conf.hashOutput !== false) {
+    const hashInput = crypto.createHash("md5");
+    const sortedFiles = [...seen.keys()].sort();
+    for (const name of sortedFiles) {
+      hashInput.update(name);
+      const svgContent = await fse.readFile(path.resolve(tmpSvgPath, `${name}.svg`), "utf8");
+      hashInput.update(svgContent);
+    }
+    contentHash = hashInput.digest("hex").slice(0, 8);
+  }
 
   await fse.remove(tmpPath);
   await fse.remove(tmpSvgPath);
+
+  // Rename output folder with hash suffix for cache busting
+  let finalOutputDir = path.dirname(outputFontsPath);
+  if (contentHash) {
+    const baseDir = path.dirname(outputFontsPath);
+    const baseName = path.basename(baseDir);
+    const parentDir = path.dirname(baseDir);
+    const hashedDir = path.resolve(parentDir, `${baseName}-${contentHash}`);
+
+    // Remove previous hashed folders
+    const siblings = await fse.readdir(parentDir);
+    for (const sibling of siblings) {
+      if (sibling.startsWith(`${baseName}-`) && sibling !== path.basename(hashedDir)) {
+        await fse.remove(path.resolve(parentDir, sibling));
+      }
+    }
+
+    // Rename fontello/ → fontello-<hash>/
+    if (await fse.pathExists(hashedDir)) await fse.remove(hashedDir);
+    await fse.move(baseDir, hashedDir);
+    finalOutputDir = hashedDir;
+  }
+
+  return { outputDir: finalOutputDir };
 }
 
 module.exports = {

package/src/generator/parse_svg.js

@@ -1,10 +1,8 @@
 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`);
+async function parseGlyphs(tmpPath, fontName) {
+  const svgPath = path.resolve(tmpPath, `${fontName}.svg`);
   const svg = await fse.readFile(svgPath, "utf8");
   const parser = new XMLParser({
     ignoreAttributes: false,

package/src/generator/run_svgtofont.js

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

package/src/generator/write_css.js

@@ -1,28 +1,26 @@
 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 }) {
+async function writeCss({ tmpPath, outputStylesPath, importFontsPath, fontName }) {
   if (!outputStylesPath) return;
 
   await ensureDir(path.dirname(outputStylesPath));
 
   let css = await fse.readFile(
-    path.resolve(tmpPath, `${FONT_NAME}.css`),
+    path.resolve(tmpPath, `${fontName}.css`),
     "utf8"
   );
 
-  while (css.indexOf(`url('${FONT_NAME}`) > -1) {
+  while (css.indexOf(`url('${fontName}`) > -1) {
     css = css.replace(
-      `url('${FONT_NAME}`,
-      `url('${importFontsPath}${FONT_NAME}`
+      `url('${fontName}`,
+      `url('${importFontsPath}${fontName}`
     );
   }
-  while (css.indexOf(`url("${FONT_NAME}`) > -1) {
+  while (css.indexOf(`url("${fontName}`) > -1) {
     css = css.replace(
-      `url("${FONT_NAME}`,
-      `url("${importFontsPath}${FONT_NAME}`
+      `url("${fontName}`,
+      `url("${importFontsPath}${fontName}`
     );
   }
 

package/src/generator/write_fonts.js

@@ -1,15 +1,13 @@
 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 }) {
+async function writeFonts({ tmpPath, outputFontsPath, formats, fontName }) {
   await ensureDir(outputFontsPath);
 
   const copyIf = async (ext) => {
     await fse.copy(
-      path.resolve(tmpPath, `${FONT_NAME}.${ext}`),
-      path.resolve(outputFontsPath, `${FONT_NAME}.${ext}`)
+      path.resolve(tmpPath, `${fontName}.${ext}`),
+      path.resolve(outputFontsPath, `${fontName}.${ext}`)
     );
   };
 

package/src/generator/write_html.js

@@ -1,14 +1,12 @@
 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 }) {
+async function writeHtml({ tmpPath, outputFontsPath, glyphs, classPrefix, fontName }) {
   const outputDir = path.dirname(outputFontsPath);
   const fontsSubDir = path.basename(outputFontsPath);
 
   let css = await fse.readFile(
-    path.resolve(tmpPath, `${FONT_NAME}.css`),
+    path.resolve(tmpPath, `${fontName}.css`),
     "utf8"
   );
 
@@ -50,7 +48,7 @@ async function writeHtml({ tmpPath, outputFontsPath, glyphs, classPrefix }) {
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>${FONT_NAME} — Icon Preview</title>
+  <title>${fontName} — Icon Preview</title>
   <style>
 ${css}
 
@@ -230,7 +228,7 @@ ${css}
 
   <header class="header">
     <div class="header-left">
-      <h1>${FONT_NAME}</h1>
+      <h1>${fontName}</h1>
       <p id="count">${glyphs.length} icon${glyphs.length !== 1 ? "s" : ""}</p>
     </div>
     <div class="search-wrap">
@@ -293,7 +291,7 @@ ${items}
 
   await ensureDir(outputDir);
   await fse.writeFile(
-    path.resolve(outputDir, `${FONT_NAME}-preview.html`),
+    path.resolve(outputDir, "demo.html"),
     html,
     "utf8"
   );

package/src/generator/write_polyicon_config.js

@@ -1,11 +1,9 @@
 const { ensureFile, writeJson } = require("../utils/fs");
-const { FONT_NAME } = require("../constants");
-
-async function writePolyiconConfig({ outputPath, glyphs, classPrefix }) {
+async function writePolyiconConfig({ outputPath, glyphs, classPrefix, fontName }) {
   if (!outputPath) return;
 
   const config = {
-    name: FONT_NAME,
+    name: fontName,
     css_prefix_text: `${classPrefix}-`,
     css_use_suffix: false,
     hinting: true,