refactor: extract loadSvgWithFill to shared svg.utils and update icon shape and fab button components

Author: gustedeveloper

src/common/components/mock-components/front-components/icon/icon-shape.business.ts

@@ -1,20 +1,5 @@
 import { IconSize } from '@/core/model';
 
-export const loadSvgWithFill = async (url: string, fillColor: string) => {
-  const response = await fetch(url);
-  const svgText = await response.text();
-
-  const modifiedSvg = svgText.replace(/fill="[^"]*"/g, `fill="${fillColor}"`);
-
-  const svgBlob = new Blob([modifiedSvg], { type: 'image/svg+xml' });
-  const objectURL = URL.createObjectURL(svgBlob);
-
-  const img = new window.Image();
-  img.src = objectURL;
-
-  return img;
-};
-
 export const returnIconSize = (iconSize: IconSize): number[] => {
   switch (iconSize) {
     case 'XS':

src/common/components/mock-components/front-components/icon/icon-shape.tsx

@@ -7,7 +7,8 @@ import { useModalDialogContext } from '@/core/providers/model-dialog-providers/m
 import { IconModal } from '@/pods/properties/components/icon-selector/modal';
 import { useCanvasContext } from '@/core/providers';
 import { useGroupShapeProps } from '../../mock-components.utils';
-import { loadSvgWithFill, returnIconSize } from './icon-shape.business';
+import { returnIconSize } from './icon-shape.business';
+import { loadSvgWithFill } from '@/common/utils/svg.utils';
 
 const iconShapeRestrictions: ShapeSizeRestrictions = {
   minWidth: 25,

src/common/components/mock-components/front-rich-components/fab-button/fab-button.tsx

@@ -6,10 +6,10 @@ import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes';
 import { useShapeProps } from '@/common/components/shapes/use-shape-props.hook';
 import { useGroupShapeProps } from '../../mock-components.utils';
 import { BASIC_SHAPE } from '../../front-components/shape.const';
-import { loadSvgWithFill } from '../../front-components/icon/icon-shape.business';
 import { IconModal } from '@/pods/properties/components/icon-selector/modal';
 import { useModalDialogContext } from '@/core/providers/model-dialog-providers/model-dialog.provider';
 import { useCanvasContext } from '@/core/providers';
+import { loadSvgWithFill } from '@/common/utils/svg.utils';
 
 const fabButtonShapeRestrictions: ShapeSizeRestrictions = {
   minWidth: 25,

src/common/utils/svg.utils.ts

@@ -0,0 +1,14 @@
+export const loadSvgWithFill = async (url: string, fillColor: string) => {
+  const response = await fetch(url);
+  const svgText = await response.text();
+
+  const modifiedSvg = svgText.replace(/fill="[^"]*"/g, `fill="${fillColor}"`);
+
+  const svgBlob = new Blob([modifiedSvg], { type: 'image/svg+xml' });
+  const objectURL = URL.createObjectURL(svgBlob);
+
+  const img = new window.Image();
+  img.src = objectURL;
+
+  return img;
+};