Merge branch 'Acode-Foundation:main' into codemirror

Author: bajrangCoder

src/lib/acode.js

@@ -622,14 +622,37 @@ export default class Acode {
 		return Url.join(...args);
 	}
 
-	addIcon(className, src) {
+	/**
+	 * Adds a custom icon class that can be used with the .icon element
+	 * @param {string} className - The class name for the icon (used as .icon.className)
+	 * @param {string} src - URL or data URI of the icon image
+	 * @param {object} [options] - Optional settings
+	 * @param {boolean} [options.monochrome=false] - If true, icon will use currentColor and adapt to theme
+	 */
+	addIcon(className, src, options = {}) {
 		let style = document.head.get(`style[icon="${className}"]`);
 		if (!style) {
-			style = (
-				<style
-					icon={className}
-				>{`.icon.${className}{background-image: url(${src})}`}</style>
-			);
+			let css;
+			if (options.monochrome) {
+				// Monochrome icons: use mask-image (on ::before) for currentColor/theme support
+				// Using ::before ensures we don't mask the ::after active indicator or the background
+				css = `.icon.${className}::before {
+					content: '';
+					display: inline-block;
+					width: 24px;
+					height: 24px;
+					vertical-align: middle;
+					-webkit-mask: url(${src}) no-repeat center / contain;
+					mask: url(${src}) no-repeat center / contain;
+					background-color: currentColor;
+				}`;
+			} else {
+				// Default: preserve original icon colors
+				css = `.icon.${className}{
+					background: url(${src}) no-repeat center / 24px;
+				}`;
+			}
+			style = <style icon={className}>{css}</style>;
 			document.head.appendChild(style);
 		}
 	}

src/res/icons/li-icon.ttf

@@ -8,7 +8,7 @@
 
 @font-face {
   font-family: "li-icon";
-  src: url("li-icons.ttf?6wte0b") format("truetype");
+  src: url("li-icon.ttf") format("truetype");
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -30,9 +30,8 @@
 }
 
 .licons {
-  /* use !important to prevent issues with browser extensions that change fonts */
+  /* Use !important to prevent extensions from overriding this font. */
   font-family: "li-icon" !important;
-  speak: none;
   font-style: normal;
   font-weight: normal;
   font-variant: normal;
@@ -44,20 +43,28 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.licons.terminal:before {
-  content: "\e900";
+.licons.scale:before {
+  content: "\f006";
 }
+
 .licons.cart:before {
-  content: "\e901";
+  content: "\f005";
 }
-.licons.scale:before {
-  content: "\e902";
-}
-.licons.tag:before {
-  content: "\e903";
+
+.licons.zap:before {
+  content: "\f000";
 }
+
 .licons.verified:before {
-  content: "\e904";
+  content: "\f001";
+}
+
+.licons.terminal:before {
+  content: "\f002";
+}
+
+.licons.tag:before {
+  content: "\f003";
 }
 
 .icon.acode:before {
@@ -1210,4 +1217,4 @@
 
 .icon.all_inclusive:before {
   content: "\ea18";
-}
+}