Merge pull request #130 from os2display/feature/2314-bugfixes

Fixed issue with svg loading

.github/workflows/pr.yml

@@ -53,7 +53,7 @@ jobs:
 
       - name: Archive screenshots
         if: ${{ failure() }}
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v4
         with:
           name: cypress-screenshots-${{ matrix.browser }}
           path: cypress/screenshots

CHANGELOG.md

@@ -4,6 +4,8 @@ All notable changes to this project will be documented in this file.
 
 ## Unreleased
 
+- [#130](https://github.com/os2display/display-client/pull/130)
+  - Fixed issue with svg loading.
 - [#127](https://github.com/os2display/display-client/pull/127)
   - Migrate from CRA to Vite
   - Upgrade node from 14 -> 20

README.md

@@ -38,7 +38,7 @@ Start docker setup
 
 ```
 # Install npm packages
-docker compose run node yarn install
+docker compose run --rm node yarn install
 
 # Up the containers
 docker compose up -d

src/touch-region.jsx

@@ -5,8 +5,8 @@ import { createGridArea } from "os2display-grid-generator";
 import Slide from "./slide";
 import ErrorBoundary from "./error-boundary";
 import idFromPath from "./id-from-path";
-import IconClose from "./assets/icon-close.svg?react";
-import IconPointer from "./assets/icon-pointer.svg?react";
+import IconClose from "./assets/icon-close.svg";
+import IconPointer from "./assets/icon-pointer.svg";
 
 /**
  * Region component.

vite.config.js

@@ -1,9 +1,17 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import svgr from "vite-plugin-svgr";
 
 export default defineConfig({
   base: '/client',
-  plugins: [react()],
+  plugins: [
+    react(),
+    svgr({
+      // svgr options: https://react-svgr.com/docs/options/
+      svgrOptions: { exportType: "default", ref: true, svgo: false, titleProp: true },
+      include: "**/*.svg",
+    })
+  ],
   build: {
     outDir: 'build',
     emptyOutDir: true,