@elementor/editor-controls 4.4.0-1141 → 4.4.0-1143

package/dist/index.mjs

@@ -6611,6 +6611,8 @@ var IconLibraryGrid = ({
 
 // src/controls/icon-library/icon-library-providers.ts
 import { useState as useState20 } from "react";
+import { useQuery as useQuery2 } from "@elementor/query";
+var PROVIDER_ICON_SVG_QUERY_KEY = "icon-library-provider-svg";
 var providers = /* @__PURE__ */ new Map();
 function registerIconLibraryProvider(provider) {
   providers.set(provider.id, provider);
@@ -6641,6 +6643,14 @@ async function resolveProviderIconSvg(library, iconValue, signal) {
   }
   return null;
 }
+function useProviderIconSvg(library, iconValue, enabled) {
+  return useQuery2({
+    queryKey: [PROVIDER_ICON_SVG_QUERY_KEY, library, iconValue],
+    queryFn: ({ signal }) => resolveProviderIconSvg(library, iconValue, signal),
+    enabled: enabled && Boolean(library && iconValue),
+    staleTime: Infinity
+  });
+}
 
 // src/controls/icon-library/icon-library-upload-action.tsx
 import * as React87 from "react";
@@ -6799,10 +6809,10 @@ var SvgElementIcon = React89.forwardRef(
 );
 
 // src/controls/icon-library/use-font-awesome-7-catalog.ts
-import { useQuery as useQuery2 } from "@elementor/query";
+import { useQuery as useQuery3 } from "@elementor/query";
 var FONT_AWESOME_7_CATALOG_QUERY_KEY = ["font-awesome-7-catalog"];
 function useFontAwesome7Catalog(enabled) {
-  return useQuery2({
+  return useQuery3({
     queryKey: FONT_AWESOME_7_CATALOG_QUERY_KEY,
     queryFn: ({ signal }) => loadFontAwesome7Catalog(signal),
     enabled,
@@ -7035,8 +7045,9 @@ function createIconPropValue(icon, library) {
 
 // src/controls/svg-media-overlay.tsx
 import * as React91 from "react";
+import { ThemeProvider } from "@elementor/editor-ui";
 import { LibraryIcon as LibraryIcon3 } from "@elementor/icons";
-import { Box as Box22, Button as Button6, Stack as Stack17, ThemeProvider, Typography as Typography11 } from "@elementor/ui";
+import { Box as Box22, Button as Button6, Stack as Stack17, Typography as Typography11 } from "@elementor/ui";
 import { __ as __39 } from "@wordpress/i18n";
 var SVG_MEDIA_CONTROL_CONTAINER_TEST_ID = "svg-media-control-container";
 var SVG_MEDIA_ACTION_GROUP_TEST_ID = "svg-media-action-group";
@@ -7105,17 +7116,37 @@ var SvgMediaPreview = ({ isFetching, src, iconClassName, iconLibrary }) => {
   const icons = [...fontAwesomeIcons, ...providerIcons];
   const selectedIcon = findFontAwesome7Icon(icons, iconClassName, iconLibrary);
   const isLoadingCatalog = shouldLoadIconCatalog && (isFontAwesomeLoading || isProviderLoading);
-  if (isFetching || isLoadingCatalog) {
+  const { data: savedIconSvg, isLoading: isSavedIconLoading } = useProviderIconSvg(
+    iconLibrary,
+    iconClassName,
+    shouldLoadIconCatalog && !isLoadingCatalog && !selectedIcon
+  );
+  if (isFetching || isLoadingCatalog || isSavedIconLoading) {
     return /* @__PURE__ */ React92.createElement(CircularProgress4, { role: "progressbar" });
   }
   if (selectedIcon) {
     return /* @__PURE__ */ React92.createElement(IconPreview, { icon: selectedIcon });
   }
+  if (savedIconSvg) {
+    return /* @__PURE__ */ React92.createElement(IconPreview, { icon: toSvgMarkupIcon(savedIconSvg, iconLibrary, iconClassName) });
+  }
   if (shouldLoadIconCatalog) {
     return /* @__PURE__ */ React92.createElement(IconPreviewPlaceholder, null);
   }
   return /* @__PURE__ */ React92.createElement(SvgPreview, { src });
 };
+var toSvgMarkupIcon = (svgMarkup, library, value) => ({
+  id: `${library}:${value}`,
+  label: value ?? "",
+  library: library ?? "",
+  value: value ?? "",
+  name: value ?? "",
+  aliases: [],
+  width: 0,
+  height: 0,
+  paths: [],
+  svgMarkup
+});
 var IconPreview = ({ icon }) => /* @__PURE__ */ React92.createElement(Box23, { sx: { color: ICON_PREVIEW_COLOR } }, /* @__PURE__ */ React92.createElement(
   FontAwesomeGlyph,
   {