From c15940712405977d758650c1d52fca79ae8d7533 Mon Sep 17 00:00:00 2001
From: f-w <fred.wen@gov.bc.ca>
Date: Mon, 16 Dec 2024 11:03:38 -0800
Subject: [PATCH] use unplugin-fonts/vite to load font and icons

---
 client/index.html                   |  4 ----
 client/package-lock.json            |  8 +-------
 client/package.json                 |  3 +--
 client/src/plugins/index.js         |  2 --
 client/src/plugins/webfontloader.js | 17 -----------------
 client/vite.config.js               |  3 +++
 6 files changed, 5 insertions(+), 32 deletions(-)
 delete mode 100644 client/src/plugins/webfontloader.js

diff --git a/client/index.html b/client/index.html
index 85b69712f..43ccc36c3 100644
--- a/client/index.html
+++ b/client/index.html
@@ -5,10 +5,6 @@
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>NotifyBC Web Console</title>
-    <link
-      href="https://fonts.googleapis.com/icon?family=Material+Icons"
-      rel="stylesheet"
-    />
     <script type="text/javascript">
       var apiUrlPrefix = '<%- apiUrlPrefix %>';
       var oidcAuthority = '<%- oidcAuthority %>';
diff --git a/client/package-lock.json b/client/package-lock.json
index 3a15229a8..c0c7f0551 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -12,8 +12,7 @@
         "@iframe-resizer/child": "^5.3.2",
         "@iframe-resizer/parent": "^5.3.2",
         "vue": "^3.4.31",
-        "vuetify": "^3.6.14",
-        "webfontloader": "^1.0.0"
+        "vuetify": "^3.6.14"
       },
       "devDependencies": {
         "@eslint/js": "^9.14.0",
@@ -4367,11 +4366,6 @@
         }
       }
     },
-    "node_modules/webfontloader": {
-      "version": "1.6.28",
-      "resolved": "https://registry.npmjs.org/webfontloader/-/webfontloader-1.6.28.tgz",
-      "integrity": "sha512-Egb0oFEga6f+nSgasH3E0M405Pzn6y3/9tOVanv/DLfa1YBIgcv90L18YyWnvXkRbIM17v5Kv6IT2N6g1x5tvQ=="
-    },
     "node_modules/webpack-virtual-modules": {
       "version": "0.6.2",
       "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
diff --git a/client/package.json b/client/package.json
index 1fd3d633c..7a263596b 100644
--- a/client/package.json
+++ b/client/package.json
@@ -15,8 +15,7 @@
     "@iframe-resizer/child": "^5.3.2",
     "@iframe-resizer/parent": "^5.3.2",
     "vue": "^3.4.31",
-    "vuetify": "^3.6.14",
-    "webfontloader": "^1.0.0"
+    "vuetify": "^3.6.14"
   },
   "devDependencies": {
     "@eslint/js": "^9.14.0",
diff --git a/client/src/plugins/index.js b/client/src/plugins/index.js
index 04fd72ea0..cd788511a 100644
--- a/client/src/plugins/index.js
+++ b/client/src/plugins/index.js
@@ -9,10 +9,8 @@ import { createPinia } from 'pinia';
 import router from '../router';
 import { useDefaultStore } from '../store';
 import vuetify from './vuetify';
-import { loadFonts } from './webfontloader';
 
 export function registerPlugins(app) {
-  loadFonts();
   const pinia = createPinia();
   app.use(vuetify).use(router).use(pinia);
   app.config.globalProperties.$store = useDefaultStore();
diff --git a/client/src/plugins/webfontloader.js b/client/src/plugins/webfontloader.js
deleted file mode 100644
index 51caf7e8f..000000000
--- a/client/src/plugins/webfontloader.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * plugins/webfontloader.js
- *
- * webfontloader documentation: https://github.com/typekit/webfontloader
- */
-
-export async function loadFonts() {
-  const webFontLoader = await import(
-    /* webpackChunkName: "webfontloader" */ 'webfontloader'
-  );
-
-  webFontLoader.load({
-    google: {
-      families: ['Roboto:100,300,400,500,700,900&display=swap'],
-    },
-  });
-}
diff --git a/client/vite.config.js b/client/vite.config.js
index 340b27af1..81bdf1c38 100644
--- a/client/vite.config.js
+++ b/client/vite.config.js
@@ -38,6 +38,9 @@ export default async ({ mode }) => {
               name: 'Roboto',
               styles: 'wght@100;300;400;500;700;900',
             },
+            {
+              name: 'Material Icons',
+            },
           ],
         },
       }),