@elementor/editor-canvas 4.4.0-1077 → 4.4.0-1079

package/dist/index.js

@@ -2107,6 +2107,9 @@ var timeRangeTransformer = createTransformer((value) => {
   };
 });
 
+// src/transformers/shared/icon-transformer.ts
+var import_editor_controls = require("@elementor/editor-controls");
+
 // src/transformers/shared/process-svg-content.ts
 var import_dompurify2 = __toESM(require("dompurify"));
 var SVG_INLINE_STYLES = "width: 100%; height: 100%; overflow: unset;";
@@ -2129,128 +2132,36 @@ function processSvgContent(svgText) {
 }
 
 // src/transformers/shared/icon-transformer.ts
-var FONT_AWESOME_JSON = {
-  width: 0,
-  height: 1,
-  aliases: 2,
-  unicode: 3,
-  path: 4
-};
-var fontAwesomeJsonCache = /* @__PURE__ */ new Map();
+var EMPTY_ICON_RESULT = { html: null, url: null };
+var ICON_SVG_SIZE = "100%";
+var ICON_SVG_OVERFLOW = "visible";
 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 };
+    return EMPTY_ICON_RESULT;
   }
-  const iconName = getFontAwesomeIconName(iconValue);
-  const jsonFileName = getFontAwesomeJsonFileName(library);
-  if (!iconName || !jsonFileName) {
-    return { html: null, url: null };
+  const iconName = (0, import_editor_controls.getFontAwesome7IconName)(iconValue);
+  if (!iconName) {
+    return EMPTY_ICON_RESULT;
   }
-  const icons = await fetchFontAwesomeIcons(jsonFileName, signal);
-  const iconData = icons?.[iconName];
+  const iconData = await (0, import_editor_controls.resolveFontAwesome7Icon)(library, iconName, signal);
   if (!iconData) {
-    return { html: null, url: null };
+    return EMPTY_ICON_RESULT;
   }
   const svgText = buildFontAwesomeSvg(iconData);
   if (!svgText) {
-    return { html: null, url: null };
+    return EMPTY_ICON_RESULT;
   }
   const html = processIconSvgContent(svgText);
   return { html, url: null };
 });
