🛠️ Implement SVG optimization utility and update getSource function to use it

src/templates/getSource.ts

@@ -1,3 +1,5 @@
+import { optimizeSvg } from "@/utils/optimizeSvg";
+
 interface SourceParams {
   url: string | undefined;
 }
@@ -5,5 +7,6 @@ interface SourceParams {
 export const getSource = async (params: SourceParams) => {
   const response = await fetch(params.url || "");
   const content = await response.text();
-  return content;
+  const optimizedContent = optimizeSvg({ svgCode: content });
+  return optimizedContent;
 };

src/utils/optimizeSvg.ts

@@ -0,0 +1,37 @@
+import { optimize } from "svgo/browser";
+
+interface OptimizeSvg {
+  svgCode: string;
+}
+
+export const optimizeSvg = ({ svgCode }: OptimizeSvg) => {
+  const svgo = optimize(svgCode, {
+    multipass: true,
+    plugins: [
+      "removeDimensions",
+      "removeXMLNS",
+      "removeDoctype",
+      "removeComments",
+      "removeStyleElement",
+      "cleanupAttrs",
+      "cleanupEnableBackground",
+      "cleanupIds",
+      "minifyStyles",
+      "removeDoctype",
+      "removeDesc",
+      "removeEmptyAttrs",
+      "removeEmptyText",
+      "removeHiddenElems",
+      "removeNonInheritableGroupAttrs",
+      "removeUnknownsAndDefaults",
+      "removeUselessDefs",
+      "removeUselessStrokeAndFill",
+      "removeXMLProcInst",
+      {
+        name: "removeAttrs",
+        params: { attrs: "(data-name|id|class)" },
+      },
+    ],
+  });
+  return svgo.data;
+};

src/utils/prefixSvgIds.ts

@@ -1,4 +1,4 @@
-import { optimize } from "svgo";
+import { optimize } from "svgo/browser";
 
 export const getPrefixFromSvgUrl = (svgUrl: string) => {
   return svgUrl.split("/").pop()!.replace(".svg", "").split("-").join("_");