Implementation:Infiniflow Ragflow SvgIcon Component

Knowledge Sources	Infiniflow_Ragflow
Domains	Frontend, UI_Components, Theming
Last Updated	2026-02-12 06:00 GMT

Overview

Concrete SVG icon components with dynamic module loading and theme-aware icon resolution for LLM and home icons provided by the RAGFlow frontend.

Description

Exports SvgIcon (generic SVG renderer using Vite's import.meta.glob for dynamic module resolution), LlmIcon (theme-aware LLM provider icon), and HomeIcon (theme-aware home navigation icon). Uses memoization for performance.

Usage

Import SvgIcon for generic icon rendering by name, LlmIcon for displaying LLM provider logos in model selection UIs, or HomeIcon for navigation.

Code Reference

Source Location

• Repository: Infiniflow_Ragflow
• File: web/src/components/svg-icon.tsx
• Lines: 1-164

Signature

const SvgIcon: React.MemoExoticComponent<({ name, width, height }: {
  name: string;
  width?: number | string;
  height?: number | string;
}) => JSX.Element>;

export function LlmIcon({ name, size }: {
  name: string;
  size?: number;
}): JSX.Element;

export function HomeIcon({ size }: { size?: number }): JSX.Element;

Import

import SvgIcon, { LlmIcon, HomeIcon } from '@/components/svg-icon';

I/O Contract

Inputs

Name	Type	Required	Description
name	string	Yes	Icon name matching SVG asset filename
width	number/string	No	Icon width
height	number/string	No	Icon height
size	number	No	Square size for LlmIcon/HomeIcon

Outputs

Name	Type	Description
Rendered JSX	JSX.Element	SVG icon element

Usage Examples

import SvgIcon, { LlmIcon } from '@/components/svg-icon';

<SvgIcon name="search" width={24} height={24} />
<LlmIcon name="openai" size={32} />

Related Pages

• Environment:Infiniflow_Ragflow_Frontend_Node_Environment