-function getFontAwesomeIconName(iconValue) {
-  const match = iconValue.match(/^fa\S*\s+fa-(.+)$/);
-  return match?.[1] ?? null;
-}
-function getFontAwesomeJsonFileName(library) {
-  const fileName = library.replace(/^fa-/, "");
-  const config = getFontAwesome7EditorConfig();
-  if (!config?.jsonFiles.includes(fileName)) {
-    return null;
-  }
-  return fileName;
-}
-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);
-  if (cached) {
-    return cached;
-  }
-  const icons = await loadFontAwesomeIcons(jsonFileName, signal);
-  if (icons) {
-    fontAwesomeJsonCache.set(jsonFileName, icons);
-  }
-  return icons;
-}
-async function loadFontAwesomeIcons(jsonFileName, signal) {
-  const config = getFontAwesome7EditorConfig();
-  if (!config?.jsonFiles.includes(jsonFileName)) {
-    return null;
-  }
-  try {
-    const response = await fetch(`${config.jsonBaseUrl}${jsonFileName}.json`, {
-      signal
-    });
-    if (!response.ok) {
-      return null;
-    }
-    const data = await response.json();
-    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 paths = normalizePaths(iconData[FONT_AWESOME_JSON.path]);
-  if (paths.length === 0) {
+  if (iconData.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 !== "");
+  const pathMarkup = iconData.paths.map((path) => `<path d="${escapeSvgPath(path)}"></path>`).join("");
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${iconData.width} ${iconData.height}">${pathMarkup}</svg>`;
 }
 function escapeSvgPath(path) {
   return path.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
@@ -2267,9 +2178,9 @@ function processIconSvgContent(svgText) {
     return null;
   }
   svgElement.setAttribute("aria-hidden", "true");
-  svgElement.style.setProperty("width", "100%");
-  svgElement.style.setProperty("height", "100%");
-  svgElement.style.setProperty("overflow", "visible");
+  svgElement.style.setProperty("width", ICON_SVG_SIZE);
+  svgElement.style.setProperty("height", ICON_SVG_SIZE);
+  svgElement.style.setProperty("overflow", ICON_SVG_OVERFLOW);
   return svgElement.outerHTML;
 }
 
@@ -2665,10 +2576,10 @@ var transformSkewTransformer = createTransformer((value) => {
 });
 
 // src/transformers/styles/transition-transformer.ts
-var import_editor_controls = require("@elementor/editor-controls");
+var import_editor_controls2 = require("@elementor/editor-controls");
 var getAllowedProperties = () => {
   const allowedProperties = /* @__PURE__ */ new Set();
-  import_editor_controls.transitionProperties.forEach((category) => {
+  import_editor_controls2.transitionProperties.forEach((category) => {
     category.properties.forEach((property) => {
       allowedProperties.add(property.value);
     });
@@ -3505,7 +3416,7 @@ var ReplacementBase = class {
 // src/legacy/replacements/inline-editing/canvas-inline-editor.tsx
 var React10 = __toESM(require("react"));
 var import_react18 = require("react");
-var import_editor_controls2 = require("@elementor/editor-controls");
+var import_editor_controls3 = require("@elementor/editor-controls");
 var import_ui5 = require("@elementor/ui");
 var import_react19 = require("@floating-ui/react");
 
@@ -3676,7 +3587,7 @@ var CanvasInlineEditor = ({
     return null;
   }
   return /* @__PURE__ */ React10.createElement(import_ui5.ThemeProvider, null, /* @__PURE__ */ React10.createElement(InlineEditingOverlay, { expectedTag, rootElement, id }), /* @__PURE__ */ React10.createElement(
-    import_editor_controls2.InlineEditor,
+    import_editor_controls3.InlineEditor,
     {
       onEditorCreate: setEditor,
       mountElement: contentElement,
@@ -3728,7 +3639,7 @@ var InlineEditingToolbar = ({ anchor, editor, id }) => {
         pointerEvents: "none"
       }
     },
-    /* @__PURE__ */ React10.createElement(import_editor_controls2.InlineEditorToolbar, { editor, elementId: id })
+    /* @__PURE__ */ React10.createElement(import_editor_controls3.InlineEditorToolbar, { editor, elementId: id })
   ));
 };
 

package/dist/index.mjs

@@ -2059,6 +2059,12 @@ var timeRangeTransformer = createTransformer((value) => {
   };
 });
 
+// src/transformers/shared/icon-transformer.ts
+import {
+  getFontAwesome7IconName,
+  resolveFontAwesome7Icon
+} from "@elementor/editor-controls";
+
 // src/transformers/shared/process-svg-content.ts
 import DOMPurify2 from "dompurify";
 var SVG_INLINE_STYLES = "width: 100%; height: 100%; overflow: unset;";
@@ -2081,128 +2087,36 @@ function processSvgContent(svgText) {
 }
 
 // src/transformers/shared/icon-transformer.ts
-var FONT_AWESOME_JSON = {
-  width: 0,
-  height: 1,
-  aliases: 2,
-  unicode: 3,
-  path: 4
-};
-var fontAwesomeJsonCache = /* @__PURE__ */ new Map();
+var EMPTY_ICON_RESULT = { html: null, url: null };
+var ICON_SVG_SIZE = "100%";
+var ICON_SVG_OVERFLOW = "visible";
 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 };
+    return EMPTY_ICON_RESULT;
   }
-  const iconName = getFontAwesomeIconName(iconValue);
-  const jsonFileName = getFontAwesomeJsonFileName(library);
-  if (!iconName || !jsonFileName) {
-    return { html: null, url: null };
+  const iconName = getFontAwesome7IconName(iconValue);
+  if (!iconName) {
+    return EMPTY_ICON_RESULT;
   }
-  const icons = await fetchFontAwesomeIcons(jsonFileName, signal);
-  const iconData = icons?.[iconName];
+  const iconData = await resolveFontAwesome7Icon(library, iconName, signal);
   if (!iconData) {
-    return { html: null, url: null };
+    return EMPTY_ICON_RESULT;
   }
   const svgText = buildFontAwesomeSvg(iconData);
   if (!svgText) {
-    return { html: null, url: null };
+    return EMPTY_ICON_RESULT;
   }
   const html = processIconSvgContent(svgText);
   return { html, url: null };
 });
-function getFontAwesomeIconName(iconValue) {
-  const match = iconValue.match(/^fa\S*\s+fa-(.+)$/);
-  return match?.[1] ?? null;
-}
-function getFontAwesomeJsonFileName(library) {
-  const fileName = library.replace(/^fa-/, "");
-  const config = getFontAwesome7EditorConfig();
-  if (!config?.jsonFiles.includes(fileName)) {
-    return null;
-  }
-  return fileName;
-}
-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);
-  if (cached) {
-    return cached;
-  }
-  const icons = await loadFontAwesomeIcons(jsonFileName, signal);
-  if (icons) {
-    fontAwesomeJsonCache.set(jsonFileName, icons);
-  }
-  return icons;
-}
-async function loadFontAwesomeIcons(jsonFileName, signal) {
-  const config = getFontAwesome7EditorConfig();
-  if (!config?.jsonFiles.includes(jsonFileName)) {
-    return null;
-  }
-  try {
-    const response = await fetch(`${config.jsonBaseUrl}${jsonFileName}.json`, {
-      signal
-    });
-    if (!response.ok) {
-      return null;
-    }
-    const data = await response.json();
-    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 paths = normalizePaths(iconData[FONT_AWESOME_JSON.path]);
-  if (paths.length === 0) {
+  if (iconData.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 !== "");
+  const pathMarkup = iconData.paths.map((path) => `<path d="${escapeSvgPath(path)}"></path>`).join("");
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${iconData.width} ${iconData.height}">${pathMarkup}</svg>`;
 }
 function escapeSvgPath(path) {
   return path.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
@@ -2219,9 +2133,9 @@ function processIconSvgContent(svgText) {
     return null;
   }
   svgElement.setAttribute("aria-hidden", "true");
-  svgElement.style.setProperty("width", "100%");
-  svgElement.style.setProperty("height", "100%");
-  svgElement.style.setProperty("overflow", "visible");
+  svgElement.style.setProperty("width", ICON_SVG_SIZE);
+  svgElement.style.setProperty("height", ICON_SVG_SIZE);
+  svgElement.style.setProperty("overflow", ICON_SVG_OVERFLOW);
   return svgElement.outerHTML;
 }
 

package/package.json

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

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

@@ -1,10 +1,10 @@
+import { resetFontAwesome7IconsCache } from '@elementor/editor-controls';
 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 = 576;
@@ -44,7 +44,7 @@ describe( 'iconTransformer', () => {
 
 	beforeEach( () => {
 		jest.clearAllMocks();
-		resetFontAwesomeIconsCache();
+		resetFontAwesome7IconsCache();
 		initSettingsTransformers();
 		window.elementorCommon = {
 			config: {

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

@@ -1,55 +1,46 @@
+import {
+	type FontAwesome7IconDefinition,
+	getFontAwesome7IconName,
+	resolveFontAwesome7Icon,
+} from '@elementor/editor-controls';
+
 import { createTransformer } from '../create-transformer';
 import type { TransformerOptions } from '../types';
 import { processSvgContent } from './process-svg-content';
 
+const EMPTY_ICON_RESULT = { html: null, url: null };
+const ICON_SVG_SIZE = '100%';
+const ICON_SVG_OVERFLOW = 'visible';
+
 type IconValue = {
 	value?: unknown;
 	library?: unknown;
 };
 
-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;
-
-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 };
+		return EMPTY_ICON_RESULT;
 	}
 
-	const iconName = getFontAwesomeIconName( iconValue );
-	const jsonFileName = getFontAwesomeJsonFileName( library );
+	const iconName = getFontAwesome7IconName( iconValue );
 
-	if ( ! iconName || ! jsonFileName ) {
-		return { html: null, url: null };
+	if ( ! iconName ) {
+		return EMPTY_ICON_RESULT;
 	}
 
-	const icons = await fetchFontAwesomeIcons( jsonFileName, signal );
-	const iconData = icons?.[ iconName ];
+	const iconData = await resolveFontAwesome7Icon( library, iconName, signal );
 
 	if ( ! iconData ) {
-		return { html: null, url: null };
+		return EMPTY_ICON_RESULT;
 	}
 
 	const svgText = buildFontAwesomeSvg( iconData );
 
 	if ( ! svgText ) {
-		return { html: null, url: null };
+		return EMPTY_ICON_RESULT;
 	}
 
 	const html = processIconSvgContent( svgText );
@@ -57,146 +48,14 @@ export const iconTransformer = createTransformer( async ( value: IconValue, { si
 	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 {
-	const fileName = library.replace( /^fa-/, '' );
-	const config = getFontAwesome7EditorConfig();
-
-	if ( ! config?.jsonFiles.includes( fileName ) ) {
-		return null;
-	}
-
-	return fileName;
-}
-
-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 {
-		jsonFiles: config.jsonFiles,
-		jsonBaseUrl: config.jsonBaseUrl,
-	};
-}
-
-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 config = getFontAwesome7EditorConfig();
-
-	if ( ! config?.jsonFiles.includes( jsonFileName ) ) {
-		return null;
-	}
-
-	try {
-		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;
-
-		if ( ! icons || typeof icons !== 'object' ) {
-			return null;
-		}
-
-		return indexFontAwesomeIcons( icons );
-	} catch {
-		return null;
-	}
-}
-
-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 paths = normalizePaths( iconData[ FONT_AWESOME_JSON.path ] );
-
-	if ( paths.length === 0 ) {
+function buildFontAwesomeSvg( iconData: FontAwesome7IconDefinition ): string | null {
+	if ( iconData.paths.length === 0 ) {
 		return null;
 	}
 
-	const pathMarkup = paths.map( ( path ) => `<path d="${ escapeSvgPath( path ) }"></path>` ).join( '' );
+	const pathMarkup = iconData.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 !== '' );
+	return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${ iconData.width } ${ iconData.height }">${ pathMarkup }</svg>`;
 }
 
 function escapeSvgPath( path: string ): string {
@@ -219,13 +78,9 @@ function processIconSvgContent( svgText: string ): string | null {
 	}
 
 	svgElement.setAttribute( 'aria-hidden', 'true' );
-	svgElement.style.setProperty( 'width', '100%' );
-	svgElement.style.setProperty( 'height', '100%' );
-	svgElement.style.setProperty( 'overflow', 'visible' );
+	svgElement.style.setProperty( 'width', ICON_SVG_SIZE );
+	svgElement.style.setProperty( 'height', ICON_SVG_SIZE );
+	svgElement.style.setProperty( 'overflow', ICON_SVG_OVERFLOW );
 
 	return svgElement.outerHTML;
 }
-
-export function resetFontAwesomeIconsCache() {
-	fontAwesomeJsonCache.clear();
-}