@elementor/editor-canvas 4.3.0-beta1 → 4.3.0-beta2

package/dist/index.js

@@ -2132,6 +2132,8 @@ function processSvgContent(svgText) {
 var FONT_AWESOME_JSON = {
   width: 0,
   height: 1,
+  aliases: 2,
+  unicode: 3,
   path: 4
 };
 var fontAwesomeJsonCache = /* @__PURE__ */ new Map();
@@ -2152,7 +2154,10 @@ var iconTransformer = createTransformer(async (value, { signal }) => {
     return { html: null, url: null };
   }
   const svgText = buildFontAwesomeSvg(iconData);
-  const html = processSvgContent(svgText);
+  if (!svgText) {
+    return { html: null, url: null };
+  }
+  const html = processIconSvgContent(svgText);
   return { html, url: null };
 });
 function getFontAwesomeIconName(iconValue) {
@@ -2160,14 +2165,22 @@ function getFontAwesomeIconName(iconValue) {
   return match?.[1] ?? null;
 }
 function getFontAwesomeJsonFileName(library) {
-  if (!library.startsWith("fa-")) {
+  const fileName = library.replace(/^fa-/, "");
+  const config = getFontAwesome7EditorConfig();
+  if (!config?.jsonFiles.includes(fileName)) {
     return null;
   }
-  return library.replace(/^fa-/, "");
+  return fileName;
 }
-function getAssetsBaseUrl() {
-  const assetsUrl = window.elementorCommon?.config?.urls?.assets;
-  return typeof assetsUrl === "string" && assetsUrl !== "" ? assetsUrl : null;
+function getFontAwesome7EditorConfig() {
+  const config = window.elementorCommon?.config?.fontAwesome?.v7;
+  if (!config || !Array.isArray(config.jsonFiles) || typeof config.jsonBaseUrl !== "string" || config.jsonBaseUrl === "") {
+    return null;
+  }
+  return {
+    jsonFiles: config.jsonFiles,
+    jsonBaseUrl: config.jsonBaseUrl
+  };
 }
 async function fetchFontAwesomeIcons(jsonFileName, signal) {
   const cached = fontAwesomeJsonCache.get(jsonFileName);
@@ -2181,26 +2194,83 @@ async function fetchFontAwesomeIcons(jsonFileName, signal) {
   return icons;
 }
 async function loadFontAwesomeIcons(jsonFileName, signal) {
-  const assetsUrl = getAssetsBaseUrl();
-  if (!assetsUrl) {
+  const config = getFontAwesome7EditorConfig();
+  if (!config?.jsonFiles.includes(jsonFileName)) {
     return null;
   }
   try {
-    const response = await fetch(`${assetsUrl}lib/font-awesome/json/${jsonFileName}.json`, { signal });
+    const response = await fetch(`${config.jsonBaseUrl}${jsonFileName}.json`, {
+      signal
+    });
     if (!response.ok) {
       return null;
     }
     const data = await response.json();
-    return data.icons ?? null;
+    const icons = data.icons;
+    if (!icons || typeof icons !== "object") {
+      return null;
+    }
+    return indexFontAwesomeIcons(icons);
   } catch {
     return null;
   }
 }
+function indexFontAwesomeIcons(icons) {
+  const index = {};
+  for (const [name, iconData] of Object.entries(icons)) {
+    if (!isValidIconTuple(iconData)) {
+      continue;
+    }
+    index[name] = iconData;
+    for (const alias of iconData[FONT_AWESOME_JSON.aliases]) {
+      if (typeof alias === "string" && alias !== "" && !index[alias]) {
+        index[alias] = iconData;
+      }
+    }
+  }
+  return index;
+}
+function isValidIconTuple(iconData) {
+  return Array.isArray(iconData) && iconData.length >= 5 && typeof iconData[FONT_AWESOME_JSON.width] === "number" && typeof iconData[FONT_AWESOME_JSON.height] === "number" && Array.isArray(iconData[FONT_AWESOME_JSON.aliases]);
+}
 function buildFontAwesomeSvg(iconData) {
   const width = iconData[FONT_AWESOME_JSON.width];
   const height = iconData[FONT_AWESOME_JSON.height];
-  const path = iconData[FONT_AWESOME_JSON.path];
-  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}"><path d="${path}"></path></svg>`;
+  const paths = normalizePaths(iconData[FONT_AWESOME_JSON.path]);
+  if (paths.length === 0) {
+    return null;
+  }
+  const pathMarkup = paths.map((path) => `<path d="${escapeSvgPath(path)}"></path>`).join("");
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}">${pathMarkup}</svg>`;
+}
+function normalizePaths(pathData) {
+  if (typeof pathData === "string" && pathData !== "") {
+    return [pathData];
+  }
+  if (!Array.isArray(pathData)) {
+    return [];
+  }
+  return pathData.filter((path) => typeof path === "string" && path !== "");
+}
+function escapeSvgPath(path) {
+  return path.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function processIconSvgContent(svgText) {
+  const html = processSvgContent(svgText);
+  if (!html) {
+    return null;
+  }
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(html, "image/svg+xml");
+  const svgElement = doc.querySelector("svg");
+  if (!svgElement) {
+    return null;
+  }
+  svgElement.setAttribute("aria-hidden", "true");
+  svgElement.style.setProperty("width", "100%");
+  svgElement.style.setProperty("height", "100%");
+  svgElement.style.setProperty("overflow", "visible");
+  return svgElement.outerHTML;
 }
 
 // src/transformers/shared/image-src-transformer.ts
@@ -2446,6 +2516,10 @@ var mapToFilterFunctionString = (value) => {
 };
 
 // src/transformers/styles/flex-transformer.ts
+var DEFAULT_FLEX_GROW = 0;
+var DEFAULT_FLEX_SHRINK = 1;
+var DEFAULT_FLEX_BASIS = "auto";
+var formatBasis = (basis) => typeof basis === "object" && basis.size !== void 0 ? `${basis.size}${basis.unit || ""}` : basis;
 var flexTransformer = createTransformer((value) => {
   const grow = value.flexGrow;
   const shrink = value.flexShrink;
@@ -2456,28 +2530,10 @@ var flexTransformer = createTransformer((value) => {
   if (!hasGrow && !hasShrink && !hasBasis) {
     return null;
   }
-  if (hasGrow && hasShrink && hasBasis) {
-    return `${grow} ${shrink} ${typeof basis === "object" && basis.size !== void 0 ? `${basis.size}${basis.unit || ""}` : basis}`;
-  }
-  if (hasGrow && hasShrink && !hasBasis) {
-    return `${grow} ${shrink}`;
-  }
-  if (hasGrow && !hasShrink && hasBasis) {
-    return `${grow} 1 ${typeof basis === "object" && basis.size !== void 0 ? `${basis.size}${basis.unit || ""}` : basis}`;
-  }
-  if (!hasGrow && hasShrink && hasBasis) {
-    return `0 ${shrink} ${typeof basis === "object" && basis.size !== void 0 ? `${basis.size}${basis.unit || ""}` : basis}`;
-  }
-  if (hasGrow && !hasShrink && !hasBasis) {
-    return `${grow}`;
-  }
-  if (!hasGrow && hasShrink && !hasBasis) {
-    return `0 ${shrink}`;
-  }
-  if (!hasGrow && !hasShrink && hasBasis) {
-    return `0 1 ${typeof basis === "object" && basis.size !== void 0 ? `${basis.size}${basis.unit || ""}` : basis}`;
-  }
-  return null;
+  const growOut = hasGrow ? grow : DEFAULT_FLEX_GROW;
+  const shrinkOut = hasShrink ? shrink : DEFAULT_FLEX_SHRINK;
+  const basisOut = hasBasis ? formatBasis(basis) : DEFAULT_FLEX_BASIS;
+  return `${growOut} ${shrinkOut} ${basisOut}`;
 });
 
 // src/transformers/styles/font-family-transformer.ts

package/dist/index.mjs

@@ -2084,6 +2084,8 @@ function processSvgContent(svgText) {
 var FONT_AWESOME_JSON = {
   width: 0,
   height: 1,
+  aliases: 2,
+  unicode: 3,
   path: 4
 };
 var fontAwesomeJsonCache = /* @__PURE__ */ new Map();
@@ -2104,7 +2106,10 @@ var iconTransformer = createTransformer(async (value, { signal }) => {
     return { html: null, url: null };
   }
   const svgText = buildFontAwesomeSvg(iconData);
-  const html = processSvgContent(svgText);
+  if (!svgText) {
+    return { html: null, url: null };
+  }
+  const html = processIconSvgContent(svgText);
   return { html, url: null };
 });
 function getFontAwesomeIconName(iconValue) {
@@ -2112,14 +2117,22 @@ function getFontAwesomeIconName(iconValue) {
   return match?.[1] ?? null;
 }
 function getFontAwesomeJsonFileName(library) {
-  if (!library.startsWith("fa-")) {
+  const fileName = library.replace(/^fa-/, "");
+  const config = getFontAwesome7EditorConfig();
+  if (!config?.jsonFiles.includes(fileName)) {
     return null;
   }
-  return library.replace(/^fa-/, "");
+  return fileName;
 }
-function getAssetsBaseUrl() {
-  const assetsUrl = window.elementorCommon?.config?.urls?.assets;
-  return typeof assetsUrl === "string" && assetsUrl !== "" ? assetsUrl : null;
+function getFontAwesome7EditorConfig() {
+  const config = window.elementorCommon?.config?.fontAwesome?.v7;
+  if (!config || !Array.isArray(config.jsonFiles) || typeof config.jsonBaseUrl !== "string" || config.jsonBaseUrl === "") {
+    return null;
+  }
+  return {
+    jsonFiles: config.jsonFiles,
+    jsonBaseUrl: config.jsonBaseUrl
+  };
 }
 async function fetchFontAwesomeIcons(jsonFileName, signal) {
   const cached = fontAwesomeJsonCache.get(jsonFileName);
@@ -2133,26 +2146,83 @@ async function fetchFontAwesomeIcons(jsonFileName, signal) {
   return icons;
 }
 async function loadFontAwesomeIcons(jsonFileName, signal) {
-  const assetsUrl = getAssetsBaseUrl();
-  if (!assetsUrl) {
+  const config = getFontAwesome7EditorConfig();
+  if (!config?.jsonFiles.includes(jsonFileName)) {
     return null;
   }
   try {
-    const response = await fetch(`${assetsUrl}lib/font-awesome/json/${jsonFileName}.json`, { signal });
+    const response = await fetch(`${config.jsonBaseUrl}${jsonFileName}.json`, {
+      signal
+    });
     if (!response.ok) {
       return null;
     }
     const data = await response.json();
-    return data.icons ?? null;
+    const icons = data.icons;
+    if (!icons || typeof icons !== "object") {
+      return null;
+    }
+    return indexFontAwesomeIcons(icons);
   } catch {
     return null;
   }
 }
+function indexFontAwesomeIcons(icons) {
+  const index = {};
+  for (const [name, iconData] of Object.entries(icons)) {
+    if (!isValidIconTuple(iconData)) {
+      continue;
+    }
+    index[name] = iconData;
+    for (const alias of iconData[FONT_AWESOME_JSON.aliases]) {
+      if (typeof alias === "string" && alias !== "" && !index[alias]) {
+        index[alias] = iconData;
+      }
+    }
+  }
+  return index;
+}
+function isValidIconTuple(iconData) {
+  return Array.isArray(iconData) && iconData.length >= 5 && typeof iconData[FONT_AWESOME_JSON.width] === "number" && typeof iconData[FONT_AWESOME_JSON.height] === "number" && Array.isArray(iconData[FONT_AWESOME_JSON.aliases]);
+}
 function buildFontAwesomeSvg(iconData) {
   const width = iconData[FONT_AWESOME_JSON.width];
   const height = iconData[FONT_AWESOME_JSON.height];
-  const path = iconData[FONT_AWESOME_JSON.path];
-  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}"><path d="${path}"></path></svg>`;
+  const paths = normalizePaths(iconData[FONT_AWESOME_JSON.path]);
+  if (paths.length === 0) {
+    return null;
+  }
+  const pathMarkup = paths.map((path) => `<path d="${escapeSvgPath(path)}"></path>`).join("");
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}">${pathMarkup}</svg>`;
+}
+function normalizePaths(pathData) {
+  if (typeof pathData === "string" && pathData !== "") {
+    return [pathData];
+  }
+  if (!Array.isArray(pathData)) {
+    return [];
+  }
+  return pathData.filter((path) => typeof path === "string" && path !== "");
+}
+function escapeSvgPath(path) {
+  return path.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function processIconSvgContent(svgText) {
+  const html = processSvgContent(svgText);
+  if (!html) {
+    return null;
+  }
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(html, "image/svg+xml");
+  const svgElement = doc.querySelector("svg");
+  if (!svgElement) {
+    return null;
+  }
+  svgElement.setAttribute("aria-hidden", "true");
+  svgElement.style.setProperty("width", "100%");
+  svgElement.style.setProperty("height", "100%");
+  svgElement.style.setProperty("overflow", "visible");
+  return svgElement.outerHTML;
 }
 
 // src/transformers/shared/image-src-transformer.ts
@@ -2398,6 +2468,10 @@ var mapToFilterFunctionString = (value) => {
 };
 
 // src/transformers/styles/flex-transformer.ts
+var DEFAULT_FLEX_GROW = 0;
+var DEFAULT_FLEX_SHRINK = 1;
+var DEFAULT_FLEX_BASIS = "auto";
+var formatBasis = (basis) => typeof basis === "object" && basis.size !== void 0 ? `${basis.size}${basis.unit || ""}` : basis;
 var flexTransformer = createTransformer((value) => {
   const grow = value.flexGrow;
   const shrink = value.flexShrink;
@@ -2408,28 +2482,10 @@ var flexTransformer = createTransformer((value) => {
   if (!hasGrow && !hasShrink && !hasBasis) {
     return null;
   }
-  if (hasGrow && hasShrink && hasBasis) {
-    return `${grow} ${shrink} ${typeof basis === "object" && basis.size !== void 0 ? `${basis.size}${basis.unit || ""}` : basis}`;
-  }
-  if (hasGrow && hasShrink && !hasBasis) {
-    return `${grow} ${shrink}`;
-  }
-  if (hasGrow && !hasShrink && hasBasis) {
-    return `${grow} 1 ${typeof basis === "object" && basis.size !== void 0 ? `${basis.size}${basis.unit || ""}` : basis}`;
-  }
-  if (!hasGrow && hasShrink && hasBasis) {
-    return `0 ${shrink} ${typeof basis === "object" && basis.size !== void 0 ? `${basis.size}${basis.unit || ""}` : basis}`;
-  }
-  if (hasGrow && !hasShrink && !hasBasis) {
-    return `${grow}`;
-  }
-  if (!hasGrow && hasShrink && !hasBasis) {
-    return `0 ${shrink}`;
-  }
-  if (!hasGrow && !hasShrink && hasBasis) {
-    return `0 1 ${typeof basis === "object" && basis.size !== void 0 ? `${basis.size}${basis.unit || ""}` : basis}`;
-  }
-  return null;
+  const growOut = hasGrow ? grow : DEFAULT_FLEX_GROW;
+  const shrinkOut = hasShrink ? shrink : DEFAULT_FLEX_SHRINK;
+  const basisOut = hasBasis ? formatBasis(basis) : DEFAULT_FLEX_BASIS;
+  return `${growOut} ${shrinkOut} ${basisOut}`;
 });
 
 // src/transformers/styles/font-family-transformer.ts

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-canvas",
   "description": "Elementor Editor Canvas",
-  "version": "4.3.0-beta1",
+  "version": "4.3.0-beta2",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,26 +37,26 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor": "4.3.0-beta1",
-    "@elementor/editor-controls": "4.3.0-beta1",
-    "@elementor/editor-documents": "4.3.0-beta1",
-    "@elementor/editor-elements": "4.3.0-beta1",
-    "@elementor/editor-interactions": "4.3.0-beta1",
-    "@elementor/editor-mcp": "4.3.0-beta1",
-    "@elementor/editor-notifications": "4.3.0-beta1",
-    "@elementor/editor-props": "4.3.0-beta1",
-    "@elementor/editor-responsive": "4.3.0-beta1",
-    "@elementor/editor-styles": "4.3.0-beta1",
-    "@elementor/editor-styles-repository": "4.3.0-beta1",
-    "@elementor/editor-ui": "4.3.0-beta1",
-    "@elementor/editor-v1-adapters": "4.3.0-beta1",
-    "@elementor/events": "4.3.0-beta1",
-    "@elementor/http-client": "4.3.0-beta1",
-    "@elementor/schema": "4.3.0-beta1",
-    "@elementor/twing": "4.3.0-beta1",
+    "@elementor/editor": "4.3.0-beta2",
+    "@elementor/editor-controls": "4.3.0-beta2",
+    "@elementor/editor-documents": "4.3.0-beta2",
+    "@elementor/editor-elements": "4.3.0-beta2",
+    "@elementor/editor-interactions": "4.3.0-beta2",
+    "@elementor/editor-mcp": "4.3.0-beta2",
+    "@elementor/editor-notifications": "4.3.0-beta2",
+    "@elementor/editor-props": "4.3.0-beta2",
+    "@elementor/editor-responsive": "4.3.0-beta2",
+    "@elementor/editor-styles": "4.3.0-beta2",
+    "@elementor/editor-styles-repository": "4.3.0-beta2",
+    "@elementor/editor-ui": "4.3.0-beta2",
+    "@elementor/editor-v1-adapters": "4.3.0-beta2",
+    "@elementor/events": "4.3.0-beta2",
+    "@elementor/http-client": "4.3.0-beta2",
+    "@elementor/schema": "4.3.0-beta2",
+    "@elementor/twing": "4.3.0-beta2",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.3.0-beta1",
-    "@elementor/wp-media": "4.3.0-beta1",
+    "@elementor/utils": "4.3.0-beta2",
+    "@elementor/wp-media": "4.3.0-beta2",
     "@floating-ui/react": "^0.27.5",
     "@wordpress/i18n": "^5.13.0",
     "dompurify": "^3.2.6"

package/src/__tests__/flex-transformer.test.ts

@@ -68,7 +68,7 @@ describe( 'flexTransformer', () => {
 	} );
 
 	describe( 'when only two values are provided', () => {
-		it( 'should return "grow shrink" when grow and shrink are set', () => {
+		it( 'should return "grow shrink auto" when grow and shrink are set', () => {
 			// Arrange.
 			const value: Flex = {
 				flexGrow: 1,
@@ -80,7 +80,7 @@ describe( 'flexTransformer', () => {
 			const result = flexTransformer( value, { key: 'flex' } );
 
 			// Assert.
-			expect( result ).toBe( '1 2' );
+			expect( result ).toBe( '1 2 auto' );
 		} );
 
 		it( 'should return "grow 1 basis" when grow and basis are set', () => {
@@ -115,7 +115,7 @@ describe( 'flexTransformer', () => {
 	} );
 
 	describe( 'when only one value is provided', () => {
-		it( 'should return "grow" when only grow is set', () => {
+		it( 'should return "grow 1 auto" when only grow is set', () => {
 			// Arrange.
 			const value: Flex = {
 				flexGrow: 1,
@@ -127,10 +127,10 @@ describe( 'flexTransformer', () => {
 			const result = flexTransformer( value, { key: 'flex' } );
 
 			// Assert.
-			expect( result ).toBe( '1' );
+			expect( result ).toBe( '1 1 auto' );
 		} );
 
-		it( 'should return "0 shrink" when only shrink is set', () => {
+		it( 'should return "0 shrink auto" when only shrink is set', () => {
 			// Arrange.
 			const value: Flex = {
 				flexGrow: null,
@@ -142,7 +142,7 @@ describe( 'flexTransformer', () => {
 			const result = flexTransformer( value, { key: 'flex' } );
 
 			// Assert.
-			expect( result ).toBe( '0 2' );
+			expect( result ).toBe( '0 2 auto' );
 		} );
 
 		it( 'should return "0 1 basis" when only basis is set', () => {
@@ -238,8 +238,8 @@ describe( 'flexTransformer', () => {
 		} );
 	} );
 
-	describe( 'CSS shorthand behavior', () => {
-		it( 'should follow CSS flex shorthand rules for single value', () => {
+	describe( 'CSS initial values for omitted longhands', () => {
+		it( 'should default shrink and basis when only grow is set', () => {
 			// Arrange.
 			const value: Flex = {
 				flexGrow: 2,
@@ -251,10 +251,10 @@ describe( 'flexTransformer', () => {
 			const result = flexTransformer( value, { key: 'flex' } );
 
 			// Assert.
-			expect( result ).toBe( '2' );
+			expect( result ).toBe( '2 1 auto' );
 		} );
 
-		it( 'should follow CSS flex shorthand rules for two values', () => {
+		it( 'should default basis when grow and shrink are set', () => {
 			// Arrange.
 			const value: Flex = {
 				flexGrow: 1,
@@ -266,7 +266,7 @@ describe( 'flexTransformer', () => {
 			const result = flexTransformer( value, { key: 'flex' } );
 
 			// Assert.
-			expect( result ).toBe( '1 2' );
+			expect( result ).toBe( '1 2 auto' );
 		} );
 	} );
 } );

package/src/__tests__/prop-types.ts

@@ -36,6 +36,17 @@ export function linkPropType() {
 	} );
 }
 
+export function iconPropType() {
+	return createMockPropType( {
+		kind: 'object',
+		key: 'icon',
+		shape: {
+			value: stringPropType(),
+			library: stringPropType(),
+		},
+	} );
+}
+
 export function imagePropType() {
 	return createMockPropType( {
 		kind: 'object',

package/src/transformers/shared/__tests__/icon-transformer.test.ts

@@ -1,7 +1,13 @@
-import { iconTransformer, resetFontAwesomeIconsCache } from '../icon-transformer';
+import { iconPropTypeUtil, stringPropTypeUtil } from '@elementor/editor-props';
+
+import { iconPropType } from '../../../__tests__/prop-types';
+import { initSettingsTransformers } from '../../../init-settings-transformers';
+import { createPropsResolver } from '../../../renderers/create-props-resolver';
+import { settingsTransformersRegistry } from '../../../settings-transformers-registry';
+import { resetFontAwesomeIconsCache } from '../icon-transformer';
 
 const STAR_PATH = 'M0 0h100v100H0z';
-const STAR_WIDTH = 512;
+const STAR_WIDTH = 576;
 const STAR_HEIGHT = 512;
 
 const mockFetch = ( body: unknown, ok = true ) => {
@@ -11,17 +17,46 @@ const mockFetch = ( body: unknown, ok = true ) => {
 	} );
 };
 
+function createSavedIcon( iconClass: string, library: string ) {
+	return iconPropTypeUtil.create( {
+		value: stringPropTypeUtil.create( iconClass ),
+		library: stringPropTypeUtil.create( library ),
+	} );
+}
+
+async function resolveSavedIcon( iconClass: string, library: string ) {
+	const resolve = createPropsResolver( {
+		transformers: settingsTransformersRegistry,
+		schema: { svg: iconPropType() },
+	} );
+
+	const result = await resolve( {
+		props: {
+			svg: createSavedIcon( iconClass, library ),
+		},
+	} );
+
+	return result.svg;
+}
+
 describe( 'iconTransformer', () => {
 	const originalElementorCommon = window.elementorCommon;
 
 	beforeEach( () => {
 		jest.clearAllMocks();
 		resetFontAwesomeIconsCache();
+		initSettingsTransformers();
 		window.elementorCommon = {
 			config: {
 				urls: {
 					assets: 'https://example.com/assets/',
 				},
+				fontAwesome: {
+					v7: {
+						jsonFiles: [ 'solid', 'regular', 'brands' ],
+						jsonBaseUrl: 'https://example.com/assets/lib/font-awesome-7/json/',
+					},
+				},
 			},
 		};
 	} );
@@ -40,10 +75,10 @@ describe( 'iconTransformer', () => {
 		} );
 
 		// Act.
-		const result = await iconTransformer( { value: 'fas fa-star', library: 'fa-solid' }, { key: 'svg' } );
+		const result = await resolveSavedIcon( 'fas fa-star', 'fa-solid' );
 
 		// Assert.
-		expect( global.fetch ).toHaveBeenCalledWith( 'https://example.com/assets/lib/font-awesome/json/solid.json', {
+		expect( global.fetch ).toHaveBeenCalledWith( 'https://example.com/assets/lib/font-awesome-7/json/solid.json', {
 			signal: undefined,
 		} );
 		expect( result ).toEqual( {
@@ -51,6 +86,45 @@ describe( 'iconTransformer', () => {
 			url: null,
 		} );
 		expect( ( result as { html: string } ).html ).toContain( 'fill="currentColor"' );
+		expect( ( result as { html: string } ).html ).toContain( `viewBox="0 0 ${ STAR_WIDTH } ${ STAR_HEIGHT }"` );
+		expect( ( result as { html: string } ).html ).toContain( 'aria-hidden="true"' );
+		expect( ( result as { html: string } ).html ).toContain( 'overflow: visible' );
+	} );
+
+	it( 'resolves icons by alias name', async () => {
+		// Arrange.
+		mockFetch( {
+			icons: {
+				headphones: [ 448, 512, [ 'headphones-simple' ], 'f025', 'M0 0' ],
+			},
+		} );
+
+		// Act.
+		const result = await resolveSavedIcon( 'fas fa-headphones-simple', 'fa-solid' );
+
+		// Assert.
+		expect( result ).toEqual( {
+			html: expect.stringContaining( 'M0 0' ),
+			url: null,
+		} );
+	} );
+
+	it( 'renders multiple paths when the icon definition contains an array', async () => {
+		// Arrange.
+		mockFetch( {
+			icons: {
+				slash: [ 640, 640, [], 'f715', [ 'M0 0', 'M10 10' ] ],
+			},
+		} );
+
+		// Act.
+		const result = await resolveSavedIcon( 'fas fa-slash', 'fa-solid' );
+
+		// Assert.
+		const html = ( result as { html: string } ).html;
+		expect( html.match( /<path/g ) ).toHaveLength( 2 );
+		expect( html ).toContain( 'M0 0' );
+		expect( html ).toContain( 'M10 10' );
 	} );
 
 	it( 'returns null html when the icon cannot be resolved', async () => {
@@ -58,17 +132,68 @@ describe( 'iconTransformer', () => {
 		mockFetch( { icons: {} } );
 
 		// Act.
-		const result = await iconTransformer( { value: 'fas fa-missing', library: 'fa-solid' }, { key: 'svg' } );
+		const result = await resolveSavedIcon( 'fas fa-missing', 'fa-solid' );
 
 		// Assert.
 		expect( result ).toEqual( { html: null, url: null } );
 	} );
 
-	it( 'returns null html when value or library is missing', async () => {
+	it( 'fetches json from the localized font awesome 7 base url', async () => {
+		// Arrange.
+		const jsonBaseUrl = 'https://cdn.example.com/fa7/json/';
+		window.elementorCommon = {
+			config: {
+				fontAwesome: {
+					v7: {
+						jsonFiles: [ 'solid', 'regular', 'brands' ],
+						jsonBaseUrl,
+					},
+				},
+			},
+		};
+		mockFetch( {
+			icons: {
+				star: [ STAR_WIDTH, STAR_HEIGHT, [], 'f005', STAR_PATH ],
+			},
+		} );
+
 		// Act.
-		const result = await iconTransformer( { value: 'fas fa-star' }, { key: 'svg' } );
+		await resolveSavedIcon( 'fas fa-star', 'fa-solid' );
 
 		// Assert.
+		expect( global.fetch ).toHaveBeenCalledWith( `${ jsonBaseUrl }solid.json`, {
+			signal: undefined,
+		} );
+	} );
+
+	it( 'does not fetch json when library is not an allowed fa7 file', async () => {
+		// Arrange.
+		mockFetch( { icons: {} } );
+
+		// Act.
+		const result = await resolveSavedIcon( 'fas fa-star', 'fa-../../wp-config' );
+
+		// Assert.
+		expect( global.fetch ).not.toHaveBeenCalled();
 		expect( result ).toEqual( { html: null, url: null } );
 	} );
+
+	it( 'returns null html when value or library is missing', async () => {
+		// Act.
+		const resolve = createPropsResolver( {
+			transformers: settingsTransformersRegistry,
+			schema: { svg: iconPropType() },
+		} );
+		const result = await resolve( {
+			props: {
+				svg: iconPropTypeUtil.create( {
+					value: stringPropTypeUtil.create( 'fas fa-star' ),
+					library: stringPropTypeUtil.create( '' ),
+				} ),
+			},
+		} );
+
+		// Assert.
+		expect( result.svg ).toEqual( { html: null, url: null } );
+	} );
 } );

package/src/transformers/shared/icon-transformer.ts

@@ -7,11 +7,18 @@ type IconValue = {
 	library?: unknown;
 };
 
-type FontAwesomeIconJson = [ number, number, unknown, unknown, string ];
+type FontAwesomeIconJson = [ number, number, unknown[], unknown, string | string[] ];
+
+type FontAwesome7EditorConfig = {
+	jsonFiles: string[];
+	jsonBaseUrl: string;
+};
 
 const FONT_AWESOME_JSON = {
 	width: 0,
 	height: 1,
+	aliases: 2,
+	unicode: 3,
 	path: 4,
 } as const;
 
@@ -40,7 +47,12 @@ export const iconTransformer = createTransformer( async ( value: IconValue, { si
 	}
 
 	const svgText = buildFontAwesomeSvg( iconData );
-	const html = processSvgContent( svgText );
+
+	if ( ! svgText ) {
+		return { html: null, url: null };
+	}
+
+	const html = processIconSvgContent( svgText );
 
 	return { html, url: null };
 } );
@@ -52,17 +64,32 @@ function getFontAwesomeIconName( iconValue: string ): string | null {
 }
 
 function getFontAwesomeJsonFileName( library: string ): string | null {
-	if ( ! library.startsWith( 'fa-' ) ) {
+	const fileName = library.replace( /^fa-/, '' );
+	const config = getFontAwesome7EditorConfig();
+
+	if ( ! config?.jsonFiles.includes( fileName ) ) {
 		return null;
 	}
 
-	return library.replace( /^fa-/, '' );
+	return fileName;
 }
 
-function getAssetsBaseUrl(): string | null {
-	const assetsUrl = window.elementorCommon?.config?.urls?.assets;
+function getFontAwesome7EditorConfig(): FontAwesome7EditorConfig | null {
+	const config = window.elementorCommon?.config?.fontAwesome?.v7;
+
+	if (
+		! config ||
+		! Array.isArray( config.jsonFiles ) ||
+		typeof config.jsonBaseUrl !== 'string' ||
+		config.jsonBaseUrl === ''
+	) {
+		return null;
+	}
 
-	return typeof assetsUrl === 'string' && assetsUrl !== '' ? assetsUrl : null;
+	return {
+		jsonFiles: config.jsonFiles,
+		jsonBaseUrl: config.jsonBaseUrl,
+	};
 }
 
 async function fetchFontAwesomeIcons(
@@ -88,33 +115,115 @@ async function loadFontAwesomeIcons(
 	jsonFileName: string,
 	signal?: AbortSignal
 ): Promise< Record< string, FontAwesomeIconJson > | null > {
-	const assetsUrl = getAssetsBaseUrl();
+	const config = getFontAwesome7EditorConfig();
 
-	if ( ! assetsUrl ) {
+	if ( ! config?.jsonFiles.includes( jsonFileName ) ) {
 		return null;
 	}
 
 	try {
-		const response = await fetch( `${ assetsUrl }lib/font-awesome/json/${ jsonFileName }.json`, { signal } );
+		const response = await fetch( `${ config.jsonBaseUrl }${ jsonFileName }.json`, {
+			signal,
+		} );
 
 		if ( ! response.ok ) {
 			return null;
 		}
 
 		const data = ( await response.json() ) as { icons?: Record< string, FontAwesomeIconJson > };
+		const icons = data.icons;
 
-		return data.icons ?? null;
+		if ( ! icons || typeof icons !== 'object' ) {
+			return null;
+		}
+
+		return indexFontAwesomeIcons( icons );
 	} catch {
 		return null;
 	}
 }
 
-function buildFontAwesomeSvg( iconData: FontAwesomeIconJson ): string {
+function indexFontAwesomeIcons( icons: Record< string, FontAwesomeIconJson > ): Record< string, FontAwesomeIconJson > {
+	const index: Record< string, FontAwesomeIconJson > = {};
+
+	for ( const [ name, iconData ] of Object.entries( icons ) ) {
+		if ( ! isValidIconTuple( iconData ) ) {
+			continue;
+		}
+
+		index[ name ] = iconData;
+
+		for ( const alias of iconData[ FONT_AWESOME_JSON.aliases ] ) {
+			if ( typeof alias === 'string' && alias !== '' && ! index[ alias ] ) {
+				index[ alias ] = iconData;
+			}
+		}
+	}
+
+	return index;
+}
+
+function isValidIconTuple( iconData: unknown ): iconData is FontAwesomeIconJson {
+	return (
+		Array.isArray( iconData ) &&
+		iconData.length >= 5 &&
+		typeof iconData[ FONT_AWESOME_JSON.width ] === 'number' &&
+		typeof iconData[ FONT_AWESOME_JSON.height ] === 'number' &&
+		Array.isArray( iconData[ FONT_AWESOME_JSON.aliases ] )
+	);
+}
+
+function buildFontAwesomeSvg( iconData: FontAwesomeIconJson ): string | null {
 	const width = iconData[ FONT_AWESOME_JSON.width ];
 	const height = iconData[ FONT_AWESOME_JSON.height ];
-	const path = iconData[ FONT_AWESOME_JSON.path ];
+	const paths = normalizePaths( iconData[ FONT_AWESOME_JSON.path ] );
+
+	if ( paths.length === 0 ) {
+		return null;
+	}
+
+	const pathMarkup = paths.map( ( path ) => `<path d="${ escapeSvgPath( path ) }"></path>` ).join( '' );
+
+	return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${ width } ${ height }">${ pathMarkup }</svg>`;
+}
+
+function normalizePaths( pathData: string | string[] ): string[] {
+	if ( typeof pathData === 'string' && pathData !== '' ) {
+		return [ pathData ];
+	}
+
+	if ( ! Array.isArray( pathData ) ) {
+		return [];
+	}
+
+	return pathData.filter( ( path ): path is string => typeof path === 'string' && path !== '' );
+}
+
+function escapeSvgPath( path: string ): string {
+	return path.replace( /&/g, '&amp;' ).replace( /"/g, '&quot;' ).replace( /</g, '&lt;' ).replace( />/g, '&gt;' );
+}
+
+function processIconSvgContent( svgText: string ): string | null {
+	const html = processSvgContent( svgText );
+
+	if ( ! html ) {
+		return null;
+	}
+
+	const parser = new DOMParser();
+	const doc = parser.parseFromString( html, 'image/svg+xml' );
+	const svgElement = doc.querySelector( 'svg' );
+
+	if ( ! svgElement ) {
+		return null;
+	}
+
+	svgElement.setAttribute( 'aria-hidden', 'true' );
+	svgElement.style.setProperty( 'width', '100%' );
+	svgElement.style.setProperty( 'height', '100%' );
+	svgElement.style.setProperty( 'overflow', 'visible' );
 
-	return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${ width } ${ height }"><path d="${ path }"></path></svg>`;
+	return svgElement.outerHTML;
 }
 
 export function resetFontAwesomeIconsCache() {

package/src/transformers/styles/flex-transformer.ts

@@ -6,6 +6,13 @@ type Flex = {
 	flexBasis?: { size: number; unit: string } | string | null;
 };
 
+const DEFAULT_FLEX_GROW = 0;
+const DEFAULT_FLEX_SHRINK = 1;
+const DEFAULT_FLEX_BASIS = 'auto';
+
+const formatBasis = ( basis: NonNullable< Flex[ 'flexBasis' ] > ) =>
+	typeof basis === 'object' && basis.size !== undefined ? `${ basis.size }${ basis.unit || '' }` : basis;
+
 export const flexTransformer = createTransformer( ( value: Flex ) => {
 	const grow = value.flexGrow;
 	const shrink = value.flexShrink;
@@ -19,37 +26,9 @@ export const flexTransformer = createTransformer( ( value: Flex ) => {
 		return null;
 	}
 
-	if ( hasGrow && hasShrink && hasBasis ) {
-		return `${ grow } ${ shrink } ${
-			typeof basis === 'object' && basis.size !== undefined ? `${ basis.size }${ basis.unit || '' }` : basis
-		}`;
-	}
-
-	if ( hasGrow && hasShrink && ! hasBasis ) {
-		return `${ grow } ${ shrink }`;
-	}
-	if ( hasGrow && ! hasShrink && hasBasis ) {
-		return `${ grow } 1 ${
-			typeof basis === 'object' && basis.size !== undefined ? `${ basis.size }${ basis.unit || '' }` : basis
-		}`;
-	}
-	if ( ! hasGrow && hasShrink && hasBasis ) {
-		return `0 ${ shrink } ${
-			typeof basis === 'object' && basis.size !== undefined ? `${ basis.size }${ basis.unit || '' }` : basis
-		}`;
-	}
-
-	if ( hasGrow && ! hasShrink && ! hasBasis ) {
-		return `${ grow }`;
-	}
-	if ( ! hasGrow && hasShrink && ! hasBasis ) {
-		return `0 ${ shrink }`;
-	}
-	if ( ! hasGrow && ! hasShrink && hasBasis ) {
-		return `0 1 ${
-			typeof basis === 'object' && basis.size !== undefined ? `${ basis.size }${ basis.unit || '' }` : basis
-		}`;
-	}
+	const growOut = hasGrow ? grow : DEFAULT_FLEX_GROW;
+	const shrinkOut = hasShrink ? shrink : DEFAULT_FLEX_SHRINK;
+	const basisOut = hasBasis ? formatBasis( basis ) : DEFAULT_FLEX_BASIS;
 
-	return null;
+	return `${ growOut } ${ shrinkOut } ${ basisOut }`;
 } );