split the icon into multiple files

so icons won't get loaded if not used

.gitignore

@@ -20,5 +20,6 @@ docs/lexer/__pycache__/
 bun.lockb
 svg/*
 fonts/*
-!fonts/paisa.woff2
-!fonts/info.json
+!fonts/*.woff2
+!fonts/*.json
+!fonts/*.scss

download-svgs.js

@@ -1,4 +1,5 @@
 import { spawnSync } from "bun";
+import { join } from "path";
 import { mkdirSync, readFileSync, rmdirSync, writeFileSync } from "fs";
 import { locate } from "@iconify/json";
 import { IconSet } from "@iconify/tools";
@@ -9,6 +10,8 @@ const outputDir = "svg";
 
 async function downloadSVGs(sets) {
   for (const set of sets) {
+    const targetDir = join(outputDir, set);
+    mkdirSync(targetDir, { recursive: true });
     const filename = locate(set);
     const data = JSON.parse(readFileSync(filename, "utf8"));
     const iconSet = new IconSet(data);
@@ -33,7 +36,8 @@ async function downloadSVGs(sets) {
           'stroke-width="3px" stroke="currentColor"'
         );
       }
-      writeFileSync(`${outputDir}/${set}:${name}.svg`, svgString, "utf8");
+      const basename = `${name}.svg`;
+      writeFileSync(join(targetDir, basename), svgString, "utf8");
     });
   }
 }
@@ -44,7 +48,7 @@ async function main() {
   console.log("downloading arcticons");
   downloadSVGs(["arcticons"]);
   try {
-    spawnSync(["npx", "oslllo-svg-fixer", "-s", "svg", "-d", "svg"]);
+    spawnSync(["npx", "oslllo-svg-fixer", "-s", "svg/arcticons", "-d", "svg/arcticons"]);
   } catch (e) {
     // ignore
   }

fonts/arcticons.scss

@@ -0,0 +1,9 @@
+
+@font-face {
+  font-family: "arcticons";
+  font-style: normal;
+  font-weight: 900;
+  src: url("../fonts/arcticons.woff2") format("woff2");
+  unicode-range: U+F0001-F1D3D;
+  font-display: swap;
+}

fonts/fa6-brands.scss

@@ -0,0 +1,9 @@
+
+@font-face {
+  font-family: "fa6-brands";
+  font-style: normal;
+  font-weight: 900;
+  src: url("../fonts/fa6-brands.woff2") format("woff2");
+  unicode-range: U+F2356-F2544;
+  font-display: swap;
+}

fonts/fa6-regular-info.json

@@ -0,0 +1 @@
+{"codepoints":{"address-book":991922,"address-card":991923,"bell-slash":991924,"bell":991925,"bookmark":991926,"building":991927,"calendar-check":991928,"calendar-days":991929,"calendar-minus":991930,"calendar-plus":991931,"calendar-xmark":991932,"calendar":991933,"chart-bar":991934,"chess-bishop":991935,"chess-king":991936,"chess-knight":991937,"chess-pawn":991938,"chess-queen":991939,"chess-rook":991940,"circle-check":991941,"circle-dot":991942,"circle-down":991943,"circle-left":991944,"circle-pause":991945,"circle-play":991946,"circle-question":991947,"circle-right":991948,"circle-stop":991949,"circle-up":991950,"circle-user":991951,"circle-xmark":991952,"circle":991953,"clipboard":991954,"clock":991955,"clone":991956,"closed-captioning":991957,"comment-dots":991958,"comment":991959,"comments":991960,"compass":991961,"copy":991962,"copyright":991963,"credit-card":991964,"envelope-open":991965,"envelope":991966,"eye-slash":991967,"eye":991968,"face-angry":991969,"face-dizzy":991970,"face-flushed":991971,"face-frown-open":991972,"face-frown":991973,"face-grimace":991974,"face-grin-beam-sweat":991975,"face-grin-beam":991976,"face-grin-hearts":991977,"face-grin-squint-tears":991978,"face-grin-squint":991979,"face-grin-stars":991980,"face-grin-tears":991981,"face-grin-tongue-squint":991982,"face-grin-tongue-wink":991983,"face-grin-tongue":991984,"face-grin-wide":991985,"face-grin-wink":991986,"face-grin":991987,"face-kiss-beam":991988,"face-kiss-wink-heart":991989,"face-kiss":991990,"face-laugh-beam":991991,"face-laugh-squint":991992,"face-laugh-wink":991993,"face-laugh":991994,"face-meh-blank":991995,"face-meh":991996,"face-rolling-eyes":991997,"face-sad-cry":991998,"face-sad-tear":991999,"face-smile-beam":992000,"face-smile-wink":992001,"face-smile":992002,"face-surprise":992003,"face-tired":992004,"file-audio":992005,"file-code":992006,"file-excel":992007,"file-image":992008,"file-lines":992009,"file-pdf":992010,"file-powerpoint":992011,"file-video":992012,"file-word":992013,"file-zipper":992014,"file":992015,"flag":992016,"floppy-disk":992017,"folder-closed":992018,"folder-open":992019,"folder":992020,"font-awesome":992021,"futbol":992022,"gem":992023,"hand-back-fist":992024,"hand-lizard":992025,"hand-peace":992026,"hand-point-down":992027,"hand-point-left":992028,"hand-point-right":992029,"hand-point-up":992030,"hand-pointer":992031,"hand-scissors":992032,"hand-spock":992033,"hand":992034,"handshake":992035,"hard-drive":992036,"heart":992037,"hospital":992038,"hourglass-half":992039,"hourglass":992040,"id-badge":992041,"id-card":992042,"image":992043,"images":992044,"keyboard":992045,"lemon":992046,"life-ring":992047,"lightbulb":992048,"map":992049,"message":992050,"money-bill-1":992051,"moon":992052,"newspaper":992053,"notdef":992054,"note-sticky":992055,"object-group":992056,"object-ungroup":992057,"paper-plane":992058,"paste":992059,"pen-to-square":992060,"rectangle-list":992061,"rectangle-xmark":992062,"registered":992063,"share-from-square":992064,"snowflake":992065,"square-caret-down":992066,"square-caret-left":992067,"square-caret-right":992068,"square-caret-up":992069,"square-check":992070,"square-full":992071,"square-minus":992072,"square-plus":992073,"square":992074,"star-half-stroke":992075,"star-half":992076,"star":992077,"sun":992078,"thumbs-down":992079,"thumbs-up":992080,"trash-can":992081,"user":992082,"window-maximize":992083,"window-minimize":992084,"window-restore":992085}}

fonts/fa6-regular.scss

@@ -0,0 +1,9 @@
+
+@font-face {
+  font-family: "fa6-regular";
+  font-style: normal;
+  font-weight: 900;
+  src: url("../fonts/fa6-regular.woff2") format("woff2");
+  unicode-range: U+F22B2-F2355;
+  font-display: swap;
+}

fonts/fa6-solid.scss

@@ -0,0 +1,9 @@
+
+@font-face {
+  font-family: "fa6-solid";
+  font-style: normal;
+  font-weight: 900;
+  src: url("../fonts/fa6-solid.woff2") format("woff2");
+  unicode-range: U+F1D3E-F22B1;
+  font-display: swap;
+}

fonts/fluent-emoji-high-contrast.scss

@@ -0,0 +1,9 @@
+
+@font-face {
+  font-family: "fluent-emoji-high-contrast";
+  font-style: normal;
+  font-weight: 900;
+  src: url("../fonts/fluent-emoji-high-contrast.woff2") format("woff2");
+  unicode-range: U+F5B53-F615C;
+  font-display: swap;
+}

fonts/mdi.scss

@@ -0,0 +1,9 @@
+
+@font-face {
+  font-family: "mdi";
+  font-style: normal;
+  font-weight: 900;
+  src: url("../fonts/mdi.woff2") format("woff2");
+  unicode-range: U+F2545-F5B52;
+  font-display: swap;
+}

generate-font.js

@@ -1,7 +1,11 @@
+import _ from "lodash";
 import { writeFileSync } from "fs";
+import { join } from "path";
 import { createSVG, createTTF, createWOFF2 } from "svgtofont/lib/utils.js";
 
-const infoData = {};
+let infoData = {};
+
+let lastUnicode = 0xf0000;
 
 const options = {
   src: "svg",
@@ -23,12 +27,8 @@ const options = {
   css: false,
   getIconUnicode: (name, _unicode, startUnicode) => {
     startUnicode++;
-    const [library, symbol] = name.split(":");
-    if (!infoData[library]) {
-      infoData[library] = {};
-    }
-
-    infoData[library][symbol] = startUnicode;
+    lastUnicode = startUnicode;
+    infoData[name] = startUnicode;
     return [String.fromCodePoint(startUnicode), startUnicode];
   },
   startUnicode: 0xf0000,
@@ -36,14 +36,49 @@ const options = {
   generateInfoData: true
 };
 
-async function createFont() {
+async function createFont(font) {
+  infoData = {};
+  options.src = join("svg", font);
+  options.fontName = font;
+  options.startUnicode = lastUnicode++;
   await createSVG(options);
   const ttf = await createTTF(options);
   await createWOFF2(options, ttf);
 
   if (options.generateInfoData) {
-    writeFileSync("fonts/info.json", JSON.stringify(infoData), "utf8");
+    writeFileSync(`fonts/${font}-info.json`, JSON.stringify({ codepoints: infoData }), "utf8");
+
+    const min = _.min(Object.values(infoData));
+    const max = _.max(Object.values(infoData));
+
+    const scss = `
+@font-face {
+  font-family: "${font}";
+  font-style: normal;
+  font-weight: 900;
+  src: url("../fonts/${font}.woff2") format("woff2");
+  unicode-range: U+${min.toString(16).toUpperCase()}-${max.toString(16).toUpperCase()};
+  font-display: swap;
+}
+`;
+
+    writeFileSync(`fonts/${font}.scss`, scss, "utf8");
   }
 }
 
-createFont();
+async function createFonts(fonts) {
+  for (const font of fonts) {
+    await createFont(font);
+  }
+}
+
+const fonts = [
+  "arcticons",
+  "fa6-solid",
+  "fa6-regular",
+  "fa6-brands",
+  "mdi",
+  "fluent-emoji-high-contrast"
+];
+
+createFonts(fonts);

src/app.scss

@@ -1,7 +1,8 @@
 $body-size: 14px;
 
-$family-sans-serif: "Roboto Flex Variable", sans-serif, "Font Awesome 6 Free Solid";
-$family-sans-serif-icon: "Roboto Flex Variable", sans-serif, "Paisa";
+$family-sans-serif: "Roboto Flex Variable", sans-serif;
+$family-sans-serif-icon: "Roboto Flex Variable", sans-serif, "arcticons", "fa6-brands",
+  "fa6-regular", "fa6-solid", "fluent-emoji-high-contrast", "mdi";
 $family-monospace: "Roboto Mono Variable", monospace;
 
 $box-radius: 4px;
@@ -15,6 +16,7 @@ $danger-light: hsl(347, 90%, 96%);
 $switch-focus: none;
 
 @import "bulma/sass/utilities/_all.sass";
+@import "@fortawesome/fontawesome-free/scss/fontawesome.scss";
 
 $menu-item-hover-background-color: $link-light;
 $menu-item-active-color: $link-dark;
@@ -710,7 +712,9 @@ nav.breadcrumb a.is-inactive {
 }
 
 .breadcrumb.has-chevron-separator li + li::before {
-  content: "";
+  font-family: "Font Awesome 6 Free";
+  font-weight: 900;
+  content: unquote('"#{ $fa-var-chevron-right }"');
   color: $link;
 }
 

src/common.scss

@@ -8,22 +8,12 @@ $fa-font-path: "../node_modules/@fortawesome/fontawesome-free/webfonts";
 @import "@fortawesome/fontawesome-free/scss/regular.scss";
 @import "@fortawesome/fontawesome-free/scss/solid.scss";
 
-@font-face {
-  font-family: "Font Awesome 6 Free Solid";
-  font-style: normal;
-  font-weight: 900;
-  font-display: $fa-font-display;
-  src: url("#{$fa-font-path}/fa-solid-900.woff2") format("woff2");
-}
-
-$paisa-font-path: "../fonts";
-
-@font-face {
-  font-family: "Paisa";
-  font-style: normal;
-  font-weight: 900;
-  src: url("#{$paisa-font-path}/paisa.woff2") format("woff2");
-}
+@import "../fonts/arcticons.scss";
+@import "../fonts/fa6-brands.scss";
+@import "../fonts/fa6-regular.scss";
+@import "../fonts/fa6-solid.scss";
+@import "../fonts/fluent-emoji-high-contrast.scss";
+@import "../fonts/mdi.scss";
 
 @import "@fontsource-variable/roboto-flex";
 @import "@fontsource-variable/roboto-mono";

src/lib/icon.ts

@@ -1,7 +1,21 @@
 import _ from "lodash";
-import icons from "../../fonts/info.json";
+import arcticons from "../../fonts/arcticons-info.json";
+import fa6brands from "../../fonts/fa6-brands-info.json";
+import fa6regular from "../../fonts/fa6-regular-info.json";
+import fa6solid from "../../fonts/fa6-solid-info.json";
+import fluentemoji from "../../fonts/fluent-emoji-high-contrast-info.json";
+import mdi from "../../fonts/mdi-info.json";
 import { stemmer } from "stemmer";
 
+const icons = {
+  arcticons: arcticons["codepoints"],
+  "fa6-brands": fa6brands["codepoints"],
+  "fa6-regular": fa6regular["codepoints"],
+  "fa6-solid": fa6solid["codepoints"],
+  "fluent-emoji-high-contrast": fluentemoji["codepoints"],
+  mdi: mdi["codepoints"]
+};
+
 export function iconGlyph(symbol: string): string {
   if (!symbol) {
     return String.fromCodePoint(65533);