Fix style not an object when import from a svg

src/components/header/import-modal.tsx

@@ -31,14 +31,41 @@ export const ImportFromSvg = (props: { isOpen: boolean; onClose: () => void }) =
         },
     ];
 
+    function convertStyleStringToObject(style: any): Record<string, string> {
+        if (typeof style === 'object') {
+            return style;
+        } else if (typeof style === 'string') {
+            const styleObj: Record<string, string> = {};
+            const styleArray = style.split(';');
+            styleArray.forEach(item => {
+                const [property, value] = item.split(':');
+                if (property && value) {
+                    const trimmedProperty = property.trim();
+                    const trimmedValue = value.trim();
+                    const camelCaseProperty = trimmedProperty.replace(/-([a-z])/g, (match, letter) =>
+                        letter.toUpperCase()
+                    );
+                    styleObj[camelCaseProperty] = trimmedValue;
+                }
+            });
+            return styleObj;
+        }
+        return {};
+    }
+
     const handleImport = () => {
         const parser = new DOMParser();
         const doc = parser.parseFromString(svgString, 'image/svg+xml');
 
         const dfs = (element: Element): SvgsElem => {
             const attributes: Record<string, string> = {};
             Array.from(element.attributes).forEach(attr => {
-                attributes[attr.name] = `"${attr.value}"`;
+                if (attr.name === 'style') {
+                    console.log(convertStyleStringToObject(attr.value));
+                    attributes[attr.name] = JSON.stringify(convertStyleStringToObject(attr.value));
+                } else {
+                    attributes[attr.name] = `"${attr.value}"`;
+                }
             });
 
             const children: SvgsElem[] = [];