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>
2025-07-22 16:29:12 +00:00 · 2023-07-02 13:17:10 +01:00 · 2023-07-02 13:17:10 +01:00 · 32ffc875b0
commit 32ffc875b0
parent c361f23139
12 changed files with 215 additions and 45 deletions
--- a/web/package.json
+++ b/web/package.json
@ -74,6 +74,7 @@
    "tailwindcss": "^3.1.3",
    "typescript": "^4.7.3",
    "vite": "^4.3.9",
+    "vite-plugin-svgr": "^3.2.0",
    "vite-plugin-pwa": "^0.14.6",
    "workbox-window": "^6.5.4",
    "zod": "^3.21.4",
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@ -146,6 +146,9 @@ dependencies:
  vite-plugin-pwa:
    specifier: ^0.14.6
    version: 0.14.6(vite@4.3.9)(workbox-build@6.5.4)(workbox-window@6.5.4)
+  vite-plugin-svgr:
+    specifier: ^3.2.0
+    version: 3.2.0(rollup@2.79.1)(vite@4.3.9)
  workbox-window:
    specifier: ^6.5.4
    version: 6.5.4
@ -1826,6 +1829,21 @@ packages:
      rollup: 2.79.1
    dev: false

+  /@rollup/pluginutils@5.0.2(rollup@2.79.1):
+    resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@types/estree': 1.0.1
+      estree-walker: 2.0.2
+      picomatch: 2.3.1
+      rollup: 2.79.1
+    dev: false
+
  /@rollup/pluginutils@5.0.2(rollup@3.21.5):
    resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==}
    engines: {node: '>=14.0.0'}
@ -1850,6 +1868,127 @@ packages:
      string.prototype.matchall: 4.0.8
    dev: false

+  /@svgr/babel-plugin-add-jsx-attribute@7.0.0(@babel/core@7.21.8):
+    resolution: {integrity: sha512-khWbXesWIP9v8HuKCl2NU2HNAyqpSQ/vkIl36Nbn4HIwEYSRWL0H7Gs6idJdha2DkpFDWlsqMELvoCE8lfFY6Q==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.21.8
+    dev: false
+
+  /@svgr/babel-plugin-remove-jsx-attribute@7.0.0(@babel/core@7.21.8):
+    resolution: {integrity: sha512-iiZaIvb3H/c7d3TH2HBeK91uI2rMhZNwnsIrvd7ZwGLkFw6mmunOCoVnjdYua662MqGFxlN9xTq4fv9hgR4VXQ==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.21.8
+    dev: false
+
+  /@svgr/babel-plugin-remove-jsx-empty-expression@7.0.0(@babel/core@7.21.8):
+    resolution: {integrity: sha512-sQQmyo+qegBx8DfFc04PFmIO1FP1MHI1/QEpzcIcclo5OAISsOJPW76ZIs0bDyO/DBSJEa/tDa1W26pVtt0FRw==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.21.8
+    dev: false
+
+  /@svgr/babel-plugin-replace-jsx-attribute-value@7.0.0(@babel/core@7.21.8):
+    resolution: {integrity: sha512-i6MaAqIZXDOJeikJuzocByBf8zO+meLwfQ/qMHIjCcvpnfvWf82PFvredEZElErB5glQFJa2KVKk8N2xV6tRRA==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.21.8
+    dev: false
+
+  /@svgr/babel-plugin-svg-dynamic-title@7.0.0(@babel/core@7.21.8):
+    resolution: {integrity: sha512-BoVSh6ge3SLLpKC0pmmN9DFlqgFy4NxNgdZNLPNJWBUU7TQpDWeBuyVuDW88iXydb5Cv0ReC+ffa5h3VrKfk1w==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.21.8
+    dev: false
+
+  /@svgr/babel-plugin-svg-em-dimensions@7.0.0(@babel/core@7.21.8):
+    resolution: {integrity: sha512-tNDcBa+hYn0gO+GkP/AuNKdVtMufVhU9fdzu+vUQsR18RIJ9RWe7h/pSBY338RO08wArntwbDk5WhQBmhf2PaA==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.21.8
+    dev: false
+
+  /@svgr/babel-plugin-transform-react-native-svg@7.0.0(@babel/core@7.21.8):
+    resolution: {integrity: sha512-qw54u8ljCJYL2KtBOjI5z7Nzg8LnSvQOP5hPKj77H4VQL4+HdKbAT5pnkkZLmHKYwzsIHSYKXxHouD8zZamCFQ==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.21.8
+    dev: false
+
+  /@svgr/babel-plugin-transform-svg-component@7.0.0(@babel/core@7.21.8):
+    resolution: {integrity: sha512-CcFECkDj98daOg9jE3Bh3uyD9kzevCAnZ+UtzG6+BQG/jOQ2OA3jHnX6iG4G1MCJkUQFnUvEv33NvQfqrb/F3A==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.21.8
+    dev: false
+
+  /@svgr/babel-preset@7.0.0(@babel/core@7.21.8):
+    resolution: {integrity: sha512-EX/NHeFa30j5UjldQGVQikuuQNHUdGmbh9kEpBKofGUtF0GUPJ4T4rhoYiqDAOmBOxojyot36JIFiDUHUK1ilQ==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.21.8
+      '@svgr/babel-plugin-add-jsx-attribute': 7.0.0(@babel/core@7.21.8)
+      '@svgr/babel-plugin-remove-jsx-attribute': 7.0.0(@babel/core@7.21.8)
+      '@svgr/babel-plugin-remove-jsx-empty-expression': 7.0.0(@babel/core@7.21.8)
+      '@svgr/babel-plugin-replace-jsx-attribute-value': 7.0.0(@babel/core@7.21.8)
+      '@svgr/babel-plugin-svg-dynamic-title': 7.0.0(@babel/core@7.21.8)
+      '@svgr/babel-plugin-svg-em-dimensions': 7.0.0(@babel/core@7.21.8)
+      '@svgr/babel-plugin-transform-react-native-svg': 7.0.0(@babel/core@7.21.8)
+      '@svgr/babel-plugin-transform-svg-component': 7.0.0(@babel/core@7.21.8)
+    dev: false
+
+  /@svgr/core@7.0.0:
+    resolution: {integrity: sha512-ztAoxkaKhRVloa3XydohgQQCb0/8x9T63yXovpmHzKMkHO6pkjdsIAWKOS4bE95P/2quVh1NtjSKlMRNzSBffw==}
+    engines: {node: '>=14'}
+    dependencies:
+      '@babel/core': 7.21.8
+      '@svgr/babel-preset': 7.0.0(@babel/core@7.21.8)
+      camelcase: 6.3.0
+      cosmiconfig: 8.1.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /@svgr/hast-util-to-babel-ast@7.0.0:
+    resolution: {integrity: sha512-42Ej9sDDEmsJKjrfQ1PHmiDiHagh/u9AHO9QWbeNx4KmD9yS5d1XHmXUNINfUcykAU+4431Cn+k6Vn5mWBYimQ==}
+    engines: {node: '>=14'}
+    dependencies:
+      '@babel/types': 7.21.5
+      entities: 4.5.0
+    dev: false
+
+  /@svgr/plugin-jsx@7.0.0:
+    resolution: {integrity: sha512-SWlTpPQmBUtLKxXWgpv8syzqIU8XgFRvyhfkam2So8b3BE0OS0HPe5UfmlJ2KIC+a7dpuuYovPR2WAQuSyMoPw==}
+    engines: {node: '>=14'}
+    dependencies:
+      '@babel/core': 7.21.8
+      '@svgr/babel-preset': 7.0.0(@babel/core@7.21.8)
+      '@svgr/hast-util-to-babel-ast': 7.0.0
+      svg-parser: 2.0.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
  /@swc/core-darwin-arm64@1.3.56:
    resolution: {integrity: sha512-DZcu7BzDaLEdWHabz9DRTP0yEBLqkrWmskFcD5BX0lGAvoIvE4duMnAqi5F2B3X7630QioHRCYFoRw2WkeE3Cw==}
    engines: {node: '>=10'}
@ -2534,6 +2673,11 @@ packages:
    engines: {node: '>= 6'}
    dev: false

+  /camelcase@6.3.0:
+    resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==}
+    engines: {node: '>=10'}
+    dev: false
+
  /caniuse-lite@1.0.30001486:
    resolution: {integrity: sha512-uv7/gXuHi10Whlj0pp5q/tsK/32J2QSqVRKQhs2j8VsDCjgyruAh/eEXHF822VqO9yT6iZKw3nRwZRSPBE9OQg==}
    dev: false
@ -2636,6 +2780,16 @@ packages:
      yaml: 1.10.2
    dev: false

+  /cosmiconfig@8.1.3:
+    resolution: {integrity: sha512-/UkO2JKI18b5jVMJUp0lvKFMpa/Gye+ZgZjKD+DGEN9y7NRcf/nK1A0sp67ONmKtnDCNMS44E6jrk0Yc3bDuUw==}
+    engines: {node: '>=14'}
+    dependencies:
+      import-fresh: 3.3.0
+      js-yaml: 4.1.0
+      parse-json: 5.2.0
+      path-type: 4.0.0
+    dev: false
+
  /cross-spawn@7.0.3:
    resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
    engines: {node: '>= 8'}
@ -2787,6 +2941,11 @@ packages:
    resolution: {integrity: sha512-L9zlje9bIw0h+CwPQumiuVlfMcV4boxRjFIWDcLfFqTZNbkwOExBzfmswytHawObQX4OUhtNv8gIiB21kOurIg==}
    dev: false

+  /entities@4.5.0:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+    engines: {node: '>=0.12'}
+    dev: false
+
  /error-ex@1.3.2:
    resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
    dependencies:
@ -4839,6 +4998,10 @@ packages:
    engines: {node: '>= 0.4'}
    dev: false

+  /svg-parser@2.0.4:
+    resolution: {integrity: sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==}
+    dev: false
+
  /tailwindcss@3.1.3(postcss@8.4.14):
    resolution: {integrity: sha512-PRJNYdSIthrb8hjmAyymEyEN8Yo61TMXpzyFUpxULeeyRn3Y3gpvuw6FlRTKrJvK7thSGKRnhT36VovVx4WeMA==}
    engines: {node: '>=12.13.0'}
@ -5114,6 +5277,20 @@ packages:
      - supports-color
    dev: false

+  /vite-plugin-svgr@3.2.0(rollup@2.79.1)(vite@4.3.9):
+    resolution: {integrity: sha512-Uvq6niTvhqJU6ga78qLKBFJSDvxWhOnyfQSoKpDPMAGxJPo5S3+9hyjExE5YDj6Lpa4uaLkGc1cBgxXov+LjSw==}
+    peerDependencies:
+      vite: ^2.6.0 || 3 || 4
+    dependencies:
+      '@rollup/pluginutils': 5.0.2(rollup@2.79.1)
+      '@svgr/core': 7.0.0
+      '@svgr/plugin-jsx': 7.0.0
+      vite: 4.3.9(@types/node@18.0.0)
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+    dev: false
+
  /vite@4.3.9(@types/node@18.0.0):
    resolution: {integrity: sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==}
    engines: {node: ^14.18.0 || >=16.0.0}
--- a/web/public/logo.png
+++ b/web/public/logo.png
--- a/web/public/logo512.png
+++ b/web/public/logo512.png
--- a/web/src/components/alerts/NotFound.tsx
+++ b/web/src/components/alerts/NotFound.tsx
@ -4,20 +4,22 @@
 */

 import { Link } from "react-router-dom";
-import logo from "@app/logo.png";
+import { ReactComponent as Logo } from "@app/logo.svg";

 export const NotFound = () => {
  return (
    <div className="min-h-screen flex flex-col justify-center ">
-      <div className="flex justify-center"><img className="h-24 sm:h-48" src={logo} alt="Logo" /></div>
+      <div className="flex justify-center">
+        <Logo className="h-24 sm:h-48" />
+      </div>
      <h1 className="text-3xl text-center font-bold text-gray-900 dark:text-gray-200 my-8 px-2">
-          Oops, looks like there was a little too much brr!
+        Oops, looks like there was a little too much brr!
      </h1>
      <h3 className="text-xl text-center text-gray-700 dark:text-gray-400 mb-1 px-2">
        In case you think this a bug rather than too much brr,
      </h3>
      <h3 className="text-xl text-center text-gray-700 dark:text-gray-400 mb-1 px-2">
-          feel free to report this to our
+        feel free to report this to our
        {" "}
        <a
          rel="noopener noreferrer"
@ -25,7 +27,7 @@ export const NotFound = () => {
          href="https://github.com/autobrr/autobrr"
          className="text-gray-700 dark:text-gray-200 underline font-semibold underline-offset-2 decoration-sky-500 hover:decoration-2 hover:text-black hover:dark:text-gray-100"
        >
-            GitHub page
+          GitHub page
        </a>
        {" or to "}
        <a
@ -34,19 +36,19 @@ export const NotFound = () => {
          href="https://discord.gg/WQ2eUycxyT"
          className="text-gray-700 dark:text-gray-200 underline font-semibold underline-offset-2 decoration-purple-500 hover:decoration-2 hover:text-black hover:dark:text-gray-100"
        >
-            our official Discord channel
+          our official Discord channel
        </a>
-          .
+        .
      </h3>
      <h3 className="text-xl text-center leading-6 text-gray-700 dark:text-gray-400 mb-8 px-2">
-          Otherwise, let us help you to get you back on track for more brr!
+        Otherwise, let us help you to get you back on track for more brr!
      </h3>
      <div className="flex justify-center">
        <Link to="/">
          <button
            className="w-48 flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
          >
-          Back to Dashboard
+            Back to Dashboard
          </button>
        </Link>
      </div>
--- a/web/src/logo.png
+++ b/web/src/logo.png
--- a/web/public/logo.svg
+++ b/web/public/logo.svg
--- a/web/src/screens/Base.tsx
+++ b/web/src/screens/Base.tsx
@ -12,7 +12,7 @@ import { useMutation, useQuery } from "@tanstack/react-query";
 import toast from "react-hot-toast";

 import { AuthContext } from "@utils/Context";
-import logo from "@app/logo.png";
+import { ReactComponent as Logo } from "@app/logo.svg";
 import { APIClient } from "@api/APIClient";
 import Toast from "@components/notifications/Toast";
 import { classNames } from "@utils";
@ -70,16 +70,7 @@ export default function Base() {
                  <div className="flex items-center">
                    <div className="flex-shrink-0 flex items-center">
                      <Link to="/">
-                        <img
-                          className="block lg:hidden h-10 w-auto"
-                          src={logo}
-                          alt="Logo"
-                        />
-                        <img
-                          className="hidden lg:block h-10 w-auto"
-                          src={logo}
-                          alt="Logo"
-                        />
+                        <Logo className="h-10" />
                      </Link>
                    </div>
                    <div className="sm:ml-3 hidden sm:block">
--- a/web/src/screens/auth/login.tsx
+++ b/web/src/screens/auth/login.tsx
@ -10,7 +10,7 @@ import { useMutation } from "@tanstack/react-query";
 import toast from "react-hot-toast";
 import { Tooltip } from "react-tooltip";

-import logo from "@app/logo.png";
+import { ReactComponent as Logo } from "@app/logo.svg";
 import { APIClient } from "@api/APIClient";
 import { AuthContext } from "@utils/Context";
 import { PasswordInput, TextInput } from "@components/inputs/text";
@ -64,7 +64,7 @@ export const Login = () => {
  return (
    <div className="min-h-screen flex flex-col justify-center py-12 sm:px-6 lg:px-8">
      <div className="sm:mx-auto sm:w-full sm:max-w-md mb-6">
-        <img className="mx-auto h-12 w-auto" src={logo} alt="logo"/>
+        <Logo className="mx-auto h-12" />
        <h1 className="text-center text-gray-900 dark:text-gray-200 font-bold pt-2 text-2xl">
          autobrr
        </h1>
--- a/web/src/screens/auth/onboarding.tsx
+++ b/web/src/screens/auth/onboarding.tsx
@ -9,7 +9,7 @@ import { useNavigate } from "react-router-dom";

 import { APIClient } from "@api/APIClient";
 import { TextField, PasswordField } from "@components/inputs";
-import logo from "@app/logo.png";
+import { ReactComponent as Logo } from "@app/logo.svg";

 interface InputValues {
  username: string;
@ -46,7 +46,7 @@ export const Onboarding = () => {
  return (
    <div className="min-h-screen flex flex-col justify-center py-12 sm:px-6 lg:px-8">
      <div className="sm:mx-auto sm:w-full sm:max-w-md mb-6">
-        <img className="mx-auto h-12 w-auto" src={logo} alt="logo"/>
+        <Logo className="mx-auto h-12" />
        <h1 className="text-center text-gray-900 dark:text-gray-200 font-bold pt-2 text-2xl">
          autobrr
        </h1>
--- a/web/src/vite-env.d.ts
+++ b/web/src/vite-env.d.ts
@ -1 +1,2 @@
-/// <reference types="vite/client" />
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />
--- a/web/vite.config.ts
+++ b/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/]
      }