feat(web): use svg logo instead of png (#970)

* add fonts files to workbox

* remove logo.png and touches manifest assets

* install vite-plugin-svgr to import svg as react components

* move logo.svg from public to src

* replace logo.png to logo.svg

---------

Co-authored-by: ze0s <43699394+zze0s@users.noreply.github.com>

web/vite.config.ts

@@ -3,6 +3,8 @@ import { fileURLToPath, URL } from "node:url";
 import react from "@vitejs/plugin-react-swc";
 import { VitePWA } from "vite-plugin-pwa";
 import { defineConfig, loadEnv } from "vite";
+import svgr from "vite-plugin-svgr";
+
 // https://vitejs.dev/config/
 export default ({ mode }: { mode: any }) => {
   // early load .env file
@@ -11,20 +13,16 @@ export default ({ mode }: { mode: any }) => {
 
   return defineConfig({
     base: "",
-    plugins: [react(), VitePWA({
+    plugins: [react(), svgr(), VitePWA({
       registerType: "autoUpdate",
       injectRegister: "inline",
       scope: "{{.BaseUrl}}",
       // strategies: "injectManifest",
       useCredentials: true,
       includeAssets: [
-        "favicon.svg",
-        "favicon.ico",
-        "robots.txt",
-        "logo.png",
-        "apple-touch-icon-*.png",
-        "manifest.webmanifest",
-        "assets/**/*"
+        // looks inside "public" folder 
+        // manifest's icons are automatic added
+        "favicon.ico"
       ],
       manifest: {
         name: "autobrr",
@@ -33,31 +31,30 @@ export default ({ mode }: { mode: any }) => {
         theme_color: "#141415",
         background_color: "#141415",
         icons: [
-          {
-            src: "logo.png",
-            sizes: "192x192",
-            type: "image/png"
-          },
           {
             src: "logo192.png",
             sizes: "192x192",
             type: "image/png"
           },
           {
-            src: "logo512.png",
-            sizes: "512x512",
+            src: "apple-touch-icon-iphone-60x60.png",
+            sizes: "60x60",
             type: "image/png"
           },
           {
-            src: "logo512.png",
-            sizes: "512x512",
-            type: "image/png",
-            purpose: "any maskable"
+            src: "apple-touch-icon-ipad-76x76.png",
+            sizes: "76x76",
+            type: "image/png"
           },
           {
             src: "apple-touch-icon-iphone-retina-120x120.png",
             sizes: "120x120",
             type: "image/png"
+          },
+          {
+            src: "apple-touch-icon-ipad-retina-152x152.png",
+            sizes: "152x152",
+            type: "image/png"
           }
         ],
         start_url: "{{.BaseUrl}}",
@@ -65,7 +62,8 @@ export default ({ mode }: { mode: any }) => {
         display: "standalone"
       },
       workbox: {
-        globPatterns: ["**/*.{js,css,html,svg}"],
+        // looks inside "dist" folder
+        globPatterns: ["**/*.{js,css,html,svg,woff2}"],
         sourcemap: true,
         navigateFallbackDenylist: [/^\/api/]
       }