From dff42fe32649a348084d79e49a2efbfc898de864 Mon Sep 17 00:00:00 2001
From: Jakob Guddas <github@jguddas.de>
Date: Wed, 11 Oct 2023 13:21:42 +0200
Subject: [PATCH] fix: gh-icon improvements (#1595)

---
 docs/.vitepress/api/gh-icon/[...data].get.ts | 47 +++++++++++---------
 1 file changed, 25 insertions(+), 22 deletions(-)

diff --git a/docs/.vitepress/api/gh-icon/[...data].get.ts b/docs/.vitepress/api/gh-icon/[...data].get.ts
index f688c57ab..8b4abb4c7 100644
--- a/docs/.vitepress/api/gh-icon/[...data].get.ts
+++ b/docs/.vitepress/api/gh-icon/[...data].get.ts
@@ -1,41 +1,44 @@
-import { eventHandler, setResponseHeader, defaultContentType } from 'h3'
-import { renderToString, renderToStaticMarkup } from 'react-dom/server'
-import { createElement } from 'react'
+import { eventHandler, setResponseHeader, defaultContentType } from 'h3';
+import { renderToString, renderToStaticMarkup } from 'react-dom/server';
+import { createElement } from 'react';
 import SvgPreview from '../../lib/SvgPreview/index.tsx';
-import iconNodes from '../../data/iconNodes'
-import createLucideIcon from 'lucide-react/src/createLucideIcon'
+import iconNodes from '../../data/iconNodes';
+import createLucideIcon from 'lucide-react/src/createLucideIcon';
 import Backdrop from '../../lib/SvgPreview/Backdrop.tsx';
 
 export default eventHandler((event) => {
-  const { params } = event.context
+  const { params } = event.context;
 
-  const [name, svgData] = params.data.split('/');
-  const data = svgData.slice(0, -4);
+  const pathData = params.data.split('/');
+  const data = pathData.at(-1).slice(0, -4);
+  const [name] = pathData;
 
   const src = Buffer.from(data, 'base64').toString('utf8');
 
-  const children = []
+  const children = [];
 
-  if (name in iconNodes) {
-    const iconNode = iconNodes[name]
+  // If the icon already exists, it uses the existing icon as the backdrop.
+  // If the icon does not exist but an icon exists that starts with the same group name, that icon
+  // is used as the backdrop
+  const backdropName =
+    name in iconNodes ? name : name.split('-')[0] in iconNodes ? name.split('-')[0] : null;
+  if (backdropName) {
+    const iconNode = iconNodes[backdropName];
 
-    const LucideIcon = createLucideIcon(name, iconNode)
-    const svg = renderToStaticMarkup(createElement(LucideIcon))
+    const LucideIcon = createLucideIcon(backdropName, iconNode);
+    const svg = renderToStaticMarkup(createElement(LucideIcon));
     const backdropString = svg.replace(/<svg[^>]*>|<\/svg>/g, '');
 
-    children.push(createElement(Backdrop, { backdropString, src }))
+    children.push(createElement(Backdrop, { backdropString, src }));
   }
 
   const svg = Buffer.from(
     // We can't use jsx here, is not supported here by nitro.
-    renderToString(createElement(SvgPreview, {src, showGrid: true}, children)).replace(
-      />/,
-      '><style>@media screen and (prefers-color-scheme: dark) { svg { stroke: #fff } }</style>'
-    )
+    renderToString(createElement(SvgPreview, { src, showGrid: true }, children))
   ).toString('utf8');
 
-  defaultContentType(event, 'image/svg+xml')
-  setResponseHeader(event, 'Cache-Control', 'public,max-age=31536000')
+  defaultContentType(event, 'image/svg+xml');
+  setResponseHeader(event, 'Cache-Control', 'public,max-age=31536000');
 
-  return svg
-})
+  return svg;
+});