fix: added props to all icons and added width and height defs to node icon#8649
Conversation
dosubot
Bot
added
the
size:M
WalkthroughThis change standardizes the sizing and attribute handling of SVG icon components across the frontend codebase. It removes hardcoded width and height attributes from SVG elements, applies spread props for external control, and ensures consistent sizing via class names or props. Some components also adjust the order of attribute application for SVG elements. Changes
Sequence Diagram(s)sequenceDiagram
participant ParentComponent
participant IconComponent
participant SVG
ParentComponent->>IconComponent: Pass props (e.g., size, className)
IconComponent->>SVG: Spread props onto <svg>
SVG-->>IconComponent: Rendered with external sizing/styling
IconComponent-->>ParentComponent: Rendered icon with consistent sizing
Possibly related PRs
Suggested labels
Suggested reviewers
✨ 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. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
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: 0
🔭 Outside diff range comments (1)
src/frontend/src/icons/Twitter X/TwitterX.jsx (1)
31-40: Fix inconsistent prop handling between light and dark modes.The light mode SVG still has hardcoded
width="30px"andheight="30px"attributes while the dark mode version uses flexible prop spreading. This inconsistency could cause different sizing behavior between themes, potentially leading to layout issues.Apply this diff to standardize the light mode branch:
<svg xmlns="http://www.w3.org/2000/svg" - {...props} viewBox="0 0 30 30" - width="30px" - height="30px" fill="#000000" + {...props} >
🧹 Nitpick comments (2)
src/frontend/src/icons/Postgres/Postgres.jsx (1)
1-65: Consider a small follow-up: default sizing helperNone of the icons sets an intrinsic
width/height. If a consumer forgets to pass them (or misses the new API), the icon collapses to0×0. Adding a tiny fallback, e.g.export const SvgPostgres = ({ width = 24, height = 24, ...props }) => ( <svg + width={width} + height={height}prevents silent breakage while still letting callers override.
src/frontend/src/icons/Icosa/Icosa.jsx (1)
6-7: Consider removing hardcoded dimensions for consistency.The SVG still has hardcoded
width="1.4em"andheight="1.4em"attributes, which seems inconsistent with the PR's goal of removing fixed dimensions from SVG elements. If these specific dimensions are intentional for this icon, consider documenting why this icon differs from the standard pattern.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (52)
src/frontend/src/CustomNodes/GenericNode/components/nodeIcon/index.tsx(1 hunks)src/frontend/src/icons/AWS/AWS.jsx(0 hunks)src/frontend/src/icons/AWSInverted/AWS.jsx(0 hunks)src/frontend/src/icons/AstraDB/AstraDB.jsx(1 hunks)src/frontend/src/icons/DuckDuckGo/DuckDuckGo.jsx(0 hunks)src/frontend/src/icons/ElasticsearchStore/ElasticsearchLogo.jsx(1 hunks)src/frontend/src/icons/Exa/Exa.jsx(1 hunks)src/frontend/src/icons/Firecrawl/FirecrawlLogo.jsx(1 hunks)src/frontend/src/icons/GitLoader/GitLoader.jsx(0 hunks)src/frontend/src/icons/GridHorizontal/GridHorizontalIcon.jsx(0 hunks)src/frontend/src/icons/Groq/GroqLogo.jsx(0 hunks)src/frontend/src/icons/HCD/HCD.jsx(0 hunks)src/frontend/src/icons/Icosa/Icosa.jsx(1 hunks)src/frontend/src/icons/JSicon/JSIcon.jsx(0 hunks)src/frontend/src/icons/LMStudio/LMStudioIcon.jsx(1 hunks)src/frontend/src/icons/LangChain/LangChainIcon.jsx(0 hunks)src/frontend/src/icons/Langwatch/langwatch.jsx(0 hunks)src/frontend/src/icons/MCP/McpIcon.jsx(0 hunks)src/frontend/src/icons/Maritalk/MaritalkIcon.jsx(0 hunks)src/frontend/src/icons/Mem0/SvgMem.jsx(0 hunks)src/frontend/src/icons/Milvus/Milvus.jsx(1 hunks)src/frontend/src/icons/NotDiamond/NotDiamondIcon.jsx(0 hunks)src/frontend/src/icons/Notion/NotionLogo.jsx(0 hunks)src/frontend/src/icons/Novita/novita.jsx(1 hunks)src/frontend/src/icons/Nvidia/nvidia.jsx(0 hunks)src/frontend/src/icons/Ollama/Ollama.jsx(0 hunks)src/frontend/src/icons/OpenRouter/OpenRouterIcon.jsx(1 hunks)src/frontend/src/icons/Postgres/Postgres.jsx(1 hunks)src/frontend/src/icons/Python/Python.jsx(0 hunks)src/frontend/src/icons/QianFanChat/QianFanChat.jsx(1 hunks)src/frontend/src/icons/Redis/Redis.jsx(0 hunks)src/frontend/src/icons/SambaNova/SambaNovaLogo.jsx(0 hunks)src/frontend/src/icons/ScrapeGraphAI/ScrapeGraphAI.jsx(0 hunks)src/frontend/src/icons/SearchHybrid/SearchHybridIcon.jsx(1 hunks)src/frontend/src/icons/SearchLexical/SearchLexicalIcon.jsx(1 hunks)src/frontend/src/icons/SearchVector/SearchVectorIcon.jsx(1 hunks)src/frontend/src/icons/Spider/SpiderIcon.jsx(0 hunks)src/frontend/src/icons/Streamlit/SvgStreamlit.jsx(0 hunks)src/frontend/src/icons/TwelveLabs/TwelveLabsLogo.jsx(0 hunks)src/frontend/src/icons/Twitter X/TwitterX.jsx(1 hunks)src/frontend/src/icons/Upstash/UpstashIcon.jsx(0 hunks)src/frontend/src/icons/VectaraIcon/Vectara.jsx(0 hunks)src/frontend/src/icons/Wikipedia/Wikipedia.jsx(1 hunks)src/frontend/src/icons/Youtube/youtube.jsx(1 hunks)src/frontend/src/icons/athena/athena.jsx(1 hunks)src/frontend/src/icons/github/github.jsx(1 hunks)src/frontend/src/icons/globe-ok/globe-ok.jsx(0 hunks)src/frontend/src/icons/gmail/gmail.jsx(1 hunks)src/frontend/src/icons/googlecalendar/googlecalendar.jsx(1 hunks)src/frontend/src/icons/mistral/mistralIcon.jsx(0 hunks)src/frontend/src/icons/outlook/outlook.jsx(1 hunks)src/frontend/src/icons/xAI/xAIIcon.jsx(1 hunks)
💤 Files with no reviewable changes (28)
- src/frontend/src/icons/HCD/HCD.jsx
- src/frontend/src/icons/LangChain/LangChainIcon.jsx
- src/frontend/src/icons/AWSInverted/AWS.jsx
- src/frontend/src/icons/AWS/AWS.jsx
- src/frontend/src/icons/GitLoader/GitLoader.jsx
- src/frontend/src/icons/SambaNova/SambaNovaLogo.jsx
- src/frontend/src/icons/globe-ok/globe-ok.jsx
- src/frontend/src/icons/Upstash/UpstashIcon.jsx
- src/frontend/src/icons/MCP/McpIcon.jsx
- src/frontend/src/icons/Ollama/Ollama.jsx
- src/frontend/src/icons/NotDiamond/NotDiamondIcon.jsx
- src/frontend/src/icons/mistral/mistralIcon.jsx
- src/frontend/src/icons/DuckDuckGo/DuckDuckGo.jsx
- src/frontend/src/icons/JSicon/JSIcon.jsx
- src/frontend/src/icons/Langwatch/langwatch.jsx
- src/frontend/src/icons/Groq/GroqLogo.jsx
- src/frontend/src/icons/Mem0/SvgMem.jsx
- src/frontend/src/icons/Nvidia/nvidia.jsx
- src/frontend/src/icons/Streamlit/SvgStreamlit.jsx
- src/frontend/src/icons/Notion/NotionLogo.jsx
- src/frontend/src/icons/GridHorizontal/GridHorizontalIcon.jsx
- src/frontend/src/icons/Spider/SpiderIcon.jsx
- src/frontend/src/icons/Maritalk/MaritalkIcon.jsx
- src/frontend/src/icons/Python/Python.jsx
- src/frontend/src/icons/TwelveLabs/TwelveLabsLogo.jsx
- src/frontend/src/icons/ScrapeGraphAI/ScrapeGraphAI.jsx
- src/frontend/src/icons/Redis/Redis.jsx
- src/frontend/src/icons/VectaraIcon/Vectara.jsx
🔇 Additional comments (24)
src/frontend/src/icons/SearchHybrid/SearchHybridIcon.jsx (1)
6-6: LGTM! Standardized prop handling improves component flexibility.The addition of
{...props}spread enables external control over SVG attributes while maintaining the intrinsic aspect ratio viaviewBox. This change aligns perfectly with the PR's objective to standardize SVG icon prop handling across the codebase.src/frontend/src/icons/SearchVector/SearchVectorIcon.jsx (1)
6-6: Consistent implementation of the standardized prop pattern.The prop spreading implementation matches the pattern used across other icon components in this PR, enabling flexible attribute control while preserving the SVG's visual integrity through the
viewBox.src/frontend/src/icons/ElasticsearchStore/ElasticsearchLogo.jsx (1)
11-11: Props spread correctly enables attribute override capability.The placement of
{...props}after predefined attributes allows external props to override any SVG attribute (includingclassName,fill,stroke, etc.). This provides maximum customization flexibility and follows the established pattern in this standardization effort.src/frontend/src/icons/Firecrawl/FirecrawlLogo.jsx (1)
7-7: Complex SVG component correctly implements standardized prop handling.The prop spreading is properly implemented for this more complex SVG with gradients and styled elements. The
preserveAspectRatio="xMidYMid"attribute ensures proper scaling behavior when dimensions are controlled externally via props.src/frontend/src/icons/outlook/outlook.jsx (1)
2-2: Clean consolidation of SVG attributes with standardized prop handling.The single-line format improves readability while implementing the standardized prop spreading pattern. Removing hardcoded pixel dimensions (
width="23px" height="23px") enables flexible sizing control via props, consistent with the broader codebase standardization effort.src/frontend/src/icons/QianFanChat/QianFanChat.jsx (1)
2-2: LGTM! Excellent standardization of SVG attributes.The change correctly removes hardcoded width and height attributes while preserving the viewBox and enabling external control through props spreading. This aligns perfectly with the PR's objective to make SVG icons more flexible and customizable.
src/frontend/src/icons/Wikipedia/Wikipedia.jsx (1)
2-2: LGTM! Consistent implementation of SVG standardization.The change successfully removes hardcoded width and height attributes while maintaining the essential xmlns and viewBox attributes. The props spreading implementation allows for flexible external control of the SVG dimensions, consistent with the standardization effort across the icon components.
src/frontend/src/icons/Postgres/Postgres.jsx (1)
7-7: 👍 Props spread inserted in the right spotSpreading
...propsafter the fixed attributes lets callers override anything (e.g.width,height,className) while keeping the built-inviewBox. Nice one-liner that matches the rest of the icon set.src/frontend/src/icons/OpenRouter/OpenRouterIcon.jsx (1)
8-8: Good addition of props spreading.The
{...props}spread operator enables flexible external control of SVG attributes like width, height, fill, and styling. Positioning it after the explicit attributes allows incoming props to override the defaultwidth="1em"andheight="1em"values.src/frontend/src/icons/xAI/xAIIcon.jsx (1)
10-10: Excellent positioning of props spread operator.Placing
{...props}at the end of the attribute list ensures that incoming props can override any explicit SVG attributes, providing maximum flexibility for external control of sizing and styling.src/frontend/src/icons/github/github.jsx (1)
2-2: Improved flexibility by removing fixed dimensions.Removing the hardcoded
width="23px"andheight="23px"attributes and adding{...props}allows the icon to be sized dynamically through CSS or props while maintaining proper aspect ratio via theviewBox.src/frontend/src/icons/Exa/Exa.jsx (1)
2-2: Clean consolidation and standardization.The consolidation of SVG attributes onto a single line while removing fixed dimensions and adding
{...props}aligns with the codebase-wide standardization effort and improves component flexibility.src/frontend/src/icons/Milvus/Milvus.jsx (1)
2-2: Consistent implementation of the standardization pattern.The change follows the established pattern of removing fixed dimensions and adding
{...props}for flexible sizing control, while preserving the complex SVG artwork and maintaining consistency across all icon components.src/frontend/src/icons/athena/athena.jsx (1)
10-10: LGTM: Props spreading correctly repositioned.The movement of
{...props}to the end of the SVG attributes is correct and follows best practices, allowing external props to override default values.However, this component still retains hardcoded
width="300"andheight="239"attributes, which seems inconsistent with the PR's objective of removing fixed dimensions from SVG components.src/frontend/src/icons/AstraDB/AstraDB.jsx (1)
10-10: LGTM: Props spreading correctly repositioned.Moving
{...props}to the end allows external props to override default SVG attributes, which is the correct approach.Note that this component still has hardcoded
width="167"andheight="68"attributes, which appears inconsistent with the PR's goal of removing fixed dimensions from SVG components.src/frontend/src/icons/LMStudio/LMStudioIcon.jsx (1)
7-7: LGTM: Props spreading added correctly.The addition of
{...props}enables external control over SVG attributes, which aligns with the PR objectives.Note that this component retains hardcoded
width="1.5em"andheight="1.5em"attributes, though the use of relative units (em) is preferable to absolute pixels for better scalability.src/frontend/src/CustomNodes/GenericNode/components/nodeIcon/index.tsx (1)
42-53: Excellent improvement: Consistent icon sizing enforced.Adding
className="h-4 w-4"to both branches ensures uniform icon dimensions regardless of whether the icon is a Lucide icon or custom SVG. This change complements the SVG prop spreading improvements by providing external size control.The consistent use of Tailwind utility classes maintains good code organization and makes the sizing intention explicit.
src/frontend/src/icons/Novita/novita.jsx (1)
8-8: Perfect implementation: Flexible sizing achieved.This change exemplifies the ideal pattern for the PR objectives - removing hardcoded dimensions and adding
{...props}spreading. The component now relies on theviewBoxfor aspect ratio while allowing complete external control over sizing through props.This approach provides maximum flexibility while maintaining the SVG's visual integrity.
src/frontend/src/icons/Youtube/youtube.jsx (1)
2-2: LGTM! Excellent standardization improvement.This change effectively removes hardcoded width and height attributes while consolidating the SVG attributes into a clean, single-line format. The props spreading allows for external control of sizing and other SVG attributes, which greatly improves the component's flexibility and reusability.
src/frontend/src/icons/SearchLexical/SearchLexicalIcon.jsx (1)
6-6: LGTM! Flexible prop spreading implemented correctly.The addition of
{...props}allows external control over SVG attributes while maintaining the properviewBoxfor scaling. This change enhances component flexibility without breaking functionality.src/frontend/src/icons/gmail/gmail.jsx (1)
2-2: LGTM! Consistent prop spreading pattern.The props spread is correctly placed after explicit attributes, allowing external customization while preserving essential SVG properties. This aligns with the PR's goal of standardizing icon flexibility.
src/frontend/src/icons/Icosa/Icosa.jsx (1)
1-1: LGTM! Prop spreading pattern updated correctly.The change from destructuring props in the function parameter to spreading them on the SVG element is consistent with the standardization effort across icon components.
Also applies to: 9-9
src/frontend/src/icons/googlecalendar/googlecalendar.jsx (1)
2-2: LGTM! Consistent implementation of flexible prop spreading.The change matches the established pattern across other icon components, enabling external control of SVG attributes while preserving essential properties.
src/frontend/src/icons/Twitter X/TwitterX.jsx (1)
7-7: LGTM! Proper prop spreading order for dark mode.The props spread is correctly placed after explicit attributes, ensuring that essential SVG properties are preserved while allowing external customization.
… icon (langflow-ai#8649) * Updated icons to include props * Updated node icon to include width and height
… icon (langflow-ai#8649) * Updated icons to include props * Updated node icon to include width and height
3 participants
This pull request primarily focuses on enhancing the flexibility and consistency of SVG components by ensuring that all components accept and propagate
propsdynamically. Additionally, it introduces minor styling updates to improve the appearance of icons. Below is a summary of the most important changes grouped by theme:SVG Component Updates:
propsusing the spread operator, enabling more flexible customization of attributes likewidth,height, andfill. Examples includeSvgElasticsearchLogo,SvgFirecrawlLogo,SvgIcosa, andSvgLangChainIcon. [1] [2] [3] [4]Styling Enhancements:
classNameattributes toIconComponentinnodeIcon/index.tsxfor consistent sizing (h-4 w-4) across Lucide and non-Lucide icons.Removed Hardcoded Dimensions:
widthandheightattributes from various SVG components, allowing dimensions to be customized viaprops. Examples includeSvgAWS,SvgDuckDuckGo, andSvgLangwatch. [1] [2] [3]Code Simplification:
SvgExaby consolidating attributes into a single line while maintaining the use ofprops.These changes collectively improve the maintainability and usability of the codebase, particularly for dynamic rendering of SVG icons.
Summary by CodeRabbit