Move to material-icons (#30)

gen-mdi-list.mjs

@@ -0,0 +1,50 @@
+import fs from "fs";
+import readline from "readline";
+const codepoints = {};
+const availableIcons = [];
+
+let fileStream = fs.createReadStream("node_modules/material-icons/css/_codepoints.scss");
+
+let rl = readline.createInterface({
+  input: fileStream,
+  crlfDelay: Infinity,
+});
+
+for await (const line of rl) {
+  const r = /^\s*"(\w+)": (\w+)/.exec(line);
+  if (r != null) {
+    codepoints[r[1]] = r[2];
+  }
+}
+fileStream.close();
+
+fileStream = fs.createReadStream("node_modules/material-icons/index.d.ts");
+
+rl = readline.createInterface({
+  input: fileStream,
+  crlfDelay: Infinity,
+});
+
+for await (const line of rl) {
+  const r = /^\s*"(\w+)"/.exec(line);
+  if (r != null) {
+    availableIcons.push(r[1]);
+  }
+}
+fileStream.close();
+
+console.log(`import { type MaterialIcon } from "material-icons/index.d";`);
+console.log("");
+console.log("type IconListItem = Record<MaterialIcon, number>;");
+console.log("");
+console.log("export const iconCodepoints: IconListItem = {");
+
+for (const icon of availableIcons) {
+  if (icon in codepoints) {
+    console.log(`  "${icon}": 0x${codepoints[icon]},`);
+  }
+}
+
+console.log("};");
+console.log("");
+console.log('export { type MaterialIcon } from "material-icons/index.d";');

index.html

@@ -18,6 +18,8 @@
           href="node_modules/@fontsource-variable/noto-sans/files/noto-sans-latin-wght-normal.woff2"/>
     <link rel="preload" as="font" type="font/woff2" crossorigin="anonymous"
           href="node_modules/@fontsource-variable/noto-sans/files/noto-sans-cyrillic-wght-normal.woff2"/>
+    <link rel="preload" as="font" type="font/woff2" crossorigin="anonymous"
+          href="node_modules/material-icons/iconfont/material-icons.woff2"/>
 
     <title>%VITE_PAGE_TITLE%</title>
   </head>

package.json

@@ -10,18 +10,18 @@
 		"build": "vite build",
 		"build-rel": "vite build --base=./",
 		"preview": "vite preview",
-		"sv-check": "svelte-check --tsconfig ./tsconfig.json"
+		"sv-check": "svelte-check --tsconfig ./tsconfig.json",
+		"gen-mdi-list": "node gen-mdi-list.mjs > src/mdi_icons.ts"
 	},
 	"dependencies": {
 		"@fontsource-variable/noto-sans": "^5.0.5",
-		"@fortawesome/fontawesome-svg-core": "^6.5.2",
-		"@fortawesome/free-solid-svg-icons": "^6.5.2",
 		"@mmote/niimbluelib": "0.0.1-alpha.0",
 		"@popperjs/core": "^2.11.8",
 		"bootstrap": "5.3.3",
 		"d3-dsv": "^3.0.1",
 		"dayjs": "^1.11.13",
 		"fabric": "5.4.0-browser",
+		"material-icons": "^1.13.12",
 		"qrcode-svg": "^1.1.0"
 	},
 	"devDependencies": {

src/App.svelte

@@ -1,20 +1,5 @@
 <script lang="ts">
-  import { onMount } from "svelte";
   import MainPage from "./MainPage.svelte";
-  import { library } from "@fortawesome/fontawesome-svg-core";
-
-  let loading: boolean = true;
-
-  onMount(() => {
-    import("@fortawesome/free-solid-svg-icons").then((o) => {
-      library.add(o.fas);
-      loading = false;
-    });
-  });
 </script>
 
-{#if loading}
-  <div class="container my-2">Loading resources...</div>
-{:else}
-  <MainPage />
-{/if}
+<MainPage />

src/font.scss

@@ -18,3 +18,13 @@
   src: url(@fontsource-variable/noto-sans/files/noto-sans-cyrillic-wght-normal.woff2) format("woff2-variations");
   unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
+
+
+/* material-icons */
+@font-face {
+  font-family: "Material Icons";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(material-icons/iconfont/material-icons.woff2) format("woff2");
+}

src/lib/BarcodeParamsControls.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Barcode, type BarcodeCoding } from "../fabric-object/barcode.class";
   import { tr } from "../utils/i18n";
-  import FaIcon from "./FaIcon.svelte";
+  import MdIcon from "./MdIcon.svelte";
 
   export let selectedObject: fabric.Object | undefined;
   export let valueUpdated: () => void;
@@ -56,7 +56,7 @@
 
 {#if selectedBarcode}
   <div class="input-group input-group-sm flex-nowrap">
-    <span class="input-group-text" title={$tr("params.barcode.encoding", "Encoding")}><FaIcon icon="code" /></span>
+    <span class="input-group-text" title={$tr("params.barcode.encoding", "Encoding")}><MdIcon icon="code" /></span>
     <select class="form-select" bind:value={encoding} on:change={encodingChange}>
       <option value="EAN13">EAN13</option>
       <option value="CODE128B">Code128 B</option>
@@ -65,7 +65,7 @@
 
   <div class="input-group input-group-sm flex-nowrap">
     <span class="input-group-text" title={$tr("params.barcode.scale", "Scale factor")}>
-      <FaIcon icon="left-right" />
+      <MdIcon icon="settings_ethernet" />
     </span>
     <input class="barcode-width form-control" type="number" min="1" bind:value={scale} on:input={scaleChange} />
   </div>
@@ -79,14 +79,14 @@
   </button>
 
   <div class="input-group input-group-sm flex-nowrap">
-    <span class="input-group-text" title={$tr("params.barcode.font_size", "Font size")}><FaIcon icon="text-height" /></span
+    <span class="input-group-text" title={$tr("params.barcode.font_size", "Font size")}><MdIcon icon="format_size" /></span
     >
     <input class="barcode-width form-control" type="number" min="1" bind:value={fontSize} on:input={fontSizeChange} />
   </div>
 
   {#if encoding === "EAN13"}
     <div class="input-group input-group-sm flex-nowrap">
-      <span class="input-group-text" title={$tr("params.barcode.content", "Content")}><FaIcon icon="barcode" /></span>
+      <span class="input-group-text" title={$tr("params.barcode.content", "Content")}><MdIcon icon="view_week" /></span>
       <input class="barcode-content form-control" maxlength="12" bind:value={text} on:input={textChange} />
     </div>
   {:else}

src/lib/BrowserWarning.svelte

@@ -1,15 +1,16 @@
 <script lang="ts">
   import { Utils } from "@mmote/niimbluelib";
-  import FaIcon from "./FaIcon.svelte";
   import { tr } from "../utils/i18n";
+  import MdIcon from "./MdIcon.svelte";
   let bluetooth = Utils.isBluetoothSupported();
   let serial = Utils.isSerialSupported();
 </script>
 
 {#if !bluetooth && !serial}
   <div class="alert alert-danger" role="alert">
     <div>
-      {$tr("browser_warning.lines.first", "Oh no, your browser does not support bluetooth and serial communications")} <FaIcon icon="face-frown-open"/>
+      {$tr("browser_warning.lines.first", "Oh no, your browser does not support bluetooth and serial communications")}
+      <MdIcon icon="sentiment_very_dissatisfied"/>
     </div>
     <div>
       {$tr("browser_warning.lines.second", "Anyway, you still can draw labels.")}

src/lib/CsvControl.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-  import { onMount } from "svelte";
   import { tr } from "../utils/i18n";
-  import FaIcon from "./FaIcon.svelte";
   import { csvParse } from "d3-dsv";
+  import MdIcon from "./MdIcon.svelte";
 
   export let enabled: boolean;
   export let csv: string;
@@ -32,7 +31,7 @@
     data-bs-auto-close="outside"
     title={$tr("params.csv.title", "Dynamic label data (CSV)")}
   >
-    <FaIcon icon="table-list" />
+    <MdIcon icon="dataset" />
   </button>
   <div class="dropdown-menu">
     <h6 class="dropdown-header">{$tr("params.csv.title", "Dynamic label data (CSV)")}</h6>

src/lib/GenericObjectParamsControls.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { fabric } from "fabric";
-  import FaIcon from "./FaIcon.svelte";
   import { tr } from "../utils/i18n";
+  import MdIcon from "./MdIcon.svelte";
 
   export let selectedObject: fabric.Object;
   export let valueUpdated: () => void;
@@ -18,10 +18,10 @@
 </script>
 
 <button class="btn btn-sm btn-secondary" on:click={putToCenterV} title={$tr("params.generic.center.vertical", "Center vertically")}>
-  <FaIcon icon="up-down" />
+  <MdIcon icon="vertical_distribute"/>
 </button>
 <button class="btn btn-sm btn-secondary" on:click={putToCenterH} title={$tr("params.generic.center.horizontal", "Center horizontally")}>
-  <FaIcon icon="left-right" />
+  <MdIcon icon="horizontal_distribute"/>
 </button>
 
 <style>

src/lib/IconPicker.svelte

@@ -1,27 +1,23 @@
 <script lang="ts">
   import { onMount } from "svelte";
-  import FaIcon from "./FaIcon.svelte";
-  import { type IconName } from "@fortawesome/fontawesome-svg-core";
   import { tr } from "../utils/i18n";
+  import { iconCodepoints, type MaterialIcon } from "../mdi_icons";
+  import MdIcon from "./MdIcon.svelte";
 
-  export let onSubmit: (i: IconName) => void;
+  export let onSubmit: (i: MaterialIcon) => void;
 
-  let iconNames: IconName[] = [];
+  let iconNames: MaterialIcon[] = [];
   let search: string = "";
 
   onMount(async () => {
-    const { fas } = await import("@fortawesome/free-solid-svg-icons");
-
-    iconNames = Object.values(fas)
-      .map((e) => e.iconName)
-      .filter((value, index, array) => array.indexOf(value) === index);
+    iconNames = Object.keys(iconCodepoints) as MaterialIcon [];
   });
 </script>
 
 <div class="dropdown">
   <button class="btn btn-sm btn-secondary" data-bs-toggle="dropdown" data-bs-auto-close="outside">
-    <FaIcon icon="face-laugh" />
-    <FaIcon icon="plus" />
+    <MdIcon icon="emoji_emotions"/>
+    <MdIcon icon="add"/>
   </button>
 
   <div class="dropdown-menu">
@@ -32,11 +28,14 @@
         {#each iconNames as name}
           {#if !search || name.includes(search.toLowerCase())}
             <button class="btn me-1" title={name} on:click={() => onSubmit(name)}>
-              <FaIcon icon={name} />
+              <MdIcon icon={name}/>
             </button>
           {/if}
         {/each}
       </div>
+      <a href="https://fonts.google.com/icons?icon.set=Material+Icons&icon.style=Filled" target="_blank" class="text-secondary">
+        {$tr("editor.iconpicker.mdi_link_title", "See detailed list here")}
+      </a>
     </div>
   </div>
 </div>