Implementation:Infiniflow Ragflow Agent OperatorIcon Component

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

Overview

Icon resolver component for agent operator types with comprehensive mapping and error boundary fallback.

Description

This component renders the appropriate icon for a given agent operator type by consulting three separate icon mapping registries: `OperatorIconMap` for iconfont-based icons (Retrieval, Categorize, Message, Code, Agent, etc.), `SVGIconMap` for custom SVG icons (ArXiv, GitHub, Bing, Google, Wikipedia, etc.), and `LucideIconMap` for Lucide React icons (DataOperations, Loop, ExitLoop, PDFGenerator). The Begin operator receives special treatment with a distinct `HousePlus` icon wrapped in a styled container. A `SvgErrorBoundary` class component wraps all icon renders to gracefully handle SVG loading failures by falling back to an empty hidden div. The component accepts the operator name enum and an optional className for styling customization.

Usage

Used throughout the agent canvas UI wherever an operator type needs visual representation, including the operator palette sidebar, node headers on the canvas, form titles, and template cards.

Code Reference

Source Location

• Repository: Infiniflow_Ragflow
• File: web/src/pages/agent/operator-icon.tsx
• Lines: 1-137

Signature

interface IProps {
  name: Operator;
  className?: string;
}

export const OperatorIconMap: Record<string, string>;
export const SVGIconMap: Record<string, string>;
export const LucideIconMap: Record<string, React.ComponentType>;
export default function OperatorIcon({ name, className }: IProps): JSX.Element;

Import

import OperatorIcon, { OperatorIconMap, SVGIconMap, LucideIconMap } from '@/pages/agent/operator-icon';

I/O Contract

Inputs

Name	Type	Required	Description
name	Operator	Yes	The operator type enum value to resolve to an icon.
className	string	No	Optional CSS class name to apply to the rendered icon element.

Outputs

Name	Type	Description
JSX.Element	JSX.Element	The rendered icon component: an IconFontFill for iconfont operators, a Lucide icon for Lucide-mapped operators, an SvgIcon for SVG-mapped operators, a styled HousePlus for Begin, or an empty hidden div as fallback.

Usage Examples

import OperatorIcon from '@/pages/agent/operator-icon';
import { Operator } from '@/pages/agent/constant';

// Render a Retrieval operator icon
<OperatorIcon name={Operator.Retrieval} className="size-6" />

// Render a Google search operator icon
<OperatorIcon name={Operator.Google} />

// Render the Begin node icon
<OperatorIcon name={Operator.Begin} className="size-4" />

Related Pages

• Environment:Infiniflow_Ragflow_Frontend_Node_Environment