Refactor custom icons implementation to use SCSS and improve font-face handling

Author: dkastl

src/styles/icons/custom/custom-icons-def.ts

@@ -13,32 +13,18 @@ const customIconsMeta = document.querySelector('meta[name="gtt-font-custom-icons
 const customIconsUrl = customIconsMeta ? customIconsMeta.getAttribute('content') : 'data:application/font-woff2;base64,'; // Provide a data URL for an empty font
 
 // Dynamically create the @font-face rule
-if (customIconsUrl) {
-  // Remove the existing @font-face rule
-  const styleSheets = document.styleSheets;
-  for (let i = 0; i < styleSheets.length; i++) {
-    const cssRules = styleSheets[i].cssRules || styleSheets[i].rules;
-    for (let j = 0; j < cssRules.length; j++) {
-      const rule = cssRules[j];
-      if (rule instanceof CSSFontFaceRule && rule.style.fontFamily === 'custom-icons') {
-        styleSheets[i].deleteRule(j);
-        break;
-      }
-    }
+const style = document.createElement('style');
+style.type = 'text/css';
+style.innerHTML = `
+  @font-face {
+    font-family: 'custom-icons';
+    font-style: normal;
+    font-weight: 400;
+    font-display: block;
+    src: url(${customIconsUrl}) format('woff2');
   }
-
-  const style = document.createElement('style');
-  style.innerHTML = `
-    @font-face {
-      font-family: 'custom-icons';
-      font-style: normal;
-      font-weight: 400;
-      font-display: block;
-      src: url(${customIconsUrl}) format('woff2');
-    }
-  `;
-  document.head.appendChild(style);
-}
+`;
+document.head.appendChild(style);
 
 // Define the font face
 let customFont: FontFace;

src/styles/icons/custom/custom-icons.css renamed to src/styles/icons/custom/custom-icons.scss

@@ -1,9 +1,11 @@
+$custom-icons-path: unquote('RAILS_ASSET_URL("custom-icons.woff2")');
+
 @font-face {
   font-family: "custom-icons";
   font-style: normal;
   font-weight: 400;
   font-display: block;
-  src: url("./custom-icons.woff2") format("woff2");
+  src: url(#{$custom-icons-path}) format("woff2");
 }
 
 .custom-icons {

src/styles/index.ts

@@ -8,7 +8,7 @@ import 'ol-ext/dist/ol-ext.min.css';
 import './scss/app.scss';
 
 // Import custom icons CSS file for adding custom icon designs in the application
-import './icons/custom/custom-icons.css';
+import './icons/custom/custom-icons.scss';
 
 // Import custom icons definition JS file to define icon names, sizes, and variations
 import './icons/custom/custom-icons-def';

webpack.config.js

@@ -3,9 +3,14 @@ const path = require('path');
 // Define loaders
 // Loaders for processing Sass files
 const sassLoaders = [
-  'style-loader', // Creates `style` nodes from JS strings
-  'css-loader', // Translates CSS into CommonJS
-  'sass-loader', // Compiles Sass to CSS
+  'style-loader',
+  {
+    loader: 'css-loader',
+    options: {
+      url: false, // Prevent css-loader from interpreting URLs
+    },
+  },
+  'sass-loader',
 ];
 
 // Loaders for processing CSS files