From df23b629626483710b48a7639e5a6f98b3d56410 Mon Sep 17 00:00:00 2001 From: Corey Johnson Date: Mon, 7 Jul 2025 15:52:03 -0700 Subject: [PATCH] Refactor icon rendering and head element injection --- packages/nano-remix/src/renderServer.tsx | 22 ++++------- packages/werewolf-ui/src/lib/icon.tsx | 50 +++++++++++------------- 2 files changed, 30 insertions(+), 42 deletions(-) diff --git a/packages/nano-remix/src/renderServer.tsx b/packages/nano-remix/src/renderServer.tsx index 76a3f8e..c8b9ca1 100644 --- a/packages/nano-remix/src/renderServer.tsx +++ b/packages/nano-remix/src/renderServer.tsx @@ -42,6 +42,12 @@ const renderHtml = async (req: Request, route: Bun.MatchedRoute) => { // Remove any < characters from the loader data to prevent XSS attacks const escapedLoaderData = JSON.stringify(loaderData).replace(/ `` + ) + const headScripts = component.head?.scripts?.map( + (script: any) => `` + ) return new Response( ` @@ -50,20 +56,8 @@ const renderHtml = async (req: Request, route: Bun.MatchedRoute) => { ${component.head?.title ?? "Untitled"} - ${ - component.head?.links - ?.map((link: any) => ``) - .join("\n") || "" - } - ${ - component.head?.scripts - ?.map( - (script: any) => - `` - ) - .join("\n") || "" - } - + ${headLinks?.join("\n") ?? ""} + ${headScripts?.join("\n") ?? ""} diff --git a/packages/werewolf-ui/src/lib/icon.tsx b/packages/werewolf-ui/src/lib/icon.tsx index 4fc37d8..9066be3 100644 --- a/packages/werewolf-ui/src/lib/icon.tsx +++ b/packages/werewolf-ui/src/lib/icon.tsx @@ -24,25 +24,19 @@ export const Icon: FC = (props) => { throw new Error(`Icon "${name}" not found in Lucide icons`) } - return ( - - ) + // Modify the SVG string to include our custom attributes + const modifiedSvg = iconSvg + .replace(/width="[^"]*"/, `width="${size}"`) + .replace(/height="[^"]*"/, `height="${size}"`) + .replace(/class="[^"]*"/, className ? `class="${className}"` : "") + .replace( + /]*)>/, + `` + ) + + return
} export const IconLink: FC = (props) => { @@ -82,23 +76,23 @@ export const Test = () => {

Styling with CSS Classes

- +

Default

- +

Blue Color

- +

Thin Stroke

- +

Filled

- +

Hover Effect

@@ -109,19 +103,19 @@ export const Test = () => {

Advanced Styling

- +

Filled Heart

- +

Thick Stroke

- +

Animated

- +

Drop Shadow