👽 [#724] Fix loading/resolving the font-awesome font files

CRA seems to properly translate the relative path and include the files
while Vite requires some extra hints to properly point to the package
location before it can find the font files.

Unfortunately, both setups are not compatible, so in the vite config
we override the sass-variable to pass down to the sass module import,
where the default is set to the current, legacy behaviour.

src/scss/components/_fa-icon.scss

@@ -1,9 +1,5 @@
 @use 'sass:math';
 
-@import '@fortawesome/fontawesome-free/scss/fontawesome';
-@import '@fortawesome/fontawesome-free/scss/brands';
-@import '@fortawesome/fontawesome-free/scss/regular';
-@import '@fortawesome/fontawesome-free/scss/solid';
 @import 'microscope-sass/lib/typography';
 
 .fa-icon {

src/styles.scss

@@ -1,10 +1,17 @@
 // Open Forms SDK styles
 // TODO: we should see if we can re-use even smaller bits to shed dead weight and
 // reduce the bundle size
+$fa-font-path: '../webfonts/' !default; // vite.config.mts overrides this
 @use '@fortawesome/fontawesome-free/scss/fontawesome';
-@use '@fortawesome/fontawesome-free/scss/brands';
-@use '@fortawesome/fontawesome-free/scss/regular';
-@use '@fortawesome/fontawesome-free/scss/solid';
+@use '@fortawesome/fontawesome-free/scss/brands' with (
+  $fa-font-path: $fa-font-path
+);
+@use '@fortawesome/fontawesome-free/scss/regular' with (
+  $fa-font-path: $fa-font-path
+);
+@use '@fortawesome/fontawesome-free/scss/solid' with (
+  $fa-font-path: $fa-font-path
+);
 @use 'flatpickr/dist/flatpickr.min';
 @use 'formiojs/dist/formio.form';
 @use 'leaflet/dist/leaflet';

vite.config.mts

@@ -59,6 +59,7 @@ export default defineConfig({
   css: {
     preprocessorOptions: {
       scss: {
+        additionalData: `$fa-font-path: '@fortawesome/fontawesome-free/webfonts/';`,
         charset: false,
       },
     },