@epiled/icon-font-builder 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License Copyright (c) 2026 Felipe De Andrade
+
+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
+(including the next paragraph) 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,22 @@
+# icon-font-builder
+
+Generate icon fonts from SVG files.
+
+## Install
+
+npm install @epiled/icon-font-builder
+
+## CLI
+
+npx @epiled/icon-font-builder
+
+## Node API
+
+import { buildIcons } from "icon-font-builder";
+
+await buildIcons({
+inputDir: "src/icons",
+outputDir: "dist/fonts",
+cssClass: "icon",
+fontName: "icons"
+});

package/bin/cli.js

@@ -0,0 +1,12 @@
+#!/usr/bin/env node
+
+import { buildIcons } from "../src/build-icons.js";
+
+try {
+  await buildIcons();
+  console.log("✓ Icon font generated successfully");
+} catch (error) {
+  console.error("✖ Error generating icons:");
+  console.error(error);
+  process.exit(1);
+}

package/dist/assets/fonts/Epiled/Epiled.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<defs>
+  <font id="Epiled" horiz-adv-x="1000">
+    <font-face font-family="Epiled"
+      units-per-em="1000" ascent="1000"
+      descent="0" />
+    <missing-glyph horiz-adv-x="0" />
+    <glyph glyph-name="add-user"
+      unicode="&#xE001;"
+      horiz-adv-x="1000" d="M18.01171875 145.3720703125C18.01171875 230.4296875 52.6298828125 291.6953125 130.431640625 324.529296875C168.6845703125 340.4853515624999 207.8525390625 354.150390625 247.728515625 365.4521484375C312.919921875 384.2480468749999 356.3408203125 416.1298828125 332.0732421875 501.544921875C296.384765625 526.05078125 269.0234375 576.2529296875 255.4609375 619.3173828125C227.7421875 708.1826171875 212.515625 805.375 255.4609375 896.73828125C291.982421875 974.18359375 361.337890625 1000.236328125 441.5185546875 999.998046875C588.5556640625 999.998046875 675.3984375 882.1064453125 654.69921875 736.97265625C646.2529296875 677.4912109375 648.2753906250001 620.626953125 609.017578125 571.7333984375C600.771484375 558.421875 591.2919921875001 545.9150390625 580.7041015625 534.37890625C415.583984375 396.0263671875 395.00390625 346.775390625 422.6025390625 145.3720703125L18.01171875 145.3720703125zM954.484375 362.1220703125C941.7001953125 387.767578125 924.5517578125002 410.9951171875 903.806640625 430.763671875C902.2597656250002 432.4296875 900.5947265625001 433.9755859375 899.0478515625 435.4033203125C868.904296875 462.7607421875 832.572265625 482.3964843749999 793.1708984375 492.6240234375C790.5537109375 493.2187500000001 787.8173828125 493.9326171875001 785.0810546875 494.408203125C767.2080078125 498.4873046875 748.9287109375 500.5224609375 730.595703125 500.4755859375C707.5869140625 500.5234375 684.6845703125 497.3603515625 662.5498046875 491.0771484375001L656.1259765625 489.1738281250001C615.2773437500001 476.3525390625001 578.41015625 453.2490234375001 549.0595703125001 422.0791015625001L549.0595703125001 422.0791015625001C507.7802734375001 378.4111328125 483.6953125000001 321.2822265625 481.2509765625001 261.2421875C481.2509765625001 257.6738281250001 481.2509765625001 254.1044921875001 481.2509765625001 250.4169921875V248.39453125C481.2509765625001 240.423828125 481.2509765625001 232.572265625 482.5595703125 224.6015625C482.5595703125 221.8652343749999 482.5595703125 219.1289062499999 483.5117187500001 216.51171875C495.9794921875001 123.6474609375 559.3623046875 45.5673828125 647.6796875 14.2753906249999C671.9248046875 5.6201171874999 697.3720703125 0.8037109375 723.1025390625001 0C725.9570312500001 0 728.8125000000001 0 731.6679687500001 0C734.5224609375001 0 737.3779296875 0 740.232421875 0C773.4423828125 0.9912109375 806.1044921875 8.7216796875 836.2353515625001 22.7216796875C961.6513671875 80.2304687500001 1016.7011718750002 228.51953125 959.1923828125002 353.9355468750001C957.912109375 356.7285156250001 956.5800781250002 359.4970703125001 955.1972656250002 362.2402343750001L954.484375 362.1220703125zM772.4716796875 210.8017578125C748.6787109374999 181.4179687499999 796.263671875 107.8994140625 727.0283203125 111.23046875C671.2353515625 113.966796875 707.3994140625 177.373046875 692.0537109375 209.13671875C659.3388671875 229.1220703125 591.5302734375 187.0097656249999 592.36328125 251.25C593.0771484375 310.7314453125 656.484375 272.7822265625 691.578125 291.578125C707.6376953125001 324.5302734375001 670.521484375 387.69921875 729.2890625 388.8896484375001C794.1240234375 390.1982421875001 752.3681640625001 322.5087890625 770.92578125 290.5078125C802.5693359375 270.759765625 870.4970703125 313.2294921875001 869.6640625 248.990234375C868.9501953125 189.6259765625 806.1376953125 225.91015625 772.4716796875 210.8017578125L772.4716796875 210.8017578125z" />
+    <glyph glyph-name="arrow"
+      unicode="&#xE002;"
+      horiz-adv-x="1000" d="M77.2744140625 189.03125H522.251953125H922.9482421874998C991.5166015624998 189.03125 1025.8007812499998 283.4316406249999 977.2324218749998 338.7685546875L607.2480468749999 760.3115234375C547.9638671874999 827.8544921875 451.5429687499999 827.8544921875 392.2597656249999 760.3115234375L251.5507812500001 599.9921875L22.2744140625 338.7685546875C-25.578125 283.431640625 8.7060546875 189.03125 77.2744140625 189.03125z" />
+  </font>
+</defs>
+</svg>

package/dist/assets/fonts/Nova-Font/Nova-Font.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<defs>
+  <font id="Nova-Font" horiz-adv-x="1000">
+    <font-face font-family="Nova-Font"
+      units-per-em="1000" ascent="1000"
+      descent="0" />
+    <missing-glyph horiz-adv-x="0" />
+    <glyph glyph-name="add-user"
+      unicode="&#xE001;"
+      horiz-adv-x="1000" d="M18.01171875 145.3720703125C18.01171875 230.4296875 52.6298828125 291.6953125 130.431640625 324.529296875C168.6845703125 340.4853515624999 207.8525390625 354.150390625 247.728515625 365.4521484375C312.919921875 384.2480468749999 356.3408203125 416.1298828125 332.0732421875 501.544921875C296.384765625 526.05078125 269.0234375 576.2529296875 255.4609375 619.3173828125C227.7421875 708.1826171875 212.515625 805.375 255.4609375 896.73828125C291.982421875 974.18359375 361.337890625 1000.236328125 441.5185546875 999.998046875C588.5556640625 999.998046875 675.3984375 882.1064453125 654.69921875 736.97265625C646.2529296875 677.4912109375 648.2753906250001 620.626953125 609.017578125 571.7333984375C600.771484375 558.421875 591.2919921875001 545.9150390625 580.7041015625 534.37890625C415.583984375 396.0263671875 395.00390625 346.775390625 422.6025390625 145.3720703125L18.01171875 145.3720703125zM954.484375 362.1220703125C941.7001953125 387.767578125 924.5517578125002 410.9951171875 903.806640625 430.763671875C902.2597656250002 432.4296875 900.5947265625001 433.9755859375 899.0478515625 435.4033203125C868.904296875 462.7607421875 832.572265625 482.3964843749999 793.1708984375 492.6240234375C790.5537109375 493.2187500000001 787.8173828125 493.9326171875001 785.0810546875 494.408203125C767.2080078125 498.4873046875 748.9287109375 500.5224609375 730.595703125 500.4755859375C707.5869140625 500.5234375 684.6845703125 497.3603515625 662.5498046875 491.0771484375001L656.1259765625 489.1738281250001C615.2773437500001 476.3525390625001 578.41015625 453.2490234375001 549.0595703125001 422.0791015625001L549.0595703125001 422.0791015625001C507.7802734375001 378.4111328125 483.6953125000001 321.2822265625 481.2509765625001 261.2421875C481.2509765625001 257.6738281250001 481.2509765625001 254.1044921875001 481.2509765625001 250.4169921875V248.39453125C481.2509765625001 240.423828125 481.2509765625001 232.572265625 482.5595703125 224.6015625C482.5595703125 221.8652343749999 482.5595703125 219.1289062499999 483.5117187500001 216.51171875C495.9794921875001 123.6474609375 559.3623046875 45.5673828125 647.6796875 14.2753906249999C671.9248046875 5.6201171874999 697.3720703125 0.8037109375 723.1025390625001 0C725.9570312500001 0 728.8125000000001 0 731.6679687500001 0C734.5224609375001 0 737.3779296875 0 740.232421875 0C773.4423828125 0.9912109375 806.1044921875 8.7216796875 836.2353515625001 22.7216796875C961.6513671875 80.2304687500001 1016.7011718750002 228.51953125 959.1923828125002 353.9355468750001C957.912109375 356.7285156250001 956.5800781250002 359.4970703125001 955.1972656250002 362.2402343750001L954.484375 362.1220703125zM772.4716796875 210.8017578125C748.6787109374999 181.4179687499999 796.263671875 107.8994140625 727.0283203125 111.23046875C671.2353515625 113.966796875 707.3994140625 177.373046875 692.0537109375 209.13671875C659.3388671875 229.1220703125 591.5302734375 187.0097656249999 592.36328125 251.25C593.0771484375 310.7314453125 656.484375 272.7822265625 691.578125 291.578125C707.6376953125001 324.5302734375001 670.521484375 387.69921875 729.2890625 388.8896484375001C794.1240234375 390.1982421875001 752.3681640625001 322.5087890625 770.92578125 290.5078125C802.5693359375 270.759765625 870.4970703125 313.2294921875001 869.6640625 248.990234375C868.9501953125 189.6259765625 806.1376953125 225.91015625 772.4716796875 210.8017578125L772.4716796875 210.8017578125z" />
+    <glyph glyph-name="arrow"
+      unicode="&#xE002;"
+      horiz-adv-x="1000" d="M77.2744140625 189.03125H522.251953125H922.9482421874998C991.5166015624998 189.03125 1025.8007812499998 283.4316406249999 977.2324218749998 338.7685546875L607.2480468749999 760.3115234375C547.9638671874999 827.8544921875 451.5429687499999 827.8544921875 392.2597656249999 760.3115234375L251.5507812500001 599.9921875L22.2744140625 338.7685546875C-25.578125 283.431640625 8.7060546875 189.03125 77.2744140625 189.03125z" />
+  </font>
+</defs>
+</svg>

package/dist/css/Epiled.css

@@ -0,0 +1,31 @@
+
+
+@font-face {
+  font-family: 'Epiled';
+  src: 
+    url('../assets/fonts/Epiled/Epiled.woff2') format('woff2'),
+    url('../assets/fonts/Epiled/Epiled.woff') format('woff'),
+    url('../assets/fonts/Epiled/Epiled.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+  font-family: 'Epiled' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-add-user::before {
+  content: "\e001";
+}
+.icon-arrow::before {
+  content: "\e002";
+}

package/dist/css/Nova-Font.css

@@ -0,0 +1,31 @@
+
+
+@font-face {
+  font-family: 'Nova-Font';
+  src: 
+    url('../assets/fonts/Nova-Font/Nova-Font.woff2') format('woff2'),
+    url('../assets/fonts/Nova-Font/Nova-Font.woff') format('woff'),
+    url('../assets/fonts/Nova-Font/Nova-Font.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+  font-family: 'Nova-Font' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-add-user::before {
+  content: "\e001";
+}
+.icon-arrow::before {
+  content: "\e002";
+}

package/dist/icons-preview.html

@@ -0,0 +1,73 @@
+
+<html lang="pt-br">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Preview — Epiled</title>
+    <link rel="stylesheet" href="./css/epiled.css" />
+    <style>
+      body {
+        font-family: sans-serif;
+        background: #fafafa;
+        padding: 32px;
+      }
+      h1 {
+        font-size: 20px;
+        margin-bottom: 24px;
+      }
+      input {
+        padding: 8px;
+        font-size: 14px;
+        width: 300px;
+        margin-bottom: 24px;
+      }
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+        gap: 16px;
+      }
+      .icon-box {
+        text-align: center;
+        background: #fff;
+        border-radius: 8px;
+        padding: 12px;
+        border: 1px solid #eee;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
+      }
+      .icon-box i {
+        font-size: 32px;
+        color: #333;
+      }
+      .icon-name {
+        font-size: 12px;
+        color: #666;
+        margin-top: 6px;
+        word-break: break-all;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Pré-visualização: Epiled</h1>
+    <input
+      type="text"
+      id="search"
+      placeholder="Buscar ícone..."
+      onkeyup="filterIcons()"
+    />
+    <div class="grid" id="icons">
+        <div class="icon-box" data-name="icon-add-user">
+          <i class="icon icon-add-user"></i>
+          <div class="icon-name">icon-add-user</div>
+        </div>
+        <div class="icon-box" data-name="icon-arrow">
+          <i class="icon icon-arrow"></i>
+          <div class="icon-name">icon-arrow</div>
+        </div>
+    </div>
+    <script>
+      function filterIcons() { const term =
+      document.getElementById('search').value.toLowerCase();
+      document.querySelectorAll('.icon-box').forEach(box => { box.style.display
+      = box.dataset.name.toLowerCase().includes(term) ? '' : 'none'; }); }
+    </script>
+  </body>
+</html>

package/index.js

@@ -0,0 +1 @@
+export { buildIcons } from "./src/build-icons.js";

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@epiled/icon-font-builder",
+  "version": "1.0.0",
+  "description": "Generate icon fonts from SVG files",
+  "type": "module",
+  "main": "index.js",
+  "bin": {
+    "icon-font-builder": "./bin/cli.js"
+  },
+  "keywords": [
+    "icons",
+    "icon-font",
+    "svg",
+    "font",
+    "webfont"
+  ],
+  "author": "Felipe De Andrade (https://github.com/epiled)",
+  "license": "MIT",
+  "homepage": "https://github.com/epiled/icon-font-builder",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/epiled/icon-font-builder.git"
+  },
+  "bugs": {
+    "url": "https://github.com/epiled/icon-font-builder/issues"
+  },
+  "engines": {
+    "node": ">=20.12.2"
+  },
+  "dependencies": {
+    "handlebars": "^4.7.8",
+    "svg2ttf": "^6.0.3",
+    "svgicons2svgfont": "^15.0.1",
+    "ttf2woff": "^3.0.0",
+    "ttf2woff2": "^8.0.1"
+  },
+  "devDependencies": {},
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}

package/src/assets/svg/icons-ui/icon-add-user.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
+<g>
+	<path d="M18.444,875.139c0-87.099,35.449-149.835,115.118-183.457c39.171-16.339,79.279-30.332,120.112-41.905
+		c66.756-19.247,111.219-51.894,86.369-139.359c-36.545-25.094-64.563-76.501-78.451-120.599
+		c-28.384-90.998-43.976-190.523,0-284.079C298.99,26.436,370.01-0.242,452.115,0.002c150.566,0,239.493,120.721,218.297,269.338
+		c-8.649,60.909-6.578,119.138-46.778,169.205c-8.444,13.631-18.151,26.438-28.993,38.251
+		C425.558,618.469,404.484,668.902,432.745,875.139L18.444,875.139z"/>
+	<path d="M977.392,653.187c-13.091-26.261-30.651-50.046-51.894-70.289c-1.584-1.706-3.289-3.289-4.873-4.751
+		c-30.867-28.014-68.071-48.121-108.418-58.594c-2.68-0.609-5.482-1.34-8.284-1.827c-18.302-4.177-37.02-6.261-55.793-6.213
+		c-23.561-0.049-47.013,3.19-69.679,9.624l-6.578,1.949c-41.829,13.129-79.581,36.787-109.636,68.705l0,0
+		c-42.27,44.716-66.933,103.216-69.436,164.697c0,3.654,0,7.309,0,11.085v2.071c0,8.162,0,16.202,1.34,24.364
+		c0,2.802,0,5.604,0.975,8.284c12.767,95.093,77.671,175.047,168.108,207.09c24.827,8.863,50.885,13.795,77.233,14.618
+		c2.923,0,5.847,0,8.771,0c2.923,0,5.847,0,8.77,0c34.007-1.015,67.453-8.931,98.307-23.267
+		c128.426-58.889,184.797-210.737,125.908-339.163c-1.311-2.86-2.675-5.695-4.091-8.504L977.392,653.187z M791.011,808.139
+		c-24.364,30.089,24.363,105.372-46.534,101.961c-57.132-2.802-20.1-67.73-35.814-100.256
+		c-33.5-20.465-102.936,22.658-102.083-43.124c0.731-60.909,65.66-22.049,101.596-41.296c16.445-33.743-21.562-98.428,38.616-99.647
+		c66.391-1.34,23.633,67.974,42.636,100.743c32.403,20.222,101.961-23.267,101.108,42.514
+		C889.805,829.823,825.485,792.668,791.011,808.139L791.011,808.139z"/>
+</g>
+</svg>

package/src/assets/svg/icons-ui/icon-arrow.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
+<g>
+	<path d="M79.129,830.432h455.657h410.313c70.214,0,105.321-96.666,55.587-153.331l-378.864-431.66
+		c-60.707-69.164-159.442-69.164-220.148,0L257.588,409.608L22.809,677.101C-26.192,733.766,8.915,830.432,79.129,830.432z"/>
+</g>
+</svg>

package/src/build-icons.js

@@ -0,0 +1,34 @@
+import { createConfig } from "./config/create-config.js";
+
+import { scanIcons } from "./core/scan-icons.js";
+import { normalizeIcons } from "./core/normalize-naming.js";
+import { generateUnicodeMap } from "./core/generate-unicode-map.js";
+import { buildSvgFont } from "./core/build-svg-font.js";
+import { convertFonts } from "./core/convert-fonts.js";
+import { generateSass } from "./core/generate-sass.js";
+import { generateCss } from "./core/generate-css.js";
+import { generatePreview } from "./core/generate-preview.js";
+
+export async function buildIcons(userConfig = {}) {
+  const config = createConfig(userConfig);
+
+  const icons = scanIcons(config.inputDir);
+
+  const iconsNormalized = normalizeIcons(icons, config);
+
+  const glyphs = generateUnicodeMap(iconsNormalized);
+
+  await buildSvgFont(glyphs, config);
+
+  await convertFonts(config);
+
+  if (process.argv.slice(2).includes("--sass")) {
+    await generateSass(glyphs, config);
+  } else {
+    await generateCss(glyphs, config);
+  }
+
+  await generatePreview(glyphs, config);
+
+  return glyphs;
+}

package/src/config/create-config.js

@@ -0,0 +1,27 @@
+// Function to create custom configuration
+
+export function createConfig(userConfig = {}) {
+  const iconsName = userConfig.iconsName || "Epiled";
+
+  const fontName = userConfig.font?.fontName || iconsName;
+
+  const config = {
+    inputDir: userConfig.inputDir || "src/assets/svg/icons-ui",
+    outputDir: userConfig.outputDir || `dist/assets/fonts/${fontName}`,
+    iconsName,
+
+    font: {
+      fontName: userConfig.font?.folderName || fontName,
+      folderName: userConfig.font?.folderName || fontName,
+      fontFileName: userConfig.font?.fontFileName || fontName,
+      fontPath: userConfig.font?.fontPath || "../assets/fonts",
+    },
+
+    css: {
+      cssClass: userConfig.css?.cssClass || "icon-",
+      cssFileName: userConfig.css?.cssFileName || fontName.toLowerCase(),
+    },
+  };
+
+  return config;
+}

package/src/config/default-config.js

@@ -0,0 +1,20 @@
+// Default configuration
+
+const fontName = "Epiled";
+
+const defaultConfig = {
+  inputDir: "src/assets/svg/icons-ui",
+  outputDir: `dist/assets/fonts/${fontName}`,
+  font: {
+    fontName: fontName,
+    folderName: fontName,
+    fontFileName: fontName,
+    fontPath: "../assets/fonts",
+  },
+  css: {
+    cssClass: "icon-",
+    cssFileName: fontName.toLowerCase(),
+  },
+};
+
+export { defaultConfig };

package/src/core/build-svg-font.js

@@ -0,0 +1,44 @@
+// Step: 3
+
+import fs from "fs";
+import path from "path";
+
+async function buildSvgFont(icons, config) {
+  const { SVGIcons2SVGFontStream } = await import("svgicons2svgfont");
+
+  const { font, outputDir } = config;
+  const { fontName } = font;
+
+  const fontPath = path.join(outputDir, `${fontName}.svg`);
+
+  fs.mkdirSync(outputDir, { recursive: true });
+
+  return new Promise((resolve, reject) => {
+    const fontStream = new SVGIcons2SVGFontStream({
+      fontName,
+      normalize: true,
+      fontHeight: 1000,
+    });
+
+    const writeStream = fs.createWriteStream(fontPath);
+
+    fontStream.pipe(writeStream);
+
+    writeStream.on("finish", resolve);
+    writeStream.on("error", reject);
+
+    icons.forEach((icon) => {
+      const glyph = fs.createReadStream(icon.path);
+
+      glyph.metadata = {
+        unicode: [icon.unicode],
+        name: icon.name,
+      };
+      fontStream.write(glyph);
+    });
+
+    fontStream.end();
+  });
+}
+
+export { buildSvgFont };

package/src/core/convert-fonts.js

@@ -0,0 +1,33 @@
+// Step: 4
+
+import fs from "fs";
+import path from "path";
+
+import svg2ttf from "svg2ttf";
+import ttf2woff from "ttf2woff";
+import ttf2woff2 from "ttf2woff2";
+
+async function convertFonts(config) {
+  const { font, outputDir } = config;
+  const { fontName } = font;
+
+  const svgPath = path.join(outputDir, `${fontName}.svg`);
+  const ttfPath = path.join(outputDir, `${fontName}.ttf`);
+  const woffPath = path.join(outputDir, `${fontName}.woff`);
+  const woff2Path = path.join(outputDir, `${fontName}.woff2`);
+
+  const svg = fs.readFileSync(svgPath, "utf8");
+
+  // SVG → TTF
+  const ttf = svg2ttf(svg, {});
+  fs.writeFileSync(ttfPath, Buffer.from(ttf.buffer));
+
+  // TTF → WOFF
+  const woff = ttf2woff(ttf.buffer);
+  fs.writeFileSync(woffPath, Buffer.from(woff.buffer));
+
+  // TTF → WOFF2
+  const woff2 = ttf2woff2(ttf.buffer);
+  fs.writeFileSync(woff2Path, Buffer.from(woff2));
+}
+export { convertFonts };

package/src/core/generate-css.js

@@ -0,0 +1,60 @@
+// Step: 5
+
+import fs from "fs";
+import path from "path";
+import url from "url";
+import handlebars from "handlebars";
+
+const __filename = url.fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const iconsTemplatePath = path.resolve(__dirname, "../templates/icons.css.hbs");
+
+const baseIconTemplatePath = path.resolve(
+  __dirname,
+  "../templates/base-icons.hbs",
+);
+
+if (!fs.existsSync(baseIconTemplatePath))
+  throw new Error(`Base icons template not found: ${baseIconTemplatePath}`);
+
+handlebars.registerPartial(
+  "base-icons",
+  fs.readFileSync(baseIconTemplatePath, "utf8"),
+);
+
+function generateCss(glyphs = [], config) {
+  const { font, css } = config;
+  const { fontName, folderName, fontFileName, fontPath } = font;
+  const { cssClass } = css;
+
+  if (!fs.existsSync(iconsTemplatePath)) {
+    throw new Error(`Template CSS not found: ${iconsTemplatePath}`);
+  }
+
+  if (!Array.isArray(glyphs)) {
+    throw new Error(
+      "⚠️ generateCss called without valid glyphs array. This task should never run in isolation — it must be triggered by iconsBuild.",
+    );
+  }
+
+  const outputPath = path.join("dist/css", `${fontFileName}.css`);
+
+  fs.mkdirSync(path.dirname(outputPath), { recursive: true });
+
+  const cssRaw = fs.readFileSync(iconsTemplatePath, "utf8");
+  const cssCompiled = handlebars.compile(cssRaw);
+
+  const cssParse = cssCompiled({
+    fontName,
+    folderName,
+    fontFileName,
+    fontPath,
+    cssClass,
+    glyphs,
+  });
+
+  fs.writeFileSync(outputPath, cssParse);
+}
+
+export { generateCss };

package/src/core/generate-preview.js

@@ -0,0 +1,46 @@
+// Step: 6
+
+import fs from "fs";
+import path from "path";
+import url from "url";
+import handlebars from "handlebars";
+
+const __filename = url.fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const previewTemplatePath = path.resolve(
+  __dirname,
+  "../templates/icons-preview.hbs",
+);
+
+function generatePreview(glyphs = [], config) {
+  const { font, css } = config;
+  const { fontName } = font;
+  const { cssClass, cssFileName } = css;
+
+  if (!fs.existsSync(previewTemplatePath)) {
+    throw new Error(`Template preview not found: ${previewTemplatePath}`);
+  }
+
+  if (!Array.isArray(glyphs)) {
+    throw new Error(
+      "⚠️ generatePreview called without valid glyphs array. This task should never run in isolation — it must be triggered by iconsBuild.",
+    );
+  }
+
+  const previewRaw = fs.readFileSync(previewTemplatePath, "utf8");
+  const previewComplied = handlebars.compile(previewRaw);
+
+  const previewParse = previewComplied({
+    fontName,
+    cssClass,
+    cssFileName,
+    glyphs,
+  });
+
+  const outputPath = path.join("dist", `icons-preview.html`);
+
+  fs.writeFileSync(outputPath, previewParse);
+}
+
+export { generatePreview };

package/src/core/generate-sass.js

@@ -0,0 +1,63 @@
+// Step: 5
+
+import fs from "fs";
+import path from "path";
+import url from "url";
+import handlebars from "handlebars";
+
+const __filename = url.fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const iconsTemplatePath = path.resolve(
+  __dirname,
+  "../templates/icons.scss.hbs",
+);
+
+const baseIconTemplatePath = path.resolve(
+  __dirname,
+  "../templates/base-icons.hbs",
+);
+
+if (!fs.existsSync(baseIconTemplatePath))
+  throw new Error(`Base icons template not found: ${baseIconTemplatePath}`);
+
+handlebars.registerPartial(
+  "base-icons",
+  fs.readFileSync(baseIconTemplatePath, "utf8"),
+);
+
+function generateSass(glyphs = [], config) {
+  const { font, css } = config;
+  const { fontName, folderName, fontFileName, fontPath } = font;
+  const { cssClass } = css;
+
+  if (!fs.existsSync(iconsTemplatePath)) {
+    throw new Error(`Template SASS not found: ${iconsTemplatePath}`);
+  }
+
+  if (!Array.isArray(glyphs)) {
+    throw new Error(
+      "⚠️ generateSass called without valid glyphs array. This task should never run in isolation — it must be triggered by iconsBuild.",
+    );
+  }
+
+  const outputPath = path.join("dist/sass", `_${fontFileName}.scss`);
+
+  fs.mkdirSync(path.dirname(outputPath), { recursive: true });
+
+  const sassRaw = fs.readFileSync(iconsTemplatePath, "utf8");
+  const sassCompiled = handlebars.compile(sassRaw);
+
+  const sassParse = sassCompiled({
+    fontName,
+    folderName,
+    fontFileName,
+    fontPath,
+    cssClass,
+    glyphs,
+  });
+
+  fs.writeFileSync(outputPath, sassParse);
+}
+
+export { generateSass };

package/src/core/generate-unicode-map.js

@@ -0,0 +1,20 @@
+// Step: 2
+
+function generateUnicodeMap(icons) {
+  const baseCode = 0xe001;
+
+  return icons
+    .sort((a, b) => a.name.localeCompare(b.name))
+    .map((icon, index) => {
+      const code = baseCode + index;
+
+      return {
+        ...icon,
+        unicode: String.fromCharCode(code),
+        codepoint: code,
+        unicodeHex: code.toString(16),
+      };
+    });
+}
+
+export { generateUnicodeMap };

package/src/core/normalize-naming.js

@@ -0,0 +1,15 @@
+// Step: Normalize
+
+function normalizeIcons(icons = [], config) {
+  const prefix = config.css.cssClass || "";
+
+  return icons.map((icon) => ({
+    ...icon,
+    name:
+      prefix && icon.name.startsWith(prefix)
+        ? icon.name.slice(prefix.length)
+        : icon.name,
+  }));
+}
+
+export { normalizeIcons };

package/src/core/scan-icons.js

@@ -0,0 +1,28 @@
+// Step: 1
+
+import fs from "fs";
+import path from "path";
+
+function scanIcons(dir) {
+  if (!fs.existsSync(dir)) {
+    throw new Error(`Icons directory not found: ${dir}`);
+  }
+
+  const files = fs.readdirSync(dir);
+
+  if (files.length <= 0) {
+    throw new Error(`Not found files inside directory: ${dir}`);
+  }
+
+  const icons = files
+    .filter((file) => file.endsWith(".svg"))
+    .sort()
+    .map((file) => ({
+      name: path.basename(file, ".svg"),
+      path: path.join(dir, file).replace(/\\/g, "/"),
+    }));
+
+  return icons;
+}
+
+export { scanIcons };

package/src/templates/base-icons.hbs

@@ -0,0 +1,21 @@
+{{!-- 
+  Base @font-face template used by the icon font pipeline.
+  This template defines the font-family and source paths.
+ 
+  Variables:
+   - fontName       → Font family name
+   - fontPath       → Base path for font assets
+   - folderName     → Font output directory
+   - fontFileName   → Font file Name
+--}}
+
+@font-face {
+  font-family: '{{fontName}}';
+  src: 
+    url('{{fontPath}}/{{folderName}}/{{fontFileName}}.woff2') format('woff2'),
+    url('{{fontPath}}/{{folderName}}/{{fontFileName}}.woff') format('woff'),
+    url('{{fontPath}}/{{folderName}}/{{fontFileName}}.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}

package/src/templates/icons-preview.hbs

@@ -0,0 +1,83 @@
+{{!-- 
+  Icon font preview HTML template.
+
+  This template renders a preview page for all generated icons.
+
+  Variables:
+   - fontName     → Font family name
+   - glyphs       → Array of icon glyphs with 'name' property
+   - name         → Icon CSS class name (applied without prefix)
+   - cssClass     → Prefix icon CSS class name
+   - cssFileName  → CSS file name
+ --}}
+
+<html lang="pt-br">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Preview — {{fontName}}</title>
+    <link rel="stylesheet" href="./css/{{cssFileName}}.css" />
+    <style>
+      body {
+        font-family: sans-serif;
+        background: #fafafa;
+        padding: 32px;
+      }
+      h1 {
+        font-size: 20px;
+        margin-bottom: 24px;
+      }
+      input {
+        padding: 8px;
+        font-size: 14px;
+        width: 300px;
+        margin-bottom: 24px;
+      }
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+        gap: 16px;
+      }
+      .icon-box {
+        text-align: center;
+        background: #fff;
+        border-radius: 8px;
+        padding: 12px;
+        border: 1px solid #eee;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
+      }
+      .icon-box i {
+        font-size: 32px;
+        color: #333;
+      }
+      .icon-name {
+        font-size: 12px;
+        color: #666;
+        margin-top: 6px;
+        word-break: break-all;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Pré-visualização: {{fontName}}</h1>
+    <input
+      type="text"
+      id="search"
+      placeholder="Buscar ícone..."
+      onkeyup="filterIcons()"
+    />
+    <div class="grid" id="icons">
+      {{#each glyphs}}
+        <div class="icon-box" data-name="{{@root.cssClass}}{{name}}">
+          <i class="icon {{@root.cssClass}}{{name}}"></i>
+          <div class="icon-name">{{@root.cssClass}}{{name}}</div>
+        </div>
+      {{/each}}
+    </div>
+    <script>
+      function filterIcons() { const term =
+      document.getElementById('search').value.toLowerCase();
+      document.querySelectorAll('.icon-box').forEach(box => { box.style.display
+      = box.dataset.name.toLowerCase().includes(term) ? '' : 'none'; }); }
+    </script>
+  </body>
+</html>

package/src/templates/icons.css.hbs

@@ -0,0 +1,30 @@
+{{!--
+  Customize template to generate icon font CSS (Handlebars)
+  -------------------------------------------
+  {{fontName}}    → Font name (ex: studio-icons)
+  {{fontPath}}    → Relative path to font files (ex: ../fonts/)
+  {{cssClass}}    → Prefix used for classes (ex: icon)
+  {{../cssClass}} → Goes up one level in context (inside each)
+  {{name}}        → Name of the SVG file
+  {{unicodeHex}}  → Automatically generated Unicode code (\e900, \e901, etc.)
+--}}
+
+{{> base-icons}}
+
+[class^="{{cssClass}}"], [class*=" {{cssClass}}"] {
+  font-family: '{{fontName}}' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+{{#each glyphs}}
+.{{../cssClass}}{{name}}::before {
+  content: "\\{{unicodeHex}}";
+}
+{{/each}}

package/src/templates/icons.scss.hbs

@@ -0,0 +1,31 @@
+{{!--
+  Customize template to generate icon font CSS (Handlebars)
+  -------------------------------------------
+  {{fontName}}    → Font name (ex: studio-icons)
+  {{fontPath}}    → Relative path to font files (ex: ../fonts/)
+  {{cssClass}}    → Prefix used for classes (ex: icon)
+  {{../cssClass}} → Goes up one level in context (inside each)
+  {{name}}        → Name of the SVG file
+  {{unicodeHex}}  → Automatically generated Unicode code (\e900, \e901, etc.)
+--}}
+
+{{> base-icons}}
+
+%{{cssClass}} {
+  font-family: '{{fontName}}' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+{{#each glyphs}}
+.{{../cssClass}}{{name}}::before {
+  @extend %{{../cssClass}};
+  content: "\\{{unicodeHex}}";
+}
+{{/each}}