use unplugin-fonts/vite to load font and icons

bcgov · Dec 16, 2024 · 92acba0 · 92acba0
1 parent b05be89
commit 92acba0
Show file tree

Hide file tree

Showing 6 changed files with 5 additions and 32 deletions.
diff --git 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
diff --git a/client/package.json b/client/package.json
@@ -14,8 +14,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
@@ -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
diff --git 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',
+            },
           ],
         },
       }),
-Original file line number
+Diff line change
@@ Expand Up / @@ -38,6 +38,9 @@ export default async ({ mode }) => { @@
                   name: 'Roboto',
                   styles: 'wght@100;300;400;500;700;900',
                 },
+                {
+                  name: 'Material Icons',
+                },
               ],
             },
           }),
@@ Expand Down @@