feat: allow relative urls for icons, dynamically render svg icons

client/src/components/Chat/Landing.tsx

@@ -145,7 +145,7 @@ export default function Landing({ centerFormOnLanding }: { centerFormOnLanding:
 
   return (
     <div
-      className={`flex h-full transform-gpu flex-col items-center justify-center pb-16 transition-all duration-200 ${centerFormOnLanding ? 'max-h-full sm:max-h-0' : 'max-h-full'} ${getDynamicMargin}`}
+      className={`flex h-full transform-gpu flex-col items-center justify-center pb-16 text-text-primary transition-all duration-200 ${centerFormOnLanding ? 'max-h-full sm:max-h-0' : 'max-h-full'} ${getDynamicMargin}`}
     >
       <div ref={contentRef} className="flex flex-col items-center gap-0 p-2">
         <div
@@ -176,7 +176,7 @@ export default function Landing({ centerFormOnLanding }: { centerFormOnLanding:
               <SplitText
                 key={`split-text-${name}`}
                 text={name}
-                className={`${getTextSizeClass(name)} font-medium text-text-primary`}
+                className={`${getTextSizeClass(name)} font-medium`}
                 delay={50}
                 textAlign="center"
                 animationFrom={{ opacity: 0, transform: 'translate3d(0,50px,0)' }}
@@ -191,7 +191,7 @@ export default function Landing({ centerFormOnLanding }: { centerFormOnLanding:
             <SplitText
               key={`split-text-${greetingText}${user?.name ? '-user' : ''}`}
               text={greetingText}
-              className={`${getTextSizeClass(greetingText)} font-medium text-text-primary`}
+              className={`${getTextSizeClass(greetingText)} font-medium`}
               delay={50}
               textAlign="center"
               animationFrom={{ opacity: 0, transform: 'translate3d(0,50px,0)' }}
@@ -204,7 +204,7 @@ export default function Landing({ centerFormOnLanding }: { centerFormOnLanding:
           )}
         </div>
         {description && (
-          <div className="animate-fadeIn mt-4 max-w-md text-center text-sm font-normal text-text-primary">
+          <div className="animate-fadeIn mt-4 max-w-md text-center text-sm font-normal">
             {description}
           </div>
         )}

client/src/components/Chat/Menus/Endpoints/components/SpecIcon.tsx

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
 import type { TModelSpec, TEndpointsConfig } from 'librechat-data-provider';
 import type { IconMapProps } from '~/common';
-import { getModelSpecIconURL, getIconKey, getEndpointField } from '~/utils';
+import { getModelSpecIconURL, getIconKey, getEndpointField, isUrl } from '~/utils';
 import { URLIcon } from '~/components/Endpoints/URLIcon';
 import { icons } from '~/hooks/Endpoint/Icons';
 
@@ -19,7 +19,7 @@ const SpecIcon: React.FC<SpecIconProps> = ({ currentSpec, endpointsConfig }) =>
   const iconKey = getIconKey({ endpoint, endpointsConfig, endpointIconURL });
   let Icon: IconType;
 
-  if (!iconURL.includes('http')) {
+  if (!isUrl(iconURL)) {
     Icon = (icons[iconURL] ?? icons[iconKey] ?? icons.unknown) as IconType;
   } else if (iconURL) {
     return (

client/src/components/Chat/Messages/MessageIcon.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo, memo } from 'react';
 import type { Assistant, Agent } from 'librechat-data-provider';
 import type { TMessageIcon } from '~/common';
-import { getEndpointField, getIconEndpoint, logger } from '~/utils';
+import { getEndpointField, getIconEndpoint, logger, isUrl } from '~/utils';
 import ConvoIconURL from '~/components/Endpoints/ConvoIconURL';
 import { useGetEndpointsQuery } from '~/data-provider';
 import Icon from '~/components/Endpoints/Icon';
@@ -45,7 +45,7 @@ const MessageIcon = memo(
       [endpointsConfig, endpoint],
     );
 
-    if (iconData?.isCreatedByUser !== true && iconURL != null && iconURL.includes('http')) {
+    if (iconData?.isCreatedByUser !== true && iconURL != null && isUrl(iconURL)) {
       return (
         <ConvoIconURL
           iconURL={iconURL}

client/src/components/Endpoints/ConvoIcon.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import type * as t from 'librechat-data-provider';
-import { getEndpointField, getIconKey, getEntity, getIconEndpoint } from '~/utils';
+import { getEndpointField, getIconKey, getEntity, getIconEndpoint, isUrl } from '~/utils';
 import ConvoIconURL from '~/components/Endpoints/ConvoIconURL';
 import { icons } from '~/hooks/Endpoint/Icons';
 
@@ -50,7 +50,7 @@ export default function ConvoIcon({
 
   return (
     <>
-      {iconURL && iconURL.includes('http') ? (
+      {iconURL && isUrl(iconURL) ? (
         <ConvoIconURL
           iconURL={iconURL}
           modelLabel={conversation?.chatGptLabel ?? conversation?.modelLabel ?? ''}

client/src/components/Endpoints/ConvoIconURL.tsx

@@ -2,6 +2,7 @@ import { memo, useMemo } from 'react';
 import type { IconMapProps } from '~/common';
 import { URLIcon } from '~/components/Endpoints/URLIcon';
 import { icons } from '~/hooks/Endpoint/Icons';
+import { isUrl } from '~/utils';
 
 interface ConvoIconURLProps {
   iconURL?: string;
@@ -41,7 +42,7 @@ const ConvoIconURL: React.FC<ConvoIconURLProps> = ({
 }) => {
   const Icon = useMemo(() => icons[iconURL] ?? icons.unknown, [iconURL]);
   const isURL = useMemo(
-    () => !!(iconURL && (iconURL.includes('http') || iconURL.startsWith('/images/'))),
+    () => !!(iconURL && (isUrl(iconURL) || iconURL.startsWith('/images/'))),
     [iconURL],
   );
   if (isURL) {

client/src/components/Endpoints/EndpointIcon.tsx

@@ -7,7 +7,7 @@ import type {
 } from 'librechat-data-provider';
 import ConvoIconURL from '~/components/Endpoints/ConvoIconURL';
 import MinimalIcon from '~/components/Endpoints/MinimalIcon';
-import { getEndpointField, getIconEndpoint } from '~/utils';
+import { getEndpointField, getIconEndpoint, isUrl } from '~/utils';
 
 export default function EndpointIcon({
   conversation,
@@ -39,7 +39,7 @@ export default function EndpointIcon({
 
   const iconURL = assistantAvatar || convoIconURL;
 
-  if (iconURL && (iconURL.includes('http') || iconURL.startsWith('/images/'))) {
+  if (iconURL && (isUrl(iconURL) || iconURL.startsWith('/images/'))) {
     return (
       <ConvoIconURL
         iconURL={iconURL}

client/src/components/Endpoints/URLIcon.tsx

@@ -1,7 +1,49 @@
-import React, { memo, useState } from 'react';
+import React, { memo, useEffect, useState } from 'react';
 import { AlertCircle } from 'lucide-react';
 import { icons } from '~/hooks/Endpoint/Icons';
 
+/**
+ * Dynamically load an SVG icon from a URL
+ * This is needed in order to support the currentColor attribute in the SVG icon.
+ * @param url - The URL of the SVG icon
+ * @returns Div with the SVG icon
+ */
+const DynamicSVGIcon = ({ url }: { url: string }) => {
+  const [svgContent, setSvgContent] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetch(url)
+      .then((res) => res.text())
+      .then((svg) => {
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(svg, 'image/svg+xml');
+        if (doc.documentElement.nodeName !== 'svg') {
+          console.error('Content is not an SVG element:', doc.documentElement.nodeName);
+          return;
+        }
+        const svgElement = doc.querySelector('svg');
+        if (svgElement) {
+          svgElement.setAttribute('width', '100%');
+          svgElement.setAttribute('height', '100%');
+          setSvgContent(svgElement.outerHTML);
+        } else {
+          setSvgContent(svg);
+        }
+      });
+  }, [url]);
+
+  if (!svgContent) {
+    return null;
+  }
+
+  return (
+    <div
+      style={{ width: '100%', height: '100%'}}
+      dangerouslySetInnerHTML={{ __html: svgContent }}
+    />
+  );
+};
+
 export const URLIcon = memo(
   ({
     iconURL,
@@ -47,17 +89,21 @@ export const URLIcon = memo(
 
     return (
       <div className={className} style={containerStyle}>
-        <img
-          src={iconURL}
-          alt={altName ?? 'Icon'}
-          style={imageStyle}
-          className="object-cover"
-          onError={handleImageError}
-          loading="lazy"
-          decoding="async"
-          width={Number(containerStyle.width) || 20}
-          height={Number(containerStyle.height) || 20}
-        />
+        {iconURL.endsWith('.svg') ? (
+          <DynamicSVGIcon url={iconURL} />
+        ) : (
+          <img
+            src={iconURL}
+            alt={altName ?? 'Icon'}
+            style={imageStyle}
+            className="object-cover"
+            onError={handleImageError}
+            loading="lazy"
+            decoding="async"
+            width={Number(containerStyle.width) || 20}
+            height={Number(containerStyle.height) || 20}
+          />
+        )}
       </div>
     );
   },

client/src/components/Share/MessageIcon.tsx

@@ -4,7 +4,7 @@ import type { TMessage, Assistant, Agent } from 'librechat-data-provider';
 import type { TMessageProps } from '~/common';
 import MessageEndpointIcon from '../Endpoints/MessageEndpointIcon';
 import ConvoIconURL from '~/components/Endpoints/ConvoIconURL';
-import { getIconEndpoint } from '~/utils';
+import { getIconEndpoint, isUrl } from '~/utils';
 
 export default function MessageIcon(
   props: Pick<TMessageProps, 'message' | 'conversation'> & {
@@ -49,7 +49,7 @@ export default function MessageIcon(
     agentName,
     agentAvatar,
   });
-  if (message?.isCreatedByUser !== true && iconURL && iconURL.includes('http')) {
+  if (message?.isCreatedByUser !== true && iconURL && isUrl(iconURL)) {
     return (
       <ConvoIconURL
         iconURL={iconURL}

client/src/hooks/Endpoint/UnknownIcon.tsx

@@ -3,6 +3,7 @@ import { CustomMinimalIcon, XAIcon } from '@librechat/client';
 import { EModelEndpoint, KnownEndpoints } from 'librechat-data-provider';
 import { IconContext } from '~/common';
 import { cn } from '~/utils';
+import { URLIcon } from '~/components/Endpoints/URLIcon';
 
 const knownEndpointAssets = {
   [KnownEndpoints.anyscale]: 'assets/anyscale.png',
@@ -84,7 +85,14 @@ function UnknownIcon({
   }
 
   if (iconURL) {
-    return <img className={className} src={iconURL} alt={`${endpoint} Icon`} />;
+    return (
+      <URLIcon
+        iconURL={iconURL}
+        endpoint={endpoint}
+        className={className}
+        altName={`${endpoint} Icon`}
+      />
+    );
   }
 
   const assetPath: string = knownEndpointAssets[currentEndpoint] ?? '';

client/src/utils/index.ts

@@ -20,6 +20,7 @@ export * from './localStorage';
 export * from './promptGroups';
 export * from './email';
 export * from './timestamps';
+export * from './url';
 export { default as cn } from './cn';
 export { default as logger } from './logger';
 export { default as scaleImage } from './scaleImage';

client/src/utils/url.ts

@@ -0,0 +1,19 @@
+/**
+ * Checks if a string is a valid URL (absolute or relative)
+ * @param str - The string to check
+ * @returns true if the string is a valid absolute URL or starts with '/'
+ */
+export function isUrl(str: string): boolean {
+  if (!str || typeof str !== 'string') {
+    return false;
+  }
+
+  try {
+    // Try to create a URL object - this will throw if not a valid absolute URL
+    new URL(str);
+    return true;
+  } catch {
+    // If URL constructor fails, check if it's a relative URL starting with '/'
+    return str.startsWith('/');
+  }
+}