fix: The svg component contains a warning about isDark#9314
fix: The svg component contains a warning about isDark#9314yp498517645 wants to merge 2 commits into
Conversation
WalkthroughThis change refactors multiple React icon components to destructure the Changes
Sequence Diagram(s)No sequence diagram is generated, as the changes are limited to internal component refactoring and do not introduce or modify control flow between components. Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Possibly related PRs
Suggested labels
✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
github-actions
Bot
added
bug
|
github-actions
Bot
added
bug
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 10
🧹 Nitpick comments (6)
src/frontend/src/icons/JigsawStack/JigsawStackIcon.jsx (1)
32-42: Consider consolidating identical gradients.The dark mode gradient (
paint0_linear_102_21_dark) has identical color stops to the light mode gradient. Since both gradients are the same, you could use a single gradient definition to reduce code duplication.- <linearGradient - id="paint0_linear_102_21_dark" - x1="-2.153" - x2="368.564" - y1="42.449" - y2="304.786" - gradientUnits="userSpaceOnUse" - > - <stop offset="0.184" stopColor="#FA242D"></stop> - <stop offset="0.958" stopColor="#EF5B3C"></stop> - </linearGradient>And update the fill reference to always use the single gradient:
- fill={ - isDark - ? "url(#paint0_linear_102_21_dark)" - : "url(#paint0_linear_102_21)" - } + fill="url(#paint0_linear_102_21)"src/frontend/src/icons/xAI/xAIIcon.jsx (1)
1-1: Remove unused import.The
stringToBoolutility is imported but not used in the component sinceisDarkis being used directly as a boolean value.-import { stringToBool } from "@/utils/utils";src/frontend/src/icons/AWSInverted/AWS.jsx (1)
17-18: Nit: provide a fallback colour whenisDarkisundefined
fill={isDark ? "#ffffff" : "#252f3e"}is fine, but explicitly coalescing handles an accidentalnulland communicates intent:-fill={isDark ? "#ffffff" : "#252f3e"} +fill={Boolean(isDark) ? "#ffffff" : "#252f3e"}src/frontend/src/icons/Windsurf/Windsurf.jsx (1)
14-15: Colour literals: prefer hex codes over keyword names for predictabilityUsing
"white"/"black"can yield subtly different results across browsers and makes future theming harder. Replace with#ffffff/#000000.-fill={isDark ? "white" : "black"} +fill={isDark ? "#ffffff" : "#000000"}src/frontend/src/icons/Nvidia/nvidia.jsx (1)
11-12:enableBackgroundis deprecated in SVG2
enableBackgroundis an SVG 1.2 attribute; it has no effect in modern browsers and can be safely removed to slim the markup.- enableBackground="new 35.188 31.512 351.46 258.785"src/frontend/src/icons/AWS/AWS.jsx (1)
17-18: Guard againstnull/undefinedisDarkpropSame nitpick as the inverted variant: coerce to boolean for clarity.
-fill={isDark ? "#ffffff" : "#252f3e"} +fill={Boolean(isDark) ? "#ffffff" : "#252f3e"}
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (19)
src/frontend/src/icons/AWS/AWS.jsx(1 hunks)src/frontend/src/icons/AWSInverted/AWS.jsx(1 hunks)src/frontend/src/icons/Anthropic/Anthropic.jsx(2 hunks)src/frontend/src/icons/BW python/Python.jsx(1 hunks)src/frontend/src/icons/Cleanlab/Cleanlab.jsx(1 hunks)src/frontend/src/icons/Composio/composio.jsx(1 hunks)src/frontend/src/icons/DeepSeek/DeepSeekIcon.jsx(2 hunks)src/frontend/src/icons/HCD/HCD.jsx(1 hunks)src/frontend/src/icons/IBMWatsonx/WatsonxAI.jsx(1 hunks)src/frontend/src/icons/JSicon/JSIcon.jsx(1 hunks)src/frontend/src/icons/JigsawStack/JigsawStackIcon.jsx(1 hunks)src/frontend/src/icons/MCP/McpIcon.jsx(1 hunks)src/frontend/src/icons/Mem0/SvgMem.jsx(1 hunks)src/frontend/src/icons/Nvidia/nvidia.jsx(2 hunks)src/frontend/src/icons/Ollama/Ollama.jsx(1 hunks)src/frontend/src/icons/Pinecone/PineconeLogo.jsx(2 hunks)src/frontend/src/icons/Twitter X/TwitterX.jsx(2 hunks)src/frontend/src/icons/Windsurf/Windsurf.jsx(1 hunks)src/frontend/src/icons/xAI/xAIIcon.jsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
src/frontend/src/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit Inference Engine (.cursor/rules/frontend_development.mdc)
src/frontend/src/**/*.{ts,tsx,js,jsx}: All frontend TypeScript and JavaScript code should be located under src/frontend/src/ and organized into components, pages, icons, stores, types, utils, hooks, services, and assets directories as per the specified directory layout.
Use React 18 with TypeScript for all UI components in the frontend.
Format all TypeScript and JavaScript code using the make format_frontend command.
Lint all TypeScript and JavaScript code using the make lint command.
Files:
src/frontend/src/icons/MCP/McpIcon.jsxsrc/frontend/src/icons/Nvidia/nvidia.jsxsrc/frontend/src/icons/Anthropic/Anthropic.jsxsrc/frontend/src/icons/AWS/AWS.jsxsrc/frontend/src/icons/BW python/Python.jsxsrc/frontend/src/icons/Windsurf/Windsurf.jsxsrc/frontend/src/icons/HCD/HCD.jsxsrc/frontend/src/icons/Mem0/SvgMem.jsxsrc/frontend/src/icons/Twitter X/TwitterX.jsxsrc/frontend/src/icons/Ollama/Ollama.jsxsrc/frontend/src/icons/IBMWatsonx/WatsonxAI.jsxsrc/frontend/src/icons/JSicon/JSIcon.jsxsrc/frontend/src/icons/Composio/composio.jsxsrc/frontend/src/icons/DeepSeek/DeepSeekIcon.jsxsrc/frontend/src/icons/Cleanlab/Cleanlab.jsxsrc/frontend/src/icons/xAI/xAIIcon.jsxsrc/frontend/src/icons/Pinecone/PineconeLogo.jsxsrc/frontend/src/icons/JigsawStack/JigsawStackIcon.jsxsrc/frontend/src/icons/AWSInverted/AWS.jsx
src/frontend/src/icons/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit Inference Engine (.cursor/rules/frontend_development.mdc)
Use Lucide React for icons in the frontend.
Files:
src/frontend/src/icons/MCP/McpIcon.jsxsrc/frontend/src/icons/Nvidia/nvidia.jsxsrc/frontend/src/icons/Anthropic/Anthropic.jsxsrc/frontend/src/icons/AWS/AWS.jsxsrc/frontend/src/icons/BW python/Python.jsxsrc/frontend/src/icons/Windsurf/Windsurf.jsxsrc/frontend/src/icons/HCD/HCD.jsxsrc/frontend/src/icons/Mem0/SvgMem.jsxsrc/frontend/src/icons/Twitter X/TwitterX.jsxsrc/frontend/src/icons/Ollama/Ollama.jsxsrc/frontend/src/icons/IBMWatsonx/WatsonxAI.jsxsrc/frontend/src/icons/JSicon/JSIcon.jsxsrc/frontend/src/icons/Composio/composio.jsxsrc/frontend/src/icons/DeepSeek/DeepSeekIcon.jsxsrc/frontend/src/icons/Cleanlab/Cleanlab.jsxsrc/frontend/src/icons/xAI/xAIIcon.jsxsrc/frontend/src/icons/Pinecone/PineconeLogo.jsxsrc/frontend/src/icons/JigsawStack/JigsawStackIcon.jsxsrc/frontend/src/icons/AWSInverted/AWS.jsx
src/frontend/src/icons/*/*.@(js|jsx|ts|tsx)
📄 CodeRabbit Inference Engine (.cursor/rules/icons.mdc)
Create a new directory for your icon in
src/frontend/src/icons/YourIconName/and add your SVG as a React component (e.g.,YourIconName.jsx). The SVG component must use theisDarkprop to support both light and dark mode.
Files:
src/frontend/src/icons/MCP/McpIcon.jsxsrc/frontend/src/icons/Nvidia/nvidia.jsxsrc/frontend/src/icons/Anthropic/Anthropic.jsxsrc/frontend/src/icons/AWS/AWS.jsxsrc/frontend/src/icons/BW python/Python.jsxsrc/frontend/src/icons/Windsurf/Windsurf.jsxsrc/frontend/src/icons/HCD/HCD.jsxsrc/frontend/src/icons/Mem0/SvgMem.jsxsrc/frontend/src/icons/Twitter X/TwitterX.jsxsrc/frontend/src/icons/Ollama/Ollama.jsxsrc/frontend/src/icons/IBMWatsonx/WatsonxAI.jsxsrc/frontend/src/icons/JSicon/JSIcon.jsxsrc/frontend/src/icons/Composio/composio.jsxsrc/frontend/src/icons/DeepSeek/DeepSeekIcon.jsxsrc/frontend/src/icons/Cleanlab/Cleanlab.jsxsrc/frontend/src/icons/xAI/xAIIcon.jsxsrc/frontend/src/icons/Pinecone/PineconeLogo.jsxsrc/frontend/src/icons/JigsawStack/JigsawStackIcon.jsxsrc/frontend/src/icons/AWSInverted/AWS.jsx
🧠 Learnings (16)
📓 Common learnings
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-23T12:46:52.420Z
Learning: Custom SVG icon components in React should always support both light and dark mode by accepting an 'isdark' prop and adjusting colors accordingly.
Learnt from: dolfim-ibm
PR: langflow-ai/langflow#8394
File: src/frontend/src/icons/Docling/index.tsx:4-6
Timestamp: 2025-06-16T11:14:04.200Z
Learning: The Langflow codebase consistently uses `React.PropsWithChildren<{}>` as the prop type for all icon components using forwardRef, rather than `React.SVGProps<SVGSVGElement>`. This is an established pattern across hundreds of icon files in src/frontend/src/icons/.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-23T12:46:52.420Z
Learning: Use a utility like 'stringToBool' to reliably interpret the 'isdark' prop when toggling SVG colors for light/dark mode support.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-07-18T18:27:12.609Z
Learning: Applies to src/frontend/src/components/**/@(FlowGraph|nodes)/**/*.{ts,tsx,js,jsx} : Use React Flow for flow graph visualization components.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-23T12:46:52.420Z
Learning: When implementing a new component icon in Langflow, ensure the icon name is clear, recognizable, and used consistently across both backend (Python 'icon' attribute) and frontend (React/TypeScript mapping).
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-07-18T18:27:12.609Z
Learning: Applies to src/frontend/src/@(components|hooks)/**/*.{ts,tsx,js,jsx} : Implement dark mode support in components and hooks where needed.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-07-28T15:56:47.865Z
Learning: Applies to src/frontend/src/icons/*/*.@(js|jsx|ts|tsx) : Create a new directory for your icon in `src/frontend/src/icons/YourIconName/` and add your SVG as a React component (e.g., `YourIconName.jsx`). The SVG component must use the `isDark` prop to support both light and dark mode.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/docs_development.mdc:0-0
Timestamp: 2025-07-18T18:26:42.027Z
Learning: Applies to docs/docs/**/*.{md,mdx} : Use consistent terminology: always capitalize Langflow, Component, Flow, and uppercase API and JSON.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-07-28T15:56:47.865Z
Learning: Applies to src/frontend/src/icons/*/index.tsx : Create an `index.tsx` in your icon directory that exports your icon using `forwardRef` and passes the `isDark` prop.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-23T12:46:52.420Z
Learning: Export custom icon components in React using React.forwardRef to ensure proper ref forwarding and compatibility with parent components.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-23T12:46:42.048Z
Learning: Dark mode support should be implemented using a dedicated Zustand store (e.g., useDarkStore), and toggled via a custom hook (e.g., useDarkMode) that exposes isDark and toggle.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-07-18T18:27:12.609Z
Learning: Applies to src/frontend/src/icons/**/*.{ts,tsx,js,jsx} : Use Lucide React for icons in the frontend.
Learnt from: luisfucros
PR: langflow-ai/langflow#8940
File: src/frontend/src/icons/SambaNova/SambaNovaLogo.jsx:13-47
Timestamp: 2025-07-09T20:32:24.915Z
Learning: In the SambaNova icon component, only the white text paths should change based on theme (white in dark mode, black in light mode), while the colored gradient paths should remain unchanged to maintain brand consistency.
📚 Learning: custom svg icon components in react should always support both light and dark mode by accepting an '...
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-23T12:46:52.420Z
Learning: Custom SVG icon components in React should always support both light and dark mode by accepting an 'isdark' prop and adjusting colors accordingly.
Applied to files:
src/frontend/src/icons/MCP/McpIcon.jsxsrc/frontend/src/icons/Nvidia/nvidia.jsxsrc/frontend/src/icons/Anthropic/Anthropic.jsxsrc/frontend/src/icons/AWS/AWS.jsxsrc/frontend/src/icons/BW python/Python.jsxsrc/frontend/src/icons/Windsurf/Windsurf.jsxsrc/frontend/src/icons/HCD/HCD.jsxsrc/frontend/src/icons/Mem0/SvgMem.jsxsrc/frontend/src/icons/Twitter X/TwitterX.jsxsrc/frontend/src/icons/Ollama/Ollama.jsxsrc/frontend/src/icons/IBMWatsonx/WatsonxAI.jsxsrc/frontend/src/icons/JSicon/JSIcon.jsxsrc/frontend/src/icons/Composio/composio.jsxsrc/frontend/src/icons/DeepSeek/DeepSeekIcon.jsxsrc/frontend/src/icons/Cleanlab/Cleanlab.jsxsrc/frontend/src/icons/xAI/xAIIcon.jsxsrc/frontend/src/icons/Pinecone/PineconeLogo.jsxsrc/frontend/src/icons/JigsawStack/JigsawStackIcon.jsxsrc/frontend/src/icons/AWSInverted/AWS.jsx
📚 Learning: applies to src/frontend/src/icons/*/index.tsx : create an `index.tsx` in your icon directory that ex...
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-07-28T15:56:47.865Z
Learning: Applies to src/frontend/src/icons/*/index.tsx : Create an `index.tsx` in your icon directory that exports your icon using `forwardRef` and passes the `isDark` prop.
Applied to files:
src/frontend/src/icons/MCP/McpIcon.jsxsrc/frontend/src/icons/Nvidia/nvidia.jsxsrc/frontend/src/icons/Anthropic/Anthropic.jsxsrc/frontend/src/icons/AWS/AWS.jsxsrc/frontend/src/icons/BW python/Python.jsxsrc/frontend/src/icons/Windsurf/Windsurf.jsxsrc/frontend/src/icons/HCD/HCD.jsxsrc/frontend/src/icons/Mem0/SvgMem.jsxsrc/frontend/src/icons/Twitter X/TwitterX.jsxsrc/frontend/src/icons/Ollama/Ollama.jsxsrc/frontend/src/icons/IBMWatsonx/WatsonxAI.jsxsrc/frontend/src/icons/JSicon/JSIcon.jsxsrc/frontend/src/icons/Composio/composio.jsxsrc/frontend/src/icons/DeepSeek/DeepSeekIcon.jsxsrc/frontend/src/icons/Cleanlab/Cleanlab.jsxsrc/frontend/src/icons/xAI/xAIIcon.jsxsrc/frontend/src/icons/Pinecone/PineconeLogo.jsxsrc/frontend/src/icons/JigsawStack/JigsawStackIcon.jsxsrc/frontend/src/icons/AWSInverted/AWS.jsx
📚 Learning: applies to src/frontend/src/icons/*/*.@(js|jsx|ts|tsx) : create a new directory for your icon in `sr...
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-07-28T15:56:47.865Z
Learning: Applies to src/frontend/src/icons/*/*.@(js|jsx|ts|tsx) : Create a new directory for your icon in `src/frontend/src/icons/YourIconName/` and add your SVG as a React component (e.g., `YourIconName.jsx`). The SVG component must use the `isDark` prop to support both light and dark mode.
Applied to files:
src/frontend/src/icons/MCP/McpIcon.jsxsrc/frontend/src/icons/Nvidia/nvidia.jsxsrc/frontend/src/icons/Anthropic/Anthropic.jsxsrc/frontend/src/icons/AWS/AWS.jsxsrc/frontend/src/icons/BW python/Python.jsxsrc/frontend/src/icons/Windsurf/Windsurf.jsxsrc/frontend/src/icons/HCD/HCD.jsxsrc/frontend/src/icons/Mem0/SvgMem.jsxsrc/frontend/src/icons/Twitter X/TwitterX.jsxsrc/frontend/src/icons/Ollama/Ollama.jsxsrc/frontend/src/icons/IBMWatsonx/WatsonxAI.jsxsrc/frontend/src/icons/JSicon/JSIcon.jsxsrc/frontend/src/icons/Composio/composio.jsxsrc/frontend/src/icons/DeepSeek/DeepSeekIcon.jsxsrc/frontend/src/icons/Cleanlab/Cleanlab.jsxsrc/frontend/src/icons/xAI/xAIIcon.jsxsrc/frontend/src/icons/Pinecone/PineconeLogo.jsxsrc/frontend/src/icons/JigsawStack/JigsawStackIcon.jsxsrc/frontend/src/icons/AWSInverted/AWS.jsx
📚 Learning: applies to src/frontend/src/@(components|hooks)/**/*.{ts,tsx,js,jsx} : implement dark mode support i...
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-07-18T18:27:12.609Z
Learning: Applies to src/frontend/src/@(components|hooks)/**/*.{ts,tsx,js,jsx} : Implement dark mode support in components and hooks where needed.
Applied to files:
src/frontend/src/icons/MCP/McpIcon.jsxsrc/frontend/src/icons/Nvidia/nvidia.jsxsrc/frontend/src/icons/Anthropic/Anthropic.jsxsrc/frontend/src/icons/AWS/AWS.jsxsrc/frontend/src/icons/BW python/Python.jsxsrc/frontend/src/icons/Windsurf/Windsurf.jsxsrc/frontend/src/icons/HCD/HCD.jsxsrc/frontend/src/icons/Mem0/SvgMem.jsxsrc/frontend/src/icons/Twitter X/TwitterX.jsxsrc/frontend/src/icons/Ollama/Ollama.jsxsrc/frontend/src/icons/JSicon/JSIcon.jsxsrc/frontend/src/icons/Composio/composio.jsxsrc/frontend/src/icons/DeepSeek/DeepSeekIcon.jsxsrc/frontend/src/icons/Cleanlab/Cleanlab.jsxsrc/frontend/src/icons/xAI/xAIIcon.jsxsrc/frontend/src/icons/Pinecone/PineconeLogo.jsxsrc/frontend/src/icons/JigsawStack/JigsawStackIcon.jsxsrc/frontend/src/icons/AWSInverted/AWS.jsx
📚 Learning: use a utility like 'stringtobool' to reliably interpret the 'isdark' prop when toggling svg colors f...
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-23T12:46:52.420Z
Learning: Use a utility like 'stringToBool' to reliably interpret the 'isdark' prop when toggling SVG colors for light/dark mode support.
Applied to files:
src/frontend/src/icons/MCP/McpIcon.jsxsrc/frontend/src/icons/Nvidia/nvidia.jsxsrc/frontend/src/icons/Anthropic/Anthropic.jsxsrc/frontend/src/icons/AWS/AWS.jsxsrc/frontend/src/icons/BW python/Python.jsxsrc/frontend/src/icons/Windsurf/Windsurf.jsxsrc/frontend/src/icons/HCD/HCD.jsxsrc/frontend/src/icons/Mem0/SvgMem.jsxsrc/frontend/src/icons/Twitter X/TwitterX.jsxsrc/frontend/src/icons/Ollama/Ollama.jsxsrc/frontend/src/icons/IBMWatsonx/WatsonxAI.jsxsrc/frontend/src/icons/JSicon/JSIcon.jsxsrc/frontend/src/icons/Composio/composio.jsxsrc/frontend/src/icons/DeepSeek/DeepSeekIcon.jsxsrc/frontend/src/icons/Cleanlab/Cleanlab.jsxsrc/frontend/src/icons/xAI/xAIIcon.jsxsrc/frontend/src/icons/Pinecone/PineconeLogo.jsxsrc/frontend/src/icons/JigsawStack/JigsawStackIcon.jsxsrc/frontend/src/icons/AWSInverted/AWS.jsx
📚 Learning: the langflow codebase consistently uses `react.propswithchildren<{}>` as the prop type for all icon ...
Learnt from: dolfim-ibm
PR: langflow-ai/langflow#8394
File: src/frontend/src/icons/Docling/index.tsx:4-6
Timestamp: 2025-06-16T11:14:04.200Z
Learning: The Langflow codebase consistently uses `React.PropsWithChildren<{}>` as the prop type for all icon components using forwardRef, rather than `React.SVGProps<SVGSVGElement>`. This is an established pattern across hundreds of icon files in src/frontend/src/icons/.
Applied to files:
src/frontend/src/icons/MCP/McpIcon.jsxsrc/frontend/src/icons/Nvidia/nvidia.jsxsrc/frontend/src/icons/Anthropic/Anthropic.jsxsrc/frontend/src/icons/AWS/AWS.jsxsrc/frontend/src/icons/BW python/Python.jsxsrc/frontend/src/icons/Windsurf/Windsurf.jsxsrc/frontend/src/icons/HCD/HCD.jsxsrc/frontend/src/icons/Mem0/SvgMem.jsxsrc/frontend/src/icons/Twitter X/TwitterX.jsxsrc/frontend/src/icons/Ollama/Ollama.jsxsrc/frontend/src/icons/IBMWatsonx/WatsonxAI.jsxsrc/frontend/src/icons/JSicon/JSIcon.jsxsrc/frontend/src/icons/Composio/composio.jsxsrc/frontend/src/icons/DeepSeek/DeepSeekIcon.jsxsrc/frontend/src/icons/Cleanlab/Cleanlab.jsxsrc/frontend/src/icons/xAI/xAIIcon.jsxsrc/frontend/src/icons/Pinecone/PineconeLogo.jsxsrc/frontend/src/icons/JigsawStack/JigsawStackIcon.jsxsrc/frontend/src/icons/AWSInverted/AWS.jsx
📚 Learning: export custom icon components in react using react.forwardref to ensure proper ref forwarding and co...
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-23T12:46:52.420Z
Learning: Export custom icon components in React using React.forwardRef to ensure proper ref forwarding and compatibility with parent components.
Applied to files:
src/frontend/src/icons/MCP/McpIcon.jsxsrc/frontend/src/icons/Nvidia/nvidia.jsxsrc/frontend/src/icons/AWS/AWS.jsxsrc/frontend/src/icons/Windsurf/Windsurf.jsxsrc/frontend/src/icons/HCD/HCD.jsxsrc/frontend/src/icons/Twitter X/TwitterX.jsxsrc/frontend/src/icons/JSicon/JSIcon.jsxsrc/frontend/src/icons/Composio/composio.jsxsrc/frontend/src/icons/DeepSeek/DeepSeekIcon.jsxsrc/frontend/src/icons/xAI/xAIIcon.jsxsrc/frontend/src/icons/Pinecone/PineconeLogo.jsxsrc/frontend/src/icons/JigsawStack/JigsawStackIcon.jsxsrc/frontend/src/icons/AWSInverted/AWS.jsx
📚 Learning: applies to src/frontend/src/icons/**/*.{ts,tsx,js,jsx} : use lucide react for icons in the frontend....
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-07-18T18:27:12.609Z
Learning: Applies to src/frontend/src/icons/**/*.{ts,tsx,js,jsx} : Use Lucide React for icons in the frontend.
Applied to files:
src/frontend/src/icons/MCP/McpIcon.jsxsrc/frontend/src/icons/HCD/HCD.jsxsrc/frontend/src/icons/JSicon/JSIcon.jsxsrc/frontend/src/icons/Composio/composio.jsxsrc/frontend/src/icons/DeepSeek/DeepSeekIcon.jsxsrc/frontend/src/icons/Cleanlab/Cleanlab.jsxsrc/frontend/src/icons/Pinecone/PineconeLogo.jsx
📚 Learning: in the sambanova icon component, only the white text paths should change based on theme (white in da...
Learnt from: luisfucros
PR: langflow-ai/langflow#8940
File: src/frontend/src/icons/SambaNova/SambaNovaLogo.jsx:13-47
Timestamp: 2025-07-09T20:32:24.915Z
Learning: In the SambaNova icon component, only the white text paths should change based on theme (white in dark mode, black in light mode), while the colored gradient paths should remain unchanged to maintain brand consistency.
Applied to files:
src/frontend/src/icons/MCP/McpIcon.jsxsrc/frontend/src/icons/Nvidia/nvidia.jsxsrc/frontend/src/icons/Composio/composio.jsxsrc/frontend/src/icons/Pinecone/PineconeLogo.jsx
📚 Learning: dark mode support should be implemented using a dedicated zustand store (e.g., usedarkstore), and to...
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-23T12:46:42.048Z
Learning: Dark mode support should be implemented using a dedicated Zustand store (e.g., useDarkStore), and toggled via a custom hook (e.g., useDarkMode) that exposes isDark and toggle.
Applied to files:
src/frontend/src/icons/MCP/McpIcon.jsxsrc/frontend/src/icons/Windsurf/Windsurf.jsxsrc/frontend/src/icons/Twitter X/TwitterX.jsxsrc/frontend/src/icons/JSicon/JSIcon.jsxsrc/frontend/src/icons/Composio/composio.jsx
📚 Learning: applies to src/frontend/src/components/**/@(flowgraph|nodes)/**/*.{ts,tsx,js,jsx} : use react flow f...
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-07-18T18:27:12.609Z
Learning: Applies to src/frontend/src/components/**/@(FlowGraph|nodes)/**/*.{ts,tsx,js,jsx} : Use React Flow for flow graph visualization components.
Applied to files:
src/frontend/src/icons/Nvidia/nvidia.jsxsrc/frontend/src/icons/Windsurf/Windsurf.jsxsrc/frontend/src/icons/HCD/HCD.jsxsrc/frontend/src/icons/Mem0/SvgMem.jsxsrc/frontend/src/icons/Cleanlab/Cleanlab.jsxsrc/frontend/src/icons/Pinecone/PineconeLogo.jsxsrc/frontend/src/icons/AWSInverted/AWS.jsx
📚 Learning: react flow should be used for flow graph visualization, with nodes and edges passed as props, and ch...
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-23T12:46:42.048Z
Learning: React Flow should be used for flow graph visualization, with nodes and edges passed as props, and changes handled via onNodesChange and onEdgesChange callbacks.
Applied to files:
src/frontend/src/icons/Anthropic/Anthropic.jsxsrc/frontend/src/icons/Windsurf/Windsurf.jsxsrc/frontend/src/icons/Twitter X/TwitterX.jsxsrc/frontend/src/icons/Cleanlab/Cleanlab.jsxsrc/frontend/src/icons/Pinecone/PineconeLogo.jsx
📚 Learning: when implementing a new component icon in langflow, ensure the icon name is clear, recognizable, and...
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-23T12:46:52.420Z
Learning: When implementing a new component icon in Langflow, ensure the icon name is clear, recognizable, and used consistently across both backend (Python 'icon' attribute) and frontend (React/TypeScript mapping).
Applied to files:
src/frontend/src/icons/JSicon/JSIcon.jsxsrc/frontend/src/icons/Composio/composio.jsx
📚 Learning: applies to src/frontend/src/icons/lazyiconimports.ts : add your icon to the `lazyiconsmapping` objec...
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-07-28T15:56:47.865Z
Learning: Applies to src/frontend/src/icons/lazyIconImports.ts : Add your icon to the `lazyIconsMapping` object in `src/frontend/src/icons/lazyIconImports.ts` with a key that matches the backend icon string exactly.
Applied to files:
src/frontend/src/icons/Composio/composio.jsx
📚 Learning: verify that the icon appears correctly in the ui in both light and dark mode....
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-07-28T15:56:47.865Z
Learning: Verify that the icon appears correctly in the UI in both light and dark mode.
Applied to files:
src/frontend/src/icons/Composio/composio.jsx
🔇 Additional comments (10)
src/frontend/src/icons/Pinecone/PineconeLogo.jsx (1)
2-12: Perfect implementation of the isDark prop fix!The destructuring pattern correctly prevents
isDarkfrom being passed as a DOM attribute while maintaining the dark mode functionality. Thecolorvariable properly uses the destructuredisDarkvalue, andrestPropsensures other valid props are passed to the SVG element.src/frontend/src/icons/Anthropic/Anthropic.jsx (1)
2-25: Excellent fix for the React warning!The destructuring approach properly separates the
isDarkprop from DOM attributes. Both SVG elements correctly receiverestPropswhile the conditional logic uses the destructuredisDarkvariable directly.src/frontend/src/icons/Ollama/Ollama.jsx (1)
2-10: Properly implemented isDark prop handling!The destructuring pattern correctly isolates
isDarkfor internal use while preventing it from reaching the DOM. Thecolorvariable logic andrestPropsspreading maintain full functionality.src/frontend/src/icons/MCP/McpIcon.jsx (1)
2-8: Clean and correct implementation!The destructuring approach properly handles the
isDarkprop, using it directly in thefillattribute while ensuring it doesn't get passed to the DOM throughrestProps.src/frontend/src/icons/Twitter X/TwitterX.jsx (1)
2-34: Correctly implemented prop handling for conditional rendering!The destructuring pattern properly separates
isDarkfor conditional logic while ensuring both SVG variants receiverestPropswithout the DOM-incompatibleisDarkattribute.src/frontend/src/icons/Composio/composio.jsx (1)
1-23: LGTM! Clean refactor to fix React warning.The component correctly destructures the
isDarkprop to prevent it from being passed down to the SVG DOM element, which resolves the React warning mentioned in the PR. The dark mode functionality is preserved by using the extractedisDarkvariable directly.src/frontend/src/icons/JigsawStack/JigsawStackIcon.jsx (1)
1-46: LGTM! Refactor successfully fixes React warning.The component correctly destructures the
isDarkprop to prevent it from being passed to the SVG DOM element. Dark mode functionality is preserved through conditional gradient selection.src/frontend/src/icons/IBMWatsonx/WatsonxAI.jsx (1)
1-31: LGTM! Perfect implementation of the refactor pattern.The component correctly destructures the
isDarkprop to prevent it from being passed to the SVG DOM element, fixing the React warning. Dark mode functionality is preserved with appropriate color switching (white for dark mode, dark gray for light mode).src/frontend/src/icons/xAI/xAIIcon.jsx (1)
3-18: LGTM! Refactor correctly fixes React warning.The component correctly destructures the
isDarkprop to prevent it from being passed to the SVG DOM element. Dark mode functionality is preserved with appropriate color switching.src/frontend/src/icons/BW python/Python.jsx (1)
1-31: LGTM! Comprehensive refactor with proper dark mode handling.The component correctly destructures the
isDarkprop to prevent it from being passed to the SVG DOM element. Dark mode functionality is thoroughly preserved across all visual elements including paths and the clipPath rectangle, ensuring consistent theming throughout the icon.
| const SvgAWS = (props) => { | ||
| const { isDark, ...restProps } = props; | ||
| return ( |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Apply the same forwardRef refactor here for uniformity
See previous comments – convert to React.forwardRef with a typed props interface and pass the ref to <svg>.
This keeps all AWS icon variants interchangeable.
🤖 Prompt for AI Agents
In src/frontend/src/icons/AWS/AWS.jsx at lines 1 to 3, refactor the SvgAWS
component to use React.forwardRef for consistency with other AWS icon variants.
Define a typed props interface, update the component to accept a ref parameter,
and pass this ref to the root <svg> element. This change ensures uniformity and
interchangeability of the AWS icon components.
| const SvgAWS = (props) => { | ||
| const { isDark, ...restProps } = props; | ||
| return ( |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Use React.forwardRef and a typed props interface to stay consistent with Langflow icon conventions
All icon components under src/frontend/src/icons/** are expected to:
- Wrap the component with
React.forwardRef - Accept
React.PropsWithChildren<{}>(per the established pattern) or a dedicated typed interface - Pass the forwarded
refto the root<svg>element
This component still uses a plain arrow function. Migrating now prevents divergence and keeps ref-forwarding working in downstream consumers.
-import React from "react";
-
-const SvgAWS = (props) => {
- const { isDark, ...restProps } = props;
- return (
+import React, { forwardRef } from "react";
+
+interface IconProps extends React.PropsWithChildren<{}> {
+ isDark?: boolean;
+}
+
+const SvgAWS = forwardRef<SVGSVGElement, IconProps>(
+ ({ isDark, ...restProps }, ref) => (
<svg
+ ref={ref}
xmlns="http://www.w3.org/2000/svg"
@@
- );
-};
-
-export default SvgAWS;
+ </svg>
+ ),
+);
+
+export default SvgAWS;🤖 Prompt for AI Agents
In src/frontend/src/icons/AWSInverted/AWS.jsx at lines 1 to 3, the icon
component is currently a plain arrow function and does not use React.forwardRef
or a typed props interface. To fix this, refactor the component to be wrapped
with React.forwardRef, define and use a typed props interface or
React.PropsWithChildren for the props, and ensure the forwarded ref is passed to
the root <svg> element. This aligns the component with Langflow icon conventions
and supports ref forwarding for downstream usage.
| const SvgCleanlab = (props) => { | ||
| const { isDark, ...restProps } = props; | ||
| return ( |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Icon should use forwardRef and TypeScript generics
For consistency with hundreds of other icons (Docling, AWS, …) convert to:
-const SvgCleanlab = (props) => {
- const { isDark, ...restProps } = props;
+import { forwardRef } from "react";
+
+const SvgCleanlab = forwardRef<SVGSVGElement, React.PropsWithChildren<{ isDark?: boolean }>>(
+ ({ isDark = false, ...restProps }, ref) => {Forward the ref to <svg> and export the wrapped component.
This follows the rules in .cursor/rules/icons.mdc.
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In src/frontend/src/icons/Cleanlab/Cleanlab.jsx lines 1 to 3, the icon component
should be refactored to use React.forwardRef with TypeScript generics for
consistency with other icons. Wrap the SvgCleanlab function with forwardRef,
forward the ref to the <svg> element inside the component, and export the
wrapped component instead of the plain function. This aligns with the icon
implementation rules in .cursor/rules/icons.mdc.
| const DeepSeekSVG = (props) => { | ||
| const { isDark, ...restProps } = props; | ||
| return ( |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Inconsistent with established icon scaffold – add forwardRef
Please refactor to:
-const DeepSeekSVG = (props) => {
- const { isDark, ...restProps } = props;
+import { forwardRef } from "react";
+
+const DeepSeekSVG = forwardRef<SVGSVGElement, React.PropsWithChildren<{ isDark?: boolean }>>(
+ ({ isDark = false, ...restProps }, ref) => {and wire ref into the <svg> element.
Brings the file in line with repository guidelines and prevents ref-loss.
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In src/frontend/src/icons/DeepSeek/DeepSeekIcon.jsx at lines 1 to 3, the
component is not using React.forwardRef which is inconsistent with the
established icon scaffold. Refactor the component to use React.forwardRef and
pass the ref to the root <svg> element to ensure the ref is properly forwarded
and maintained according to repository guidelines.
| const HCDSVG = (props) => { | ||
| const { isDark, ...restProps } = props; | ||
| return ( |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Ref forwarding & prop-typing missing
Same issue as in other icons: wrap the component with forwardRef and type the isDark prop so downstream code can attach refs and get autocomplete.
-const HCDSVG = (props) => {
- const { isDark, ...restProps } = props;
+import { forwardRef } from "react";
+
+const HCDSVG = forwardRef<SVGSVGElement, React.PropsWithChildren<{ isDark?: boolean }>>(
+ ({ isDark = false, ...restProps }, ref) => {Remember to add ref={ref} on the <svg> element and keep the default export.
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In src/frontend/src/icons/HCD/HCD.jsx at lines 1 to 3, the HCDSVG component
lacks ref forwarding and prop typing for the isDark prop. Wrap the component
with React.forwardRef to enable ref forwarding, add a ref parameter, and pass
ref={ref} to the <svg> element. Define prop types or TypeScript types for the
isDark prop to improve autocomplete and type safety. Keep the default export
unchanged.
| const SvgJSIcon = (props) => { | ||
| const { isDark, ...restProps } = props; | ||
| return ( |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Ref & typing issues identical to other icons
Adopt forwardRef/typed props pattern as noted in previous files to maintain consistency.
-const SvgJSIcon = (props) => {
- const { isDark, ...restProps } = props;
+import { forwardRef } from "react";
+
+const SvgJSIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{ isDark?: boolean }>>(
+ ({ isDark = false, ...restProps }, ref) => {Add ref={ref} to the <svg>.
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In src/frontend/src/icons/JSicon/JSIcon.jsx at lines 1 to 3, the component
should use React.forwardRef to properly forward refs and maintain consistency
with other icon components. Wrap the SvgJSIcon function with forwardRef, update
the props typing accordingly, and add ref={ref} to the <svg> element to ensure
the ref is passed correctly.
| {...restProps} | ||
| filter={isDark ? "invert(100%)" : "invert(0%)"} | ||
| > |
There was a problem hiding this comment.
filter attribute mis-used – browsers expect a URL, not CSS filter
Setting <svg filter="invert(100%)"> is invalid SVG and silently ignored.
If the intent is a CSS filter, it must be applied via the style prop (or a class).
- {...restProps}
- filter={isDark ? "invert(100%)" : "invert(0%)"}
+ {...restProps}
+ style={{ filter: isDark ? "invert(100%)" : "invert(0%)", ...(restProps.style ?? {}) }}This keeps the attribute off the DOM node and renders correctly.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| {...restProps} | |
| filter={isDark ? "invert(100%)" : "invert(0%)"} | |
| > | |
| {...restProps} | |
| style={{ filter: isDark ? "invert(100%)" : "invert(0%)", ...(restProps.style ?? {}) }} | |
| > |
🤖 Prompt for AI Agents
In src/frontend/src/icons/JSicon/JSIcon.jsx around lines 8 to 10, the filter
attribute is incorrectly used as an SVG attribute with a CSS filter value, which
browsers ignore. To fix this, remove the filter attribute and instead apply the
invert filter using the style prop, setting style={{ filter: isDark ?
"invert(100%)" : "invert(0%)" }} so the CSS filter is correctly applied to the
element.
| export default function SvgMem0(props) { | ||
| const { isDark, ...restProps } = props; | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
Wrap icon component in React.forwardRef and type props
The repo’s convention for icon components is:
- Use
forwardRefso parent components can attach refs to the underlying<svg>. - Use
React.PropsWithChildren<{ isDark?: boolean }>(orSVGProps) to give the prop a type and default. - Return an explicit
<svg ref={ref} …>so the ref is forwarded.
Current implementation is a plain function, so refs will be lost and Prop-Types/TS types are missing.
-import React from "react"
-
-export default function SvgMem0(props) {
- const { isDark, ...restProps } = props;
+import { forwardRef } from "react";
+
+const SvgMem0 = forwardRef<SVGSVGElement, React.PropsWithChildren<{ isDark?: boolean }>>(
+ ({ isDark = false, ...restProps }, ref) => {…and pass ref={ref} to the <svg> tag, then export default SvgMem0;.
Aligns the file with the documented icon pattern and unblocks ref-based consumers.
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In src/frontend/src/icons/Mem0/SvgMem.jsx lines 1 to 3, the icon component is a
plain function and does not forward refs or type props. Refactor the component
to use React.forwardRef, define props with React.PropsWithChildren including an
optional isDark boolean, and ensure the returned <svg> element receives the
forwarded ref via ref={ref}. Finally, export the component as default after
wrapping it with forwardRef to align with the repo's icon conventions.
| const NvidiaSVG = (props) => { | ||
| const { isDark, ...restProps } = props; | ||
| return ( |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Bring this icon in line with codebase standards (typed props + ref forwarding)
Replicate the ref-forwarding approach used elsewhere to avoid inconsistent APIs across icon modules.
The change is mechanical (see earlier diff for AWSInverted).
🤖 Prompt for AI Agents
In src/frontend/src/icons/Nvidia/nvidia.jsx at lines 1 to 3, the NvidiaSVG
component should be updated to use typed props and ref forwarding to match the
codebase standards. Refactor the component to accept a ref parameter using
React.forwardRef, define prop types or TypeScript interfaces for the props, and
forward the ref to the root SVG element. This will ensure consistent API usage
across all icon modules.
| const SvgWindsurf = (props) => { | ||
| const { isDark, ...restProps } = props; | ||
| return ( |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Adopt the common forwardRef pattern for icon components
Same consistency issue as other icons: wrap with React.forwardRef, declare a minimal typed props interface, and forward the ref to <svg>.
This guards consumers that rely on refs (e.g., for animations or measuring).
No behaviour change, just structural alignment.
🤖 Prompt for AI Agents
In src/frontend/src/icons/Windsurf/Windsurf.jsx at lines 1 to 3, the component
should be refactored to use React.forwardRef for consistency with other icons.
Define a minimal typed props interface, wrap the component with
React.forwardRef, and forward the ref to the root <svg> element. This change
does not alter behavior but ensures consumers can use refs properly.
1 participant
fix this
Warning: React does not recognize the
isDarkprop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercaseisdarkinstead. If you accidentally passed it from a parent component, remove it from the DOM element. Error Component StackSummary by CodeRabbit
isDarkproperty in multiple icon components to prevent it from being passed to underlying SVG elements and to clarify prop usage. No changes to visual output or component interfaces.