fix: Updated to prerender svgs as well for cloud flare.

Author: dlabaj

src/__tests__/pages/api/__tests__/[version]/icons/[iconName].test.ts

@@ -9,13 +9,30 @@ const mockApiIndex = {
 
 const mockSvg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="200"/></svg>'
 
-jest.mock('../../../../../../utils/icons/reactIcons', () => ({
-  getIconSvg: jest.fn((setId: string, iconName: string) => {
-    if (setId === 'fa' && iconName === 'FaCircle') {
-      return Promise.resolve(mockSvg)
+const mockIconSvgs: Record<string, Record<string, string>> = {
+  fa: { FaCircle: mockSvg },
+}
+
+function createFetchMock(): typeof fetch {
+  return jest.fn((input: RequestInfo | URL) => {
+    const url = typeof input === 'string' ? input : input.toString()
+    const match = url.match(/\/iconsSvgs\/([^/]+)\.json/)
+    if (match) {
+      const setId = match[1]
+      const svgs = mockIconSvgs[setId] ?? {}
+      return Promise.resolve({
+        ok: true,
+        json: () => Promise.resolve(svgs),
+      } as Response)
     }
-    return Promise.resolve(null)
-  }),
+    return Promise.resolve({
+      ok: true,
+      json: () => Promise.resolve(mockApiIndex),
+    } as Response)
+  }) as typeof fetch
+}
+
+jest.mock('../../../../../../utils/icons/reactIcons', () => ({
   parseIconId: jest.fn((iconId: string) => {
     const underscoreIndex = iconId.indexOf('_')
     if (underscoreIndex <= 0) {
@@ -31,12 +48,7 @@ jest.mock('../../../../../../utils/icons/reactIcons', () => ({
 }))
 
 it('returns SVG markup for valid icon', async () => {
-  global.fetch = jest.fn(() =>
-    Promise.resolve({
-      ok: true,
-      json: () => Promise.resolve(mockApiIndex),
-    } as Response),
-  )
+  global.fetch = createFetchMock()
 
   const response = await GET({
     params: { version: 'v6', iconName: 'fa_FaCircle' },
@@ -55,12 +67,7 @@ it('returns SVG markup for valid icon', async () => {
 })
 
 it('returns 404 when icon is not found in set', async () => {
-  global.fetch = jest.fn(() =>
-    Promise.resolve({
-      ok: true,
-      json: () => Promise.resolve(mockApiIndex),
-    } as Response),
-  )
+  global.fetch = createFetchMock()
 
   const response = await GET({
     params: { version: 'v6', iconName: 'fa_FaNonExistent' },
@@ -78,12 +85,7 @@ it('returns 404 when icon is not found in set', async () => {
 })
 
 it('returns 400 for invalid icon name format (no underscore)', async () => {
-  global.fetch = jest.fn(() =>
-    Promise.resolve({
-      ok: true,
-      json: () => Promise.resolve(mockApiIndex),
-    } as Response),
-  )
+  global.fetch = createFetchMock()
 
   const response = await GET({
     params: { version: 'v6', iconName: 'invalid' },
@@ -101,12 +103,7 @@ it('returns 400 for invalid icon name format (no underscore)', async () => {
 })
 
 it('returns 400 for invalid icon name format (leading underscore)', async () => {
-  global.fetch = jest.fn(() =>
-    Promise.resolve({
-      ok: true,
-      json: () => Promise.resolve(mockApiIndex),
-    } as Response),
-  )
+  global.fetch = createFetchMock()
 
   const response = await GET({
     params: { version: 'v6', iconName: '_FaCircle' },
@@ -122,12 +119,7 @@ it('returns 400 for invalid icon name format (leading underscore)', async () =>
 })
 
 it('returns 400 when icon name parameter is missing', async () => {
-  global.fetch = jest.fn(() =>
-    Promise.resolve({
-      ok: true,
-      json: () => Promise.resolve(mockApiIndex),
-    } as Response),
-  )
+  global.fetch = createFetchMock()
 
   const response = await GET({
     params: { version: 'v6' },
@@ -143,12 +135,7 @@ it('returns 400 when icon name parameter is missing', async () => {
 })
 
 it('returns 404 for nonexistent version', async () => {
-  global.fetch = jest.fn(() =>
-    Promise.resolve({
-      ok: true,
-      json: () => Promise.resolve(mockApiIndex),
-    } as Response),
-  )
+  global.fetch = createFetchMock()
 
   const response = await GET({
     params: { version: 'v99', iconName: 'fa_FaCircle' },
@@ -165,12 +152,7 @@ it('returns 404 for nonexistent version', async () => {
 })
 
 it('returns 400 when version parameter is missing', async () => {
-  global.fetch = jest.fn(() =>
-    Promise.resolve({
-      ok: true,
-      json: () => Promise.resolve(mockApiIndex),
-    } as Response),
-  )
+  global.fetch = createFetchMock()
 
   const response = await GET({
     params: { iconName: 'fa_FaCircle' },
@@ -186,13 +168,20 @@ it('returns 400 when version parameter is missing', async () => {
 })
 
 it('returns 500 when fetchApiIndex fails', async () => {
-  global.fetch = jest.fn(() =>
-    Promise.resolve({
-      ok: false,
-      status: 500,
-      statusText: 'Internal Server Error',
-    } as Response),
-  )
+  global.fetch = jest.fn((input: RequestInfo | URL) => {
+    const url = typeof input === 'string' ? input : input.toString()
+    if (url.includes('apiIndex.json')) {
+      return Promise.resolve({
+        ok: false,
+        status: 500,
+        statusText: 'Internal Server Error',
+      } as Response)
+    }
+    return Promise.resolve({
+      ok: true,
+      json: () => Promise.resolve({}),
+    } as Response)
+  }) as typeof fetch
 
   const response = await GET({
     params: { version: 'v6', iconName: 'fa_FaCircle' },

src/pages/api/[version]/icons/[iconName].ts

@@ -4,7 +4,8 @@ import {
   createSvgResponse,
 } from '../../../../utils/apiHelpers'
 import { fetchApiIndex } from '../../../../utils/apiIndex/fetch'
-import { getIconSvg, parseIconId } from '../../../../utils/icons/reactIcons'
+import { fetchIconSvgs } from '../../../../utils/icons/fetch'
+import { parseIconId } from '../../../../utils/icons/reactIcons'
 
 export const prerender = false
 
@@ -51,7 +52,8 @@ export const GET: APIRoute = async ({ params, url }) => {
   }
 
   const { setId, iconName } = parsed
-  const svg = await getIconSvg(setId, iconName)
+  const svgs = await fetchIconSvgs(url, setId)
+  const svg = svgs?.[iconName] ?? null
 
   if (!svg) {
     return createJsonResponse(

src/pages/iconsSvgs/[setId].json.ts

@@ -0,0 +1,46 @@
+import type { APIRoute, GetStaticPaths } from 'astro'
+import { IconsManifest } from 'react-icons/lib'
+import { getIconSvgsForSet } from '../../utils/icons/reactIcons'
+
+/**
+ * Prerender at build time so this doesn't run in the Cloudflare Worker.
+ * getIconSvgsForSet() uses dynamic imports of react-icons which fail in Workers.
+ */
+export const prerender = true
+
+export const getStaticPaths: GetStaticPaths = async () =>
+  IconsManifest.map((m) => ({
+    params: { setId: m.id },
+  }))
+
+export const GET: APIRoute = async ({ params }) => {
+  const { setId } = params
+
+  if (!setId) {
+    return new Response(
+      JSON.stringify({ error: 'Set ID is required' }),
+      { status: 400, headers: { 'Content-Type': 'application/json' } }
+    )
+  }
+
+  try {
+    const svgs = await getIconSvgsForSet(setId)
+    return new Response(JSON.stringify(svgs), {
+      status: 200,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+  } catch (error) {
+    return new Response(
+      JSON.stringify({
+        error: 'Failed to load icon SVGs',
+        details: String(error),
+      }),
+      {
+        status: 500,
+        headers: { 'Content-Type': 'application/json' },
+      }
+    )
+  }
+}

src/utils/icons/fetch.ts

@@ -25,3 +25,26 @@ export async function fetchIconsIndex(url: URL): Promise<IconMetadata[]> {
   const data = (await response.json()) as IconsIndex
   return data.icons
 }
+
+/**
+ * Fetches prerendered SVG markup for all icons in a set.
+ * Used by the icon SVG API route at runtime instead of getIconSvg() which
+ * uses dynamic imports that fail in Cloudflare Workers.
+ *
+ * @param url - The URL object from the API route context
+ * @param setId - Icon set id (e.g., "fa", "ci")
+ * @returns Promise resolving to Record of iconName -> SVG string, or null if fetch fails
+ */
+export async function fetchIconSvgs(
+  url: URL,
+  setId: string,
+): Promise<Record<string, string> | null> {
+  const iconsSvgsUrl = new URL(`/iconsSvgs/${setId}.json`, url.origin)
+  const response = await fetch(iconsSvgsUrl)
+
+  if (!response.ok) {
+    return null
+  }
+
+  return (await response.json()) as Record<string, string>
+}

src/utils/icons/reactIcons.ts

@@ -109,6 +109,41 @@ export function filterIcons(
   )
 }
 
+/**
+ * Get SVG markup for all icons in a set. Used at build time for prerendering.
+ * @param setId - Icon set id (e.g., "fa", "md")
+ * @returns Record of iconName -> SVG string
+ */
+export async function getIconSvgsForSet(
+  setId: string,
+): Promise<Record<string, string>> {
+  if (!ICON_SET_IDS.includes(setId)) {
+    return {}
+  }
+
+  try {
+    const module = await import(`react-icons/${setId}`)
+    const svgs: Record<string, string> = {}
+
+    for (const iconName of Object.keys(module)) {
+      const IconComponent = module[iconName]
+      if (typeof IconComponent !== 'function' || iconName === 'default') {
+        continue
+      }
+
+      const element = React.createElement(IconComponent, {
+        size: '1em',
+        style: { verticalAlign: 'middle' },
+      })
+      svgs[iconName] = renderToStaticMarkup(element)
+    }
+
+    return svgs
+  } catch {
+    return {}
+  }
+}
+
 /**
  * Get SVG markup for a specific icon.
  * @param setId - Icon set id (e.g., "fa", "md")