@elementor/editor-canvas 4.3.0-1059 → 4.3.0-1061

package/dist/index.js

@@ -2107,6 +2107,102 @@ var timeRangeTransformer = createTransformer((value) => {
   };
 });
 
+// src/transformers/shared/process-svg-content.ts
+var import_dompurify2 = __toESM(require("dompurify"));
+var SVG_INLINE_STYLES = "width: 100%; height: 100%; overflow: unset;";
+function processSvgContent(svgText) {
+  const sanitized = import_dompurify2.default.sanitize(svgText, {
+    USE_PROFILES: { svg: true, svgFilters: true }
+  });
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(sanitized, "image/svg+xml");
+  const svgElement = doc.querySelector("svg");
+  if (!svgElement) {
+    return null;
+  }
+  svgElement.setAttribute("fill", "currentColor");
+  const existingStyle = svgElement.getAttribute("style") ?? "";
+  const trimmed = existingStyle.trim();
+  const merged = trimmed ? `${trimmed.replace(/;$/, "")}; ${SVG_INLINE_STYLES}` : SVG_INLINE_STYLES;
+  svgElement.setAttribute("style", merged);
+  return svgElement.outerHTML;
+}
+
+// src/transformers/shared/icon-transformer.ts
+var FONT_AWESOME_JSON = {
+  width: 0,
+  height: 1,
+  path: 4
+};
+var fontAwesomeJsonCache = /* @__PURE__ */ new Map();
+var iconTransformer = createTransformer(async (value, { signal }) => {
+  const iconValue = typeof value.value === "string" ? value.value : null;
+  const library = typeof value.library === "string" ? value.library : null;
+  if (!iconValue || !library) {
+    return { html: null, url: null };
+  }
+  const iconName = getFontAwesomeIconName(iconValue);
+  const jsonFileName = getFontAwesomeJsonFileName(library);
+  if (!iconName || !jsonFileName) {
+    return { html: null, url: null };
+  }
+  const icons = await fetchFontAwesomeIcons(jsonFileName, signal);
+  const iconData = icons?.[iconName];
+  if (!iconData) {
+    return { html: null, url: null };
+  }
+  const svgText = buildFontAwesomeSvg(iconData);
+  const html = processSvgContent(svgText);
+  return { html, url: null };
+});
+function getFontAwesomeIconName(iconValue) {
+  const match = iconValue.match(/^fa\S*\s+fa-(.+)$/);
+  return match?.[1] ?? null;
+}
+function getFontAwesomeJsonFileName(library) {
+  if (!library.startsWith("fa-")) {
+    return null;
+  }
+  return library.replace(/^fa-/, "");
+}
+function getAssetsBaseUrl() {
+  const assetsUrl = window.elementorCommon?.config?.urls?.assets;
+  return typeof assetsUrl === "string" && assetsUrl !== "" ? assetsUrl : null;
+}
+async function fetchFontAwesomeIcons(jsonFileName, signal) {
+  const cached = fontAwesomeJsonCache.get(jsonFileName);
+  if (cached) {
+    return cached;
+  }
+  const icons = await loadFontAwesomeIcons(jsonFileName, signal);
+  if (icons) {
+    fontAwesomeJsonCache.set(jsonFileName, icons);
+  }
+  return icons;
+}
+async function loadFontAwesomeIcons(jsonFileName, signal) {
+  const assetsUrl = getAssetsBaseUrl();
+  if (!assetsUrl) {
+    return null;
+  }
+  try {
+    const response = await fetch(`${assetsUrl}lib/font-awesome/json/${jsonFileName}.json`, { signal });
+    if (!response.ok) {
+      return null;
+    }
+    const data = await response.json();
+    return data.icons ?? null;
+  } catch {
+    return null;
+  }
+}
+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>`;
+}
+
 // src/transformers/shared/image-src-transformer.ts
 var imageSrcTransformer = createTransformer((value) => ({
   id: value.id ?? null,
@@ -2148,26 +2244,7 @@ var plainTransformer = createTransformer((value) => {
 });
 
 // src/transformers/shared/svg-src-transformer.ts
-var import_dompurify2 = __toESM(require("dompurify"));
 var import_wp_media2 = require("@elementor/wp-media");
-var SVG_INLINE_STYLES = "width: 100%; height: 100%; overflow: unset;";
-function processSvgContent(svgText) {
-  const sanitized = import_dompurify2.default.sanitize(svgText, {
-    USE_PROFILES: { svg: true, svgFilters: true }
-  });
-  const parser = new DOMParser();
-  const doc = parser.parseFromString(sanitized, "image/svg+xml");
-  const svgElement = doc.querySelector("svg");
-  if (!svgElement) {
-    return null;
-  }
-  svgElement.setAttribute("fill", "currentColor");
-  const existingStyle = svgElement.getAttribute("style") ?? "";
-  const trimmed = existingStyle.trim();
-  const merged = trimmed ? `${trimmed.replace(/;$/, "")}; ${SVG_INLINE_STYLES}` : SVG_INLINE_STYLES;
-  svgElement.setAttribute("style", merged);
-  return svgElement.outerHTML;
-}
 async function fetchSvgContent(url, signal) {
   try {
     const response = await fetch(url, { signal });
@@ -2223,7 +2300,7 @@ var videoSrcTransformer = createTransformer(async (value) => {
 
 // src/init-settings-transformers.ts
 function initSettingsTransformers() {
-  settingsTransformersRegistry.register("classes", createClassesTransformer()).register("link", linkTransformer).register("query", queryTransformer).register("image", imageTransformer).register("image-src", imageSrcTransformer).register("svg-src", svgSrcTransformer).register("video-src", videoSrcTransformer).register("attributes", attributesTransformer).register("date-time", dateTimeTransformer).register("html-v2", htmlV2Transformer).register("html-v3", htmlV3Transformer).register("escaped-html", escapedHtmlTransformer).register("date-range", dateRangeTransformer).register("time-range", timeRangeTransformer).registerFallback(plainTransformer);
+  settingsTransformersRegistry.register("classes", createClassesTransformer()).register("link", linkTransformer).register("query", queryTransformer).register("image", imageTransformer).register("image-src", imageSrcTransformer).register("svg-src", svgSrcTransformer).register("icon", iconTransformer).register("video-src", videoSrcTransformer).register("attributes", attributesTransformer).register("date-time", dateTimeTransformer).register("html-v2", htmlV2Transformer).register("html-v3", htmlV3Transformer).register("escaped-html", escapedHtmlTransformer).register("date-range", dateRangeTransformer).register("time-range", timeRangeTransformer).registerFallback(plainTransformer);
 }
 
 // src/transformers/styles/background-color-overlay-transformer.ts
@@ -4915,7 +4992,7 @@ Do NOT send "group" (it is resolved automatically). Use { "settings": {} } only
   );
   configureElementToolPrompt.parameter(
     "style",
-    'A flat map of raw CSS declarations (property \u2192 value), e.g. { "line-height": "1.25rem", "color": "var(--primary-text, #000)" }. Set a value to null to reset that property to its default. OPTIONAL.'
+    'A flat map of raw CSS declarations (property \u2192 value), e.g. { "line-height": "1.25rem", "color": "var(--primary-text, #000)" }. font-family must be a single Google Font name or a var(--label) \u2014 no fallback stacks. Set a value to null to reset that property to its default. OPTIONAL.'
   );
   configureElementToolPrompt.example(`
 \`\`\`json

package/dist/index.mjs

@@ -2059,6 +2059,102 @@ var timeRangeTransformer = createTransformer((value) => {
   };
 });
 
+// src/transformers/shared/process-svg-content.ts
+import DOMPurify2 from "dompurify";
+var SVG_INLINE_STYLES = "width: 100%; height: 100%; overflow: unset;";
+function processSvgContent(svgText) {
+  const sanitized = DOMPurify2.sanitize(svgText, {
+    USE_PROFILES: { svg: true, svgFilters: true }
+  });
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(sanitized, "image/svg+xml");
+  const svgElement = doc.querySelector("svg");
+  if (!svgElement) {
+    return null;
+  }
+  svgElement.setAttribute("fill", "currentColor");
+  const existingStyle = svgElement.getAttribute("style") ?? "";
+  const trimmed = existingStyle.trim();
+  const merged = trimmed ? `${trimmed.replace(/;$/, "")}; ${SVG_INLINE_STYLES}` : SVG_INLINE_STYLES;
+  svgElement.setAttribute("style", merged);
+  return svgElement.outerHTML;
+}
+
+// src/transformers/shared/icon-transformer.ts
+var FONT_AWESOME_JSON = {
+  width: 0,
+  height: 1,
+  path: 4
+};
+var fontAwesomeJsonCache = /* @__PURE__ */ new Map();
+var iconTransformer = createTransformer(async (value, { signal }) => {
+  const iconValue = typeof value.value === "string" ? value.value : null;
+  const library = typeof value.library === "string" ? value.library : null;
+  if (!iconValue || !library) {
+    return { html: null, url: null };
+  }
+  const iconName = getFontAwesomeIconName(iconValue);
+  const jsonFileName = getFontAwesomeJsonFileName(library);
+  if (!iconName || !jsonFileName) {
+    return { html: null, url: null };
+  }
+  const icons = await fetchFontAwesomeIcons(jsonFileName, signal);
+  const iconData = icons?.[iconName];
+  if (!iconData) {
+    return { html: null, url: null };
+  }
+  const svgText = buildFontAwesomeSvg(iconData);
+  const html = processSvgContent(svgText);
+  return { html, url: null };
+});
+function getFontAwesomeIconName(iconValue) {
+  const match = iconValue.match(/^fa\S*\s+fa-(.+)$/);
+  return match?.[1] ?? null;
+}
+function getFontAwesomeJsonFileName(library) {
+  if (!library.startsWith("fa-")) {
+    return null;
+  }
+  return library.replace(/^fa-/, "");
+}
+function getAssetsBaseUrl() {
+  const assetsUrl = window.elementorCommon?.config?.urls?.assets;
+  return typeof assetsUrl === "string" && assetsUrl !== "" ? assetsUrl : null;
+}
+async function fetchFontAwesomeIcons(jsonFileName, signal) {
+  const cached = fontAwesomeJsonCache.get(jsonFileName);
+  if (cached) {
+    return cached;
+  }
+  const icons = await loadFontAwesomeIcons(jsonFileName, signal);
+  if (icons) {
+    fontAwesomeJsonCache.set(jsonFileName, icons);
+  }
+  return icons;
+}
+async function loadFontAwesomeIcons(jsonFileName, signal) {
+  const assetsUrl = getAssetsBaseUrl();
+  if (!assetsUrl) {
+    return null;
+  }
+  try {
+    const response = await fetch(`${assetsUrl}lib/font-awesome/json/${jsonFileName}.json`, { signal });
+    if (!response.ok) {
+      return null;
+    }
+    const data = await response.json();
+    return data.icons ?? null;
+  } catch {
+    return null;
+  }
+}
+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>`;
+}
+
 // src/transformers/shared/image-src-transformer.ts
 var imageSrcTransformer = createTransformer((value) => ({
   id: value.id ?? null,
@@ -2100,26 +2196,7 @@ var plainTransformer = createTransformer((value) => {
 });
 
 // src/transformers/shared/svg-src-transformer.ts
-import DOMPurify2 from "dompurify";
 import { getMediaAttachment as getMediaAttachment2 } from "@elementor/wp-media";
-var SVG_INLINE_STYLES = "width: 100%; height: 100%; overflow: unset;";
-function processSvgContent(svgText) {
-  const sanitized = DOMPurify2.sanitize(svgText, {
-    USE_PROFILES: { svg: true, svgFilters: true }
-  });
-  const parser = new DOMParser();
-  const doc = parser.parseFromString(sanitized, "image/svg+xml");
-  const svgElement = doc.querySelector("svg");
-  if (!svgElement) {
-    return null;
-  }
-  svgElement.setAttribute("fill", "currentColor");
-  const existingStyle = svgElement.getAttribute("style") ?? "";
-  const trimmed = existingStyle.trim();
-  const merged = trimmed ? `${trimmed.replace(/;$/, "")}; ${SVG_INLINE_STYLES}` : SVG_INLINE_STYLES;
-  svgElement.setAttribute("style", merged);
-  return svgElement.outerHTML;
-}
 async function fetchSvgContent(url, signal) {
   try {
     const response = await fetch(url, { signal });
@@ -2175,7 +2252,7 @@ var videoSrcTransformer = createTransformer(async (value) => {
 
 // src/init-settings-transformers.ts
 function initSettingsTransformers() {
-  settingsTransformersRegistry.register("classes", createClassesTransformer()).register("link", linkTransformer).register("query", queryTransformer).register("image", imageTransformer).register("image-src", imageSrcTransformer).register("svg-src", svgSrcTransformer).register("video-src", videoSrcTransformer).register("attributes", attributesTransformer).register("date-time", dateTimeTransformer).register("html-v2", htmlV2Transformer).register("html-v3", htmlV3Transformer).register("escaped-html", escapedHtmlTransformer).register("date-range", dateRangeTransformer).register("time-range", timeRangeTransformer).registerFallback(plainTransformer);
+  settingsTransformersRegistry.register("classes", createClassesTransformer()).register("link", linkTransformer).register("query", queryTransformer).register("image", imageTransformer).register("image-src", imageSrcTransformer).register("svg-src", svgSrcTransformer).register("icon", iconTransformer).register("video-src", videoSrcTransformer).register("attributes", attributesTransformer).register("date-time", dateTimeTransformer).register("html-v2", htmlV2Transformer).register("html-v3", htmlV3Transformer).register("escaped-html", escapedHtmlTransformer).register("date-range", dateRangeTransformer).register("time-range", timeRangeTransformer).registerFallback(plainTransformer);
 }
 
 // src/transformers/styles/background-color-overlay-transformer.ts
@@ -4891,7 +4968,7 @@ Do NOT send "group" (it is resolved automatically). Use { "settings": {} } only
   );
   configureElementToolPrompt.parameter(
     "style",
-    'A flat map of raw CSS declarations (property \u2192 value), e.g. { "line-height": "1.25rem", "color": "var(--primary-text, #000)" }. Set a value to null to reset that property to its default. OPTIONAL.'
+    'A flat map of raw CSS declarations (property \u2192 value), e.g. { "line-height": "1.25rem", "color": "var(--primary-text, #000)" }. font-family must be a single Google Font name or a var(--label) \u2014 no fallback stacks. Set a value to null to reset that property to its default. OPTIONAL.'
   );
   configureElementToolPrompt.example(`
 \`\`\`json

package/package.json

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

package/src/init-settings-transformers.ts

@@ -9,6 +9,7 @@ import { htmlV3Transformer } from './transformers/settings/html-v3-transformer';
 import { linkTransformer } from './transformers/settings/link-transformer';
 import { queryTransformer } from './transformers/settings/query-transformer';
 import { timeRangeTransformer } from './transformers/settings/time-range-transformer';
+import { iconTransformer } from './transformers/shared/icon-transformer';
 import { imageSrcTransformer } from './transformers/shared/image-src-transformer';
 import { imageTransformer } from './transformers/shared/image-transformer';
 import { plainTransformer } from './transformers/shared/plain-transformer';
@@ -23,6 +24,7 @@ export function initSettingsTransformers() {
 		.register( 'image', imageTransformer )
 		.register( 'image-src', imageSrcTransformer )
 		.register( 'svg-src', svgSrcTransformer )
+		.register( 'icon', iconTransformer )
 		.register( 'video-src', videoSrcTransformer )
 		.register( 'attributes', attributesTransformer )
 		.register( 'date-time', dateTimeTransformer )

package/src/mcp/tools/configure-element/prompt.ts

@@ -80,7 +80,7 @@ Do NOT send "group" (it is resolved automatically). Use { "settings": {} } only
 
 	configureElementToolPrompt.parameter(
 		'style',
-		'A flat map of raw CSS declarations (property → value), e.g. { "line-height": "1.25rem", "color": "var(--primary-text, #000)" }. Set a value to null to reset that property to its default. OPTIONAL.'
+		'A flat map of raw CSS declarations (property → value), e.g. { "line-height": "1.25rem", "color": "var(--primary-text, #000)" }. font-family must be a single Google Font name or a var(--label) — no fallback stacks. Set a value to null to reset that property to its default. OPTIONAL.'
 	);
 
 	configureElementToolPrompt.example( `

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

@@ -0,0 +1,74 @@
+import { iconTransformer, resetFontAwesomeIconsCache } from '../icon-transformer';
+
+const STAR_PATH = 'M0 0h100v100H0z';
+const STAR_WIDTH = 512;
+const STAR_HEIGHT = 512;
+
+const mockFetch = ( body: unknown, ok = true ) => {
+	global.fetch = jest.fn().mockResolvedValue( {
+		ok,
+		json: () => Promise.resolve( body ),
+	} );
+};
+
+describe( 'iconTransformer', () => {
+	const originalElementorCommon = window.elementorCommon;
+
+	beforeEach( () => {
+		jest.clearAllMocks();
+		resetFontAwesomeIconsCache();
+		window.elementorCommon = {
+			config: {
+				urls: {
+					assets: 'https://example.com/assets/',
+				},
+			},
+		};
+	} );
+
+	afterEach( () => {
+		window.elementorCommon = originalElementorCommon;
+		jest.restoreAllMocks();
+	} );
+
+	it( 'returns processed inline svg for a font awesome icon', async () => {
+		// Arrange.
+		mockFetch( {
+			icons: {
+				star: [ STAR_WIDTH, STAR_HEIGHT, [], 'f005', STAR_PATH ],
+			},
+		} );
+
+		// Act.
+		const result = await iconTransformer( { value: 'fas fa-star', library: 'fa-solid' }, { key: 'svg' } );
+
+		// Assert.
+		expect( global.fetch ).toHaveBeenCalledWith( 'https://example.com/assets/lib/font-awesome/json/solid.json', {
+			signal: undefined,
+		} );
+		expect( result ).toEqual( {
+			html: expect.stringContaining( STAR_PATH ),
+			url: null,
+		} );
+		expect( ( result as { html: string } ).html ).toContain( 'fill="currentColor"' );
+	} );
+
+	it( 'returns null html when the icon cannot be resolved', async () => {
+		// Arrange.
+		mockFetch( { icons: {} } );
+
+		// Act.
+		const result = await iconTransformer( { value: 'fas fa-missing', library: 'fa-solid' }, { key: 'svg' } );
+
+		// Assert.
+		expect( result ).toEqual( { html: null, url: null } );
+	} );
+
+	it( 'returns null html when value or library is missing', async () => {
+		// Act.
+		const result = await iconTransformer( { value: 'fas fa-star' }, { key: 'svg' } );
+
+		// Assert.
+		expect( result ).toEqual( { html: null, url: null } );
+	} );
+} );

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

@@ -0,0 +1,122 @@
+import { createTransformer } from '../create-transformer';
+import type { TransformerOptions } from '../types';
+import { processSvgContent } from './process-svg-content';
+
+type IconValue = {
+	value?: unknown;
+	library?: unknown;
+};
+
+type FontAwesomeIconJson = [ number, number, unknown, unknown, string ];
+
+const FONT_AWESOME_JSON = {
+	width: 0,
+	height: 1,
+	path: 4,
+} as const;
+
+const fontAwesomeJsonCache = new Map< string, Record< string, FontAwesomeIconJson > >();
+
+export const iconTransformer = createTransformer( async ( value: IconValue, { signal }: TransformerOptions ) => {
+	const iconValue = typeof value.value === 'string' ? value.value : null;
+	const library = typeof value.library === 'string' ? value.library : null;
+
+	if ( ! iconValue || ! library ) {
+		return { html: null, url: null };
+	}
+
+	const iconName = getFontAwesomeIconName( iconValue );
+	const jsonFileName = getFontAwesomeJsonFileName( library );
+
+	if ( ! iconName || ! jsonFileName ) {
+		return { html: null, url: null };
+	}
+
+	const icons = await fetchFontAwesomeIcons( jsonFileName, signal );
+	const iconData = icons?.[ iconName ];
+
+	if ( ! iconData ) {
+		return { html: null, url: null };
+	}
+
+	const svgText = buildFontAwesomeSvg( iconData );
+	const html = processSvgContent( svgText );
+
+	return { html, url: null };
+} );
+
+function getFontAwesomeIconName( iconValue: string ): string | null {
+	const match = iconValue.match( /^fa\S*\s+fa-(.+)$/ );
+
+	return match?.[ 1 ] ?? null;
+}
+
+function getFontAwesomeJsonFileName( library: string ): string | null {
+	if ( ! library.startsWith( 'fa-' ) ) {
+		return null;
+	}
+
+	return library.replace( /^fa-/, '' );
+}
+
+function getAssetsBaseUrl(): string | null {
+	const assetsUrl = window.elementorCommon?.config?.urls?.assets;
+
+	return typeof assetsUrl === 'string' && assetsUrl !== '' ? assetsUrl : null;
+}
+
+async function fetchFontAwesomeIcons(
+	jsonFileName: string,
+	signal?: AbortSignal
+): Promise< Record< string, FontAwesomeIconJson > | null > {
+	const cached = fontAwesomeJsonCache.get( jsonFileName );
+
+	if ( cached ) {
+		return cached;
+	}
+
+	const icons = await loadFontAwesomeIcons( jsonFileName, signal );
+
+	if ( icons ) {
+		fontAwesomeJsonCache.set( jsonFileName, icons );
+	}
+
+	return icons;
+}
+
+async function loadFontAwesomeIcons(
+	jsonFileName: string,
+	signal?: AbortSignal
+): Promise< Record< string, FontAwesomeIconJson > | null > {
+	const assetsUrl = getAssetsBaseUrl();
+
+	if ( ! assetsUrl ) {
+		return null;
+	}
+
+	try {
+		const response = await fetch( `${ assetsUrl }lib/font-awesome/json/${ jsonFileName }.json`, { signal } );
+
+		if ( ! response.ok ) {
+			return null;
+		}
+
+		const data = ( await response.json() ) as { icons?: Record< string, FontAwesomeIconJson > };
+
+		return data.icons ?? null;
+	} catch {
+		return null;
+	}
+}
+
+function buildFontAwesomeSvg( iconData: FontAwesomeIconJson ): string {
+	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>`;
+}
+
+export function resetFontAwesomeIconsCache() {
+	fontAwesomeJsonCache.clear();
+}

package/src/transformers/shared/process-svg-content.ts

@@ -0,0 +1,26 @@
+import DOMPurify from 'dompurify';
+
+const SVG_INLINE_STYLES = 'width: 100%; height: 100%; overflow: unset;';
+
+export function processSvgContent( svgText: string ): string | null {
+	const sanitized = DOMPurify.sanitize( svgText, {
+		USE_PROFILES: { svg: true, svgFilters: true },
+	} );
+
+	const parser = new DOMParser();
+	const doc = parser.parseFromString( sanitized, 'image/svg+xml' );
+	const svgElement = doc.querySelector( 'svg' );
+
+	if ( ! svgElement ) {
+		return null;
+	}
+
+	svgElement.setAttribute( 'fill', 'currentColor' );
+
+	const existingStyle = svgElement.getAttribute( 'style' ) ?? '';
+	const trimmed = existingStyle.trim();
+	const merged = trimmed ? `${ trimmed.replace( /;$/, '' ) }; ${ SVG_INLINE_STYLES }` : SVG_INLINE_STYLES;
+	svgElement.setAttribute( 'style', merged );
+
+	return svgElement.outerHTML;
+}

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

@@ -1,39 +1,14 @@
-import DOMPurify from 'dompurify';
 import { getMediaAttachment } from '@elementor/wp-media';
 
 import { createTransformer } from '../create-transformer';
 import type { TransformerOptions } from '../types';
+import { processSvgContent } from './process-svg-content';
 
 type SvgSrc = {
 	id?: unknown;
 	url?: unknown;
 };
 
-const SVG_INLINE_STYLES = 'width: 100%; height: 100%; overflow: unset;';
-
-function processSvgContent( svgText: string ): string | null {
-	const sanitized = DOMPurify.sanitize( svgText, {
-		USE_PROFILES: { svg: true, svgFilters: true },
-	} );
-
-	const parser = new DOMParser();
-	const doc = parser.parseFromString( sanitized, 'image/svg+xml' );
-	const svgElement = doc.querySelector( 'svg' );
-
-	if ( ! svgElement ) {
-		return null;
-	}
-
-	svgElement.setAttribute( 'fill', 'currentColor' );
-
-	const existingStyle = svgElement.getAttribute( 'style' ) ?? '';
-	const trimmed = existingStyle.trim();
-	const merged = trimmed ? `${ trimmed.replace( /;$/, '' ) }; ${ SVG_INLINE_STYLES }` : SVG_INLINE_STYLES;
-	svgElement.setAttribute( 'style', merged );
-
-	return svgElement.outerHTML;
-}
-
 async function fetchSvgContent( url: string, signal?: AbortSignal ): Promise< string | null > {
 	try {
 		const response = await fetch( url, { signal } );