Add favicon for development (#162)

* Add campfire.svg icon to /web/main folder, change favicon for localhost and build to separate dev environment with prodution. Now for production we use icon.svg in index.html entry point and for development we use campfire.svg in index.html

* revert changes in style section

* return deleted .ico link in index.html

* add STAGING variable for github action workflow to set STAGING variable when pnpm build is running

* add comment at vite.config.ts

* swap enforce and name fields in vite.config.ts

* comments was removed from vite.config.ts

* move campfire.svg from web/main to web/public, rewrite transformIndexHtml function in vite.config.ts

* favicon campfire.svg was moved web/public folder

---------

Co-authored-by: daniil <Daniil Makhov>

.github/workflows/preview-prepare.yml

@@ -26,6 +26,8 @@ jobs:
         run: pnpm install --no-frozen-lockfile --ignore-scripts
       - name: Build assets
         run: cd web && pnpm build
+        env:
+          STAGING: 1
       - name: Save PR number
         run: echo "${{ github.event.pull_request.number }}" > ./preview-id
       - name: Save web assets for deploy

.github/workflows/test.yml

@@ -29,6 +29,7 @@ jobs:
         run: pnpm run -r --include-workspace-root '/^test:(?!markdown\b)/'
         env:
           FORCE_COLOR: 1
+          STAGING: 1
       - name: Upload web assets
         if: github.ref == 'refs/heads/main'
         uses: actions/upload-artifact@v4

web/vite.config.ts

@@ -10,6 +10,25 @@ export default defineConfig(() => ({
     svelte(),
     nodeResolve({
       extensions: ['.js', '.ts']
-    })
+    }),
+    {
+      enforce: 'pre',
+      name: 'html-transform',
+      transformIndexHtml(html) {
+        if (process.env.NODE_ENV === 'development' || process.env.STAGING) {
+          return html
+            .replace(
+              '<link rel="icon" href="/favicon.ico" sizes="32x32" />',
+              ''
+            )
+            .replace(
+              /<link rel="icon" href="[^"]+" type="image\/svg\+xml" \/>/,
+              '<link rel="icon" href="/campfire.svg" type="image/svg+xml" />'
+            )
+        } else {
+          return html
+        }
+      }
+    }
   ]
 }))