fix: correct the SVG icon format (#4224)

* fix: correct the SVG icon format

closes #4220

* fix: ci fail

* chore: apply suggestion

packages/icons/src/svg/load.ts

@@ -1,7 +1,4 @@
-import {
-  addIcon,
-  // addCollection
-} from '@vben-core/icons';
+import { addIcon, type IconifyIcon } from '@vben-core/icons';
 
 let loaded = false;
 if (!loaded) {
@@ -9,32 +6,36 @@ if (!loaded) {
   loaded = true;
 }
 
-// addCollection({
-//   prefix: 'mdi',
-//   icons: {
-//       'account-box': {
-//           body: '<path d="M6 17c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6m9-9a3 3 0 0 1-3 3a3 3 0 0 1-3-3a3 3 0 0 1 3-3a3 3 0 0 1 3 3M3 5v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2z" fill="currentColor"/>',
-//       },
-//       'account-cash': {
-//           body: '<path d="M11 8c0 2.21-1.79 4-4 4s-4-1.79-4-4s1.79-4 4-4s4 1.79 4 4m0 6.72V20H0v-2c0-2.21 3.13-4 7-4c1.5 0 2.87.27 4 .72M24 20H13V3h11v17m-8-8.5a2.5 2.5 0 0 1 5 0a2.5 2.5 0 0 1-5 0M22 7a2 2 0 0 1-2-2h-3c0 1.11-.89 2-2 2v9a2 2 0 0 1 2 2h3c0-1.1.9-2 2-2V7z" fill="currentColor"/>',
-//       },
-//       'account': {
-//           body: '<path d="M12 4a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4z" fill="currentColor"/>',
-//       },
-//       'home': {
-//           body: '<path d="M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5z" fill="currentColor"/>',
-//       },
-//   },
-//   width: 24,
-//   height: 24,
-// });
+function parseSvg(svgData: string): IconifyIcon {
+  const parser = new DOMParser();
+  const xmlDoc = parser.parseFromString(svgData, 'image/svg+xml');
+  const svgElement = xmlDoc.documentElement;
+
+  const svgContent = [...svgElement.childNodes]
+    .filter((node) => node.nodeType === Node.ELEMENT_NODE)
+    .map((node) => new XMLSerializer().serializeToString(node))
+    .join('');
+
+  const viewBoxValue = svgElement.getAttribute('viewBox') || '';
+  const [left, top, width, height] = viewBoxValue.split(' ').map((val) => {
+    const num = Number(val);
+    return Number.isNaN(num) ? undefined : num;
+  });
+
+  return {
+    body: svgContent,
+    height,
+    left,
+    top,
+    width,
+  };
+}
 
 /**
  * 自定义的svg图片转化为组件
  * @example ./svg/avatar.svg
  * <Icon icon="svg:avatar"></Icon>
  */
-
 async function loadSvgIcons() {
   const svgEagers = import.meta.glob('./icons/**', {
     eager: true,
@@ -51,7 +52,7 @@ async function loadSvgIcons() {
       const iconName = key.slice(start, end);
 
       return addIcon(`svg:${iconName}`, {
-        body: typeof body === 'object' ? body.default : body,
+        ...parseSvg(typeof body === 'object' ? body.default : body),
       });
     }),
   );