chore: extract svg from image (#4727)

Author: chdeskur

packages/fern-docs/bundle/src/components/util/processIcon.tsx

@@ -3,6 +3,7 @@ import type { NavigationNode } from "@fern-api/fdr-sdk/navigation";
 import { hasMetadata } from "@fern-api/fdr-sdk/navigation";
 import { NoZoom } from "@fern-docs/components/contexts/NoZoom";
 import { FernImage } from "@fern-docs/components/FernImage";
+import { FernSvgIcon } from "@fern-docs/components/FernSvgIcon";
 import type { ReactNode } from "react";
 import { FaIconServer } from "../fa-icon-server";
 
@@ -22,6 +23,14 @@ export const processIcon = ({ node, fallback, files }: ProcessIconOptions): Reac
         const fileData = files?.[fileId];
 
         if (fileData) {
+            if (fileData.src.endsWith(".svg")) {
+                return (
+                    <NoZoom>
+                        <FernSvgIcon src={fileData.src} alt={fileData.alt ?? ""} className="fern-file-icon size-5" />
+                    </NoZoom>
+                );
+            }
+
             return (
                 <NoZoom>
                     <FernImage

packages/fern-docs/components/src/FernSvgIcon.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import Image from "next/image";
+import { useEffect, useState } from "react";
+
+interface FernSvgIconProps {
+    src: string;
+    alt?: string;
+    className?: string;
+}
+
+export const FernSvgIcon: React.FC<FernSvgIconProps> = ({ src, alt, className }) => {
+    const [svgContent, setSvgContent] = useState<string | null>(null);
+    const [error, setError] = useState<boolean>(false);
+
+    useEffect(() => {
+        let isMounted = true;
+
+        const fetchSvg = async () => {
+            try {
+                // fetch icon from s3
+                const response = await fetch(src);
+                if (!response.ok) {
+                    throw new Error(`Failed to fetch SVG: ${response.statusText}`);
+                }
+                const text = await response.text();
+                if (isMounted) {
+                    setSvgContent(text);
+                }
+            } catch (err) {
+                console.error("Error fetching SVG:", err);
+                if (isMounted) {
+                    setError(true);
+                }
+            }
+        };
+
+        void fetchSvg();
+
+        return () => {
+            isMounted = false;
+        };
+    }, [src]);
+
+    if (error) {
+        return <Image src={src} width={16} height={16} alt={alt ?? ""} className={className} />;
+    }
+
+    if (!svgContent) {
+        return <span className={className} />;
+    }
+
+    const parser = new DOMParser();
+    const svgDoc = parser.parseFromString(svgContent, "image/svg+xml");
+    const svgElement = svgDoc.querySelector("svg");
+
+    if (svgElement && className) {
+        const existingClass = svgElement.getAttribute("class");
+        svgElement.setAttribute("class", existingClass ? `${existingClass} ${className}` : className);
+    }
+
+    const modifiedSvgContent = svgElement ? new XMLSerializer().serializeToString(svgElement) : svgContent;
+
+    return <span dangerouslySetInnerHTML={{ __html: modifiedSvgContent }} />;
+};

packages/fern-docs/components/src/processIcon.tsx

@@ -5,6 +5,7 @@ import type { ReactNode } from "react";
 
 import { NoZoom } from "./contexts/NoZoom";
 import { FernImage } from "./FernImage";
+import { FernSvgIcon } from "./FernSvgIcon";
 import { FaIconServer } from "./fa-icon-server";
 
 export interface ProcessIconOptions {
@@ -35,6 +36,14 @@ export const processIcon = ({
         const fileData = files?.[fileId];
 
         if (fileData) {
+            if (fileData.src.endsWith(".svg")) {
+                return (
+                    <NoZoom>
+                        <FernSvgIcon src={fileData.src} alt={fileData.alt ?? ""} className="fern-file-icon size-5" />
+                    </NoZoom>
+                );
+            }
+
             return (
                 <NoZoom>
                     <FernImage