feat: add new Composio components#10017
Conversation
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughAdds new frontend SVG icon components and forwardRef wrappers for multiple services, updates lazy icon imports mapping, and introduces corresponding backend Composio API component classes. Expands composio/init.py to lazily expose these new components via dynamic imports. Changes
Sequence Diagram(s)sequenceDiagram
actor UI
participant Icons as lazyIconImports
participant Mod as Icon Module (dynamic)
participant C as Icon Component
UI->>Icons: request("Brandfetch")
Icons-->>UI: Promise<Component>
UI->>Mod: dynamic import(".../icons/Brandfetch")
Mod-->>UI: default-export SVG component
UI->>C: render with props/ref
C-->>UI: SVG element
sequenceDiagram
actor DevCode as Import Site
participant Init as composio.__init__
participant Dyn as __getattr__ Lazy Loader
participant Mod as composio.brandfetch_composio
participant Class as ComposioBrandfetchAPIComponent
DevCode->>Init: access attribute "ComposioBrandfetchAPIComponent"
Init->>Dyn: resolve missing attribute
Dyn->>Mod: import module
Mod-->>Dyn: module loaded
Dyn-->>DevCode: Class reference
DevCode->>Class: instantiate/use
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (1 error, 2 warnings, 1 inconclusive)
✅ Passed checks (3 passed)
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. Comment |
|
Hi! I'm I would like to apply some automated changes to this pull request, but it looks like I don't have the necessary permissions to do so. To get this pull request into a mergeable state, please do one of the following two things:
|
There was a problem hiding this comment.
Pull Request Overview
This PR adds new Composio components to the Langflow framework, integrating support for 10 additional tools: AgentQL, Agiled, Bolna, Brandfetch, Brightdata, CapsuleCRM, Canvas, Digicert, Jira, and TimelinesAI. The changes span both frontend icon registration and backend component registration.
- Frontend: Adds icon assets and lazy loading support for the new components
- Backend: Creates Composio wrapper components for each new tool
- Registry: Updates both frontend and backend registries to include the new components
Reviewed Changes
Copilot reviewed 32 out of 42 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| timelinesai_composio.py | Backend Composio component for TimelinesAI integration |
| jira_composio.py | Backend Composio component for Jira integration |
| digicert_composio.py | Backend Composio component for Digicert integration |
| capsulecrm_composio.py | Backend Composio component for CapsuleCRM integration |
| canvas_composio.py | Backend Composio component for Canvas integration |
| brightdata_composio.py | Backend Composio component for Brightdata integration |
| brandfetch_composio.py | Backend Composio component for Brandfetch integration |
| bolna_composio.py | Backend Composio component for Bolna integration |
| agiled_composio.py | Backend Composio component for Agiled integration |
| agentql_composio.py | Backend Composio component for AgentQL integration |
| init.py | Updates component registry with new imports and exports |
| lazyIconImports.ts | Frontend icon lazy loading configuration for new icons |
| Frontend Icon Files | React icon components and SVG assets for each new tool |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
There was a problem hiding this comment.
Actionable comments posted: 21
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/frontend/src/icons/AgentQLcomposio/agentql.jsx (1)
1-57: Align frontend icon folder and mapping to the backend icon name
Renamesrc/frontend/src/icons/AgentQLcomposiotosrc/frontend/src/icons/AgentQL(so the directory and exported component name match the backendicon = "AgentQL"and thelazyIconsMappingkey), and update the icon’sindex.tsxexport toAgentQLIcon. Custom vendor logos remain permitted.src/lfx/src/lfx/components/composio/__init__.py (1)
8-45: Sort TYPE_CHECKING imports alphabetically
CI is failing due to unsorted imports insrc/lfx/src/lfx/components/composio/__init__.py. Runruff check --select I --fixor manually alphabetize theif TYPE_CHECKING:block.
🧹 Nitpick comments (23)
src/frontend/src/icons/Agiled/agiled.jsx (2)
2-7: Prefer scalable icon sizing.Use width/height="1em" (or omit entirely) and rely on props/CSS for size; current 512px defaults are large.
9-27: Normalize SVG attributes.Replace fill="None" with fill="none" for standards compliance; browsers often tolerate it but it’s nonstandard.
Also applies to: 28-53, 54-61, 62-68, 69-73, 74-84, 85-89, 90-94, 95-99, 100-104, 105-109, 110-116, 117-121, 122-128
src/frontend/src/icons/Digicert/digicert.jsx (2)
2-2: Prefer scalable sizing.Use width/height="1em" to scale with font-size; current 19px defaults are arbitrary.
320-335: Normalize 'fill' values.Use fill="none" (lowercase) instead of "None" throughout for standards compliance.
src/frontend/src/icons/Agiled/index.tsx (1)
4-9: Optional: add a displayName for easier DevTools debugging.export const AgiledIcon = forwardRef< SVGSVGElement, React.PropsWithChildren<{}> >((props, ref) => { return <AgiledIconSVG ref={ref} {...props} />; }); + +AgiledIcon.displayName = "AgiledIcon";src/frontend/src/icons/Brandfetch/index.tsx (1)
4-9: Optional: add displayName.export const BrandfetchIcon = forwardRef< SVGSVGElement, React.PropsWithChildren<{}> >((props, ref) => { return <BrandfetchIconSVG ref={ref} {...props} />; }); + +BrandfetchIcon.displayName = "BrandfetchIcon";src/frontend/src/icons/Digicert/index.tsx (1)
1-9: Wrapper looks good; verify inner ref and consider displayName.Matches established pattern. Please ensure ./digicert forwards the ref to . Also consider adding a displayName for DevTools.
export const DigicertIcon = forwardRef< SVGSVGElement, React.PropsWithChildren<{}> >((props, ref) => { return <DigicertIconSVG ref={ref} {...props} />; }); + +DigicertIcon.displayName = "DigicertIcon";src/lfx/src/lfx/components/composio/digicert_composio.py (2)
4-11: Align display name with brand capitalization ("DigiCert").Minor UI polish: prefer “DigiCert” while keeping icon key as-is to match frontend mapping.
class ComposioDigicertAPIComponent(ComposioBaseComponent): - display_name: str = "Digicert" + display_name: str = "DigiCert" icon = "Digicert" documentation: str = "https://docs.composio.dev" app_name = "digicert"
10-11: Optional: preselect default tools once actions are known.When available, set self._default_tools or default_tools_limit to guide tool exposure and avoid overwhelming agents.
src/lfx/src/lfx/components/composio/agentql_composio.py (1)
10-11: Optional: preselect default tools once actions are known.src/lfx/src/lfx/components/composio/timelinesai_composio.py (1)
4-11: TimelinesAI component wiring looks correct (icon key matches frontend).
icon = "Timelinesai"aligns with the new frontend mapping key, so resolution should work end‑to‑end. Consider populatingset_default_tools()(or setting a smallerdefault_tools_limit) to avoid exposing an arbitrary first N tools. As per base class behavior.
Please confirmsrc/frontend/src/icons/Timelinesai/index.tsxexportsTimelinesaiIconso the lazy import resolves at runtime. Based on learnings.src/lfx/src/lfx/components/composio/brightdata_composio.py (1)
4-11: Brightdata component follows the expected pattern.Attributes look consistent, and the icon key matches the frontend mapping entry. Populate
set_default_tools()(or setdefault_tools_limit) to provide a curated default tool set.
Please confirmsrc/frontend/src/icons/Brightdata/index.tsxexportsBrightdataIcon. Based on learnings.src/frontend/src/icons/Jira/jira.jsx (1)
1-4: Dark mode support (isDark) for custom SVGs.Icons should react to theme via an
isDarkprop. Since this SVG uses fixed fills, consider a themed variant or neutralizing fills tocurrentColorbehind a wrapper that sets color per theme. Can be a follow‑up. Based on learnings.src/frontend/src/icons/Brightdata/brightdata.jsx (1)
9-15: Parameterize brand color usage with primary variable.Replace hardcoded color with computed primary. Repeat similar change for other occurrences of the same brand color.
-<g fill="None" fillOpacity="0.0" stroke="#0A1B37" strokeOpacity="1.00" strokeWidth="0.3"><path d=" +<g fill="None" fillOpacity="0.0" stroke={primary} strokeOpacity="1.00" strokeWidth="0.3"><path d="If other groups use the same color as fill, switch to fill={primary}. Based on learnings.
Also applies to: 185-192
src/frontend/src/icons/AgentQLcomposio/agentql.jsx (1)
9-24: Replace hardcoded strokes with primary (repeat for similar occurrences).-<g fill="None" fillOpacity="0.0" stroke="#000000" strokeOpacity="0.00" strokeWidth="0.3"><path d=" +<g fill="None" fillOpacity="0.0" stroke={primary} strokeOpacity="0.00" strokeWidth="0.3"><path d="Apply to other groups using the same base color (and fills, if desired). Based on learnings.
Also applies to: 30-54
src/frontend/src/icons/Bolna/bolna.jsx (1)
1-1: Consider using TypeScript and descriptive component name.The component uses a generic name "Icon" and
.jsxextension. Consider using TypeScript (.tsx) and a more descriptive name like "BolnaIcon" for better maintainability.-const Icon = ({ isDark, ...props }) => ( +const BolnaIcon = ({ isDark, ...props }) => (-export default Icon; +export default BolnaIcon;src/lfx/src/lfx/components/composio/agiled_composio.py (1)
10-11: Implement default tools (or add a minimal pass).set_default_tools currently only has a docstring; either populate self._default_tools with sensible defaults or add a pass to make intent explicit.
As per coding guidelines
src/frontend/src/icons/Timelinesai/timelinesai.jsx (1)
1-8: Support dark/light via isDark and expose color through currentColor.Adopt isDark and drive stroke through svg “color”; also add a11y attrs.
Apply:
-const Icon = (props) => ( - <svg - xmlns="http://www.w3.org/2000/svg" - viewBox="0 0 400 400" - width="20" - height="20" - {...props} - > +const Icon = ({ isDark = false, style, ...props }) => ( + <svg + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 400 400" + width="20" + height="20" + style={{ ...(isDark ? { color: '#fff' } : { color: '#000' }), ...style }} + aria-hidden="true" + focusable="false" + {...props} + >Based on learnings
src/lfx/src/lfx/components/composio/jira_composio.py (1)
10-11: Populate default tool set (or add pass).Consider setting self._default_tools with the most common Jira actions (up to default_tools_limit) or add a pass for clarity.
Based on learnings
src/lfx/src/lfx/components/composio/bolna_composio.py (1)
10-11: Define default tools or add pass.Either set self._default_tools to sensible defaults or include a pass to make the no-op explicit.
Based on learnings
src/lfx/src/lfx/components/composio/canvas_composio.py (1)
10-11: Implement default tools (or add pass).Same as others: set self._default_tools or include a pass.
Based on learnings
src/lfx/src/lfx/components/composio/capsulecrm_composio.py (1)
10-11: Make the no-op explicit and typed.Optional: add a pass and return annotation for clarity and consistency.
- def set_default_tools(self): - """Set the default tools for CapsuleCRM component.""" + def set_default_tools(self) -> None: + """Set the default tools for CapsuleCRM component.""" + # Rely on base default_tools_limit behavior for now. + passsrc/lfx/src/lfx/components/composio/__init__.py (1)
88-128: Avoid drift: derive all from the dynamic map.Keeps all consistent with _dynamic_imports and reduces maintenance.
-__all__ = [ - "ComposioAPIComponent", - "ComposioAgentQLAPIComponent", - "ComposioAgiledAPIComponent", - "ComposioAirtableAPIComponent", - "ComposioAsanaAPIComponent", - "ComposioAttioAPIComponent", - "ComposioBolnaAPIComponent", - "ComposioBrandfetchAPIComponent", - "ComposioBrightdataAPIComponent", - "ComposioCalendlyAPIComponent", - "ComposioCapsuleCRMAPIComponent", - "ComposioCanvaasAPIComponent", - "ComposioContentfulAPIComponent", - "ComposioDiscordAPIComponent", - "ComposioDigicertAPIComponent", - "ComposioFigmaAPIComponent", - "ComposioGitHubAPIComponent", - "ComposioGmailAPIComponent", - "ComposioGoogleCalendarAPIComponent", - "ComposioGoogleDocsAPIComponent", - "ComposioGoogleSheetsAPIComponent", - "ComposioGoogleTasksAPIComponent", - "ComposioGooglemeetAPIComponent", - "ComposioJiraAPIComponent", - "ComposioKlaviyoAPIComponent", - "ComposioLinearAPIComponent", - "ComposioMiroAPIComponent", - "ComposioNotionAPIComponent", - "ComposioOneDriveAPIComponent", - "ComposioOutlookAPIComponent", - "ComposioRedditAPIComponent", - "ComposioSlackAPIComponent", - "ComposioSlackbotAPIComponent", - "ComposioSupabaseAPIComponent", - "ComposioTimelinesaiAPIComponent", - "ComposioTodoistAPIComponent", - "ComposioWrikeAPIComponent", - "ComposioYoutubeAPIComponent", -] +__all__ = list(_dynamic_imports.keys())
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (10)
src/frontend/src/icons/AgentQLcomposio/agentql.svgis excluded by!**/*.svgsrc/frontend/src/icons/Agiled/agiled.svgis excluded by!**/*.svgsrc/frontend/src/icons/Bolna/bolna.svgis excluded by!**/*.svgsrc/frontend/src/icons/Brandfetch/brandfetch.svgis excluded by!**/*.svgsrc/frontend/src/icons/Brightdata/brightdata.svgis excluded by!**/*.svgsrc/frontend/src/icons/Canvas/canvas.svgis excluded by!**/*.svgsrc/frontend/src/icons/Capsulecrm/capsulecrm.svgis excluded by!**/*.svgsrc/frontend/src/icons/Digicert/digicert.svgis excluded by!**/*.svgsrc/frontend/src/icons/Jira/jira.svgis excluded by!**/*.svgsrc/frontend/src/icons/Timelinesai/timelinesai.svgis excluded by!**/*.svg
📒 Files selected for processing (32)
src/frontend/src/icons/AgentQLcomposio/agentql.jsx(1 hunks)src/frontend/src/icons/AgentQLcomposio/index.tsx(1 hunks)src/frontend/src/icons/Agiled/agiled.jsx(1 hunks)src/frontend/src/icons/Agiled/index.tsx(1 hunks)src/frontend/src/icons/Bolna/bolna.jsx(1 hunks)src/frontend/src/icons/Bolna/index.tsx(1 hunks)src/frontend/src/icons/Brandfetch/brandfetch.jsx(1 hunks)src/frontend/src/icons/Brandfetch/index.tsx(1 hunks)src/frontend/src/icons/Brightdata/brightdata.jsx(1 hunks)src/frontend/src/icons/Brightdata/index.tsx(1 hunks)src/frontend/src/icons/Canvas/canvas.jsx(1 hunks)src/frontend/src/icons/Canvas/index.tsx(1 hunks)src/frontend/src/icons/Capsulecrm/capsulecrm.jsx(1 hunks)src/frontend/src/icons/Capsulecrm/index.tsx(1 hunks)src/frontend/src/icons/Digicert/digicert.jsx(1 hunks)src/frontend/src/icons/Digicert/index.tsx(1 hunks)src/frontend/src/icons/Jira/index.tsx(1 hunks)src/frontend/src/icons/Jira/jira.jsx(1 hunks)src/frontend/src/icons/Timelinesai/index.tsx(1 hunks)src/frontend/src/icons/Timelinesai/timelinesai.jsx(1 hunks)src/frontend/src/icons/lazyIconImports.ts(6 hunks)src/lfx/src/lfx/components/composio/__init__.py(4 hunks)src/lfx/src/lfx/components/composio/agentql_composio.py(1 hunks)src/lfx/src/lfx/components/composio/agiled_composio.py(1 hunks)src/lfx/src/lfx/components/composio/bolna_composio.py(1 hunks)src/lfx/src/lfx/components/composio/brandfetch_composio.py(1 hunks)src/lfx/src/lfx/components/composio/brightdata_composio.py(1 hunks)src/lfx/src/lfx/components/composio/canvas_composio.py(1 hunks)src/lfx/src/lfx/components/composio/capsulecrm_composio.py(1 hunks)src/lfx/src/lfx/components/composio/digicert_composio.py(1 hunks)src/lfx/src/lfx/components/composio/jira_composio.py(1 hunks)src/lfx/src/lfx/components/composio/timelinesai_composio.py(1 hunks)
🧰 Additional context used
📓 Path-based instructions (5)
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/Agiled/agiled.jsxsrc/frontend/src/icons/Brightdata/brightdata.jsxsrc/frontend/src/icons/Jira/jira.jsxsrc/frontend/src/icons/Bolna/bolna.jsxsrc/frontend/src/icons/Jira/index.tsxsrc/frontend/src/icons/Digicert/digicert.jsxsrc/frontend/src/icons/Agiled/index.tsxsrc/frontend/src/icons/Digicert/index.tsxsrc/frontend/src/icons/Timelinesai/index.tsxsrc/frontend/src/icons/Brandfetch/index.tsxsrc/frontend/src/icons/Capsulecrm/index.tsxsrc/frontend/src/icons/AgentQLcomposio/index.tsxsrc/frontend/src/icons/Bolna/index.tsxsrc/frontend/src/icons/Capsulecrm/capsulecrm.jsxsrc/frontend/src/icons/Brandfetch/brandfetch.jsxsrc/frontend/src/icons/Canvas/canvas.jsxsrc/frontend/src/icons/Canvas/index.tsxsrc/frontend/src/icons/Timelinesai/timelinesai.jsxsrc/frontend/src/icons/Brightdata/index.tsxsrc/frontend/src/icons/AgentQLcomposio/agentql.jsxsrc/frontend/src/icons/lazyIconImports.ts
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/Agiled/agiled.jsxsrc/frontend/src/icons/Brightdata/brightdata.jsxsrc/frontend/src/icons/Jira/jira.jsxsrc/frontend/src/icons/Bolna/bolna.jsxsrc/frontend/src/icons/Jira/index.tsxsrc/frontend/src/icons/Digicert/digicert.jsxsrc/frontend/src/icons/Agiled/index.tsxsrc/frontend/src/icons/Digicert/index.tsxsrc/frontend/src/icons/Timelinesai/index.tsxsrc/frontend/src/icons/Brandfetch/index.tsxsrc/frontend/src/icons/Capsulecrm/index.tsxsrc/frontend/src/icons/AgentQLcomposio/index.tsxsrc/frontend/src/icons/Bolna/index.tsxsrc/frontend/src/icons/Capsulecrm/capsulecrm.jsxsrc/frontend/src/icons/Brandfetch/brandfetch.jsxsrc/frontend/src/icons/Canvas/canvas.jsxsrc/frontend/src/icons/Canvas/index.tsxsrc/frontend/src/icons/Timelinesai/timelinesai.jsxsrc/frontend/src/icons/Brightdata/index.tsxsrc/frontend/src/icons/AgentQLcomposio/agentql.jsxsrc/frontend/src/icons/lazyIconImports.ts
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/Agiled/agiled.jsxsrc/frontend/src/icons/Brightdata/brightdata.jsxsrc/frontend/src/icons/Jira/jira.jsxsrc/frontend/src/icons/Bolna/bolna.jsxsrc/frontend/src/icons/Jira/index.tsxsrc/frontend/src/icons/Digicert/digicert.jsxsrc/frontend/src/icons/Agiled/index.tsxsrc/frontend/src/icons/Digicert/index.tsxsrc/frontend/src/icons/Timelinesai/index.tsxsrc/frontend/src/icons/Brandfetch/index.tsxsrc/frontend/src/icons/Capsulecrm/index.tsxsrc/frontend/src/icons/AgentQLcomposio/index.tsxsrc/frontend/src/icons/Bolna/index.tsxsrc/frontend/src/icons/Capsulecrm/capsulecrm.jsxsrc/frontend/src/icons/Brandfetch/brandfetch.jsxsrc/frontend/src/icons/Canvas/canvas.jsxsrc/frontend/src/icons/Canvas/index.tsxsrc/frontend/src/icons/Timelinesai/timelinesai.jsxsrc/frontend/src/icons/Brightdata/index.tsxsrc/frontend/src/icons/AgentQLcomposio/agentql.jsx
src/frontend/src/icons/*/index.tsx
📄 CodeRabbit inference engine (.cursor/rules/icons.mdc)
Create an
index.tsxin your icon directory that exports your icon usingforwardRefand passes theisDarkprop.
Files:
src/frontend/src/icons/Jira/index.tsxsrc/frontend/src/icons/Agiled/index.tsxsrc/frontend/src/icons/Digicert/index.tsxsrc/frontend/src/icons/Timelinesai/index.tsxsrc/frontend/src/icons/Brandfetch/index.tsxsrc/frontend/src/icons/Capsulecrm/index.tsxsrc/frontend/src/icons/AgentQLcomposio/index.tsxsrc/frontend/src/icons/Bolna/index.tsxsrc/frontend/src/icons/Canvas/index.tsxsrc/frontend/src/icons/Brightdata/index.tsx
src/frontend/src/icons/lazyIconImports.ts
📄 CodeRabbit inference engine (.cursor/rules/icons.mdc)
Add your icon to the
lazyIconsMappingobject insrc/frontend/src/icons/lazyIconImports.tswith a key that matches the backend icon string exactly.
Files:
src/frontend/src/icons/lazyIconImports.ts
🧠 Learnings (9)
📓 Common learnings
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.
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.
📚 Learning: 2025-07-28T15:56:47.865Z
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/Agiled/agiled.jsxsrc/frontend/src/icons/Brightdata/brightdata.jsxsrc/frontend/src/icons/Jira/jira.jsxsrc/frontend/src/icons/Bolna/bolna.jsxsrc/frontend/src/icons/Jira/index.tsxsrc/frontend/src/icons/Digicert/digicert.jsxsrc/frontend/src/icons/Agiled/index.tsxsrc/frontend/src/icons/Digicert/index.tsxsrc/frontend/src/icons/Brandfetch/index.tsxsrc/frontend/src/icons/AgentQLcomposio/index.tsxsrc/frontend/src/icons/Bolna/index.tsxsrc/frontend/src/icons/Capsulecrm/capsulecrm.jsxsrc/frontend/src/icons/Brandfetch/brandfetch.jsxsrc/frontend/src/icons/Canvas/canvas.jsxsrc/frontend/src/icons/Timelinesai/timelinesai.jsxsrc/frontend/src/icons/Brightdata/index.tsxsrc/frontend/src/icons/AgentQLcomposio/agentql.jsx
📚 Learning: 2025-06-23T12:46:52.420Z
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/Agiled/agiled.jsxsrc/frontend/src/icons/Jira/jira.jsxsrc/frontend/src/icons/Bolna/bolna.jsxsrc/frontend/src/icons/Jira/index.tsxsrc/frontend/src/icons/Agiled/index.tsxsrc/frontend/src/icons/Digicert/index.tsxsrc/frontend/src/icons/Timelinesai/index.tsxsrc/frontend/src/icons/Brandfetch/index.tsxsrc/frontend/src/icons/Capsulecrm/index.tsxsrc/frontend/src/icons/AgentQLcomposio/index.tsxsrc/frontend/src/icons/Bolna/index.tsxsrc/frontend/src/icons/Capsulecrm/capsulecrm.jsxsrc/frontend/src/icons/Brandfetch/brandfetch.jsxsrc/frontend/src/icons/Canvas/canvas.jsxsrc/frontend/src/icons/Canvas/index.tsxsrc/frontend/src/icons/Brightdata/index.tsxsrc/frontend/src/icons/AgentQLcomposio/agentql.jsx
📚 Learning: 2025-06-16T11:14:04.200Z
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/Agiled/agiled.jsxsrc/frontend/src/icons/Jira/jira.jsxsrc/frontend/src/icons/Bolna/bolna.jsxsrc/frontend/src/icons/Jira/index.tsxsrc/frontend/src/icons/Digicert/digicert.jsxsrc/frontend/src/icons/Agiled/index.tsxsrc/frontend/src/icons/Digicert/index.tsxsrc/frontend/src/icons/Timelinesai/index.tsxsrc/frontend/src/icons/Brandfetch/index.tsxsrc/frontend/src/icons/Capsulecrm/index.tsxsrc/frontend/src/icons/AgentQLcomposio/index.tsxsrc/frontend/src/icons/Bolna/index.tsxsrc/frontend/src/icons/Capsulecrm/capsulecrm.jsxsrc/frontend/src/icons/Brandfetch/brandfetch.jsxsrc/frontend/src/icons/Canvas/canvas.jsxsrc/frontend/src/icons/Canvas/index.tsxsrc/frontend/src/icons/Brightdata/index.tsxsrc/frontend/src/icons/AgentQLcomposio/agentql.jsx
📚 Learning: 2025-07-18T18:27:12.609Z
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/Agiled/agiled.jsxsrc/frontend/src/icons/Brightdata/brightdata.jsxsrc/frontend/src/icons/Bolna/bolna.jsxsrc/frontend/src/icons/Agiled/index.tsxsrc/frontend/src/icons/Timelinesai/index.tsxsrc/frontend/src/icons/Brandfetch/index.tsxsrc/frontend/src/icons/Capsulecrm/index.tsxsrc/frontend/src/icons/AgentQLcomposio/index.tsxsrc/frontend/src/icons/Bolna/index.tsxsrc/frontend/src/icons/Brandfetch/brandfetch.jsxsrc/frontend/src/icons/Timelinesai/timelinesai.jsxsrc/frontend/src/icons/Brightdata/index.tsxsrc/frontend/src/icons/AgentQLcomposio/agentql.jsx
📚 Learning: 2025-07-28T15:56:47.865Z
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/Agiled/agiled.jsxsrc/frontend/src/icons/Brightdata/brightdata.jsxsrc/frontend/src/icons/Jira/jira.jsxsrc/frontend/src/icons/Bolna/bolna.jsxsrc/frontend/src/icons/Jira/index.tsxsrc/frontend/src/icons/Digicert/digicert.jsxsrc/frontend/src/icons/Agiled/index.tsxsrc/frontend/src/icons/Digicert/index.tsxsrc/frontend/src/icons/Timelinesai/index.tsxsrc/frontend/src/icons/Brandfetch/index.tsxsrc/frontend/src/icons/Capsulecrm/index.tsxsrc/frontend/src/icons/AgentQLcomposio/index.tsxsrc/frontend/src/icons/Bolna/index.tsxsrc/frontend/src/icons/Capsulecrm/capsulecrm.jsxsrc/frontend/src/icons/Brandfetch/brandfetch.jsxsrc/frontend/src/icons/Canvas/canvas.jsxsrc/frontend/src/icons/Canvas/index.tsxsrc/frontend/src/icons/Timelinesai/timelinesai.jsxsrc/frontend/src/icons/Brightdata/index.tsxsrc/frontend/src/icons/AgentQLcomposio/agentql.jsx
📚 Learning: 2025-06-23T12:46:52.420Z
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/Agiled/agiled.jsxsrc/frontend/src/icons/Brightdata/brightdata.jsxsrc/frontend/src/icons/Brandfetch/brandfetch.jsxsrc/frontend/src/icons/AgentQLcomposio/agentql.jsx
📚 Learning: 2025-06-23T12:46:52.420Z
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/Agiled/agiled.jsxsrc/frontend/src/icons/Brightdata/brightdata.jsxsrc/frontend/src/icons/Jira/jira.jsxsrc/frontend/src/icons/Capsulecrm/capsulecrm.jsxsrc/frontend/src/icons/Brandfetch/brandfetch.jsxsrc/frontend/src/icons/Canvas/canvas.jsxsrc/frontend/src/icons/Brightdata/index.tsxsrc/frontend/src/icons/AgentQLcomposio/agentql.jsx
📚 Learning: 2025-07-28T15:56:47.865Z
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/lazyIconImports.ts
🧬 Code graph analysis (13)
src/lfx/src/lfx/components/composio/digicert_composio.py (9)
src/lfx/src/lfx/components/composio/agentql_composio.py (1)
set_default_tools(10-11)src/lfx/src/lfx/components/composio/agiled_composio.py (1)
set_default_tools(10-11)src/lfx/src/lfx/components/composio/bolna_composio.py (1)
set_default_tools(10-11)src/lfx/src/lfx/components/composio/brandfetch_composio.py (1)
set_default_tools(10-11)src/lfx/src/lfx/components/composio/brightdata_composio.py (1)
set_default_tools(10-11)src/lfx/src/lfx/components/composio/canvas_composio.py (1)
set_default_tools(10-11)src/lfx/src/lfx/components/composio/capsulecrm_composio.py (1)
set_default_tools(10-11)src/lfx/src/lfx/components/composio/jira_composio.py (1)
set_default_tools(10-11)src/lfx/src/lfx/components/composio/timelinesai_composio.py (1)
set_default_tools(10-11)
src/frontend/src/icons/Agiled/agiled.jsx (2)
src/frontend/src/icons/AgentQLcomposio/agentql.jsx (1)
Icon(1-55)src/frontend/src/icons/Canvas/canvas.jsx (1)
Icon(1-17)
src/frontend/src/icons/Brightdata/brightdata.jsx (2)
src/frontend/src/icons/AgentQLcomposio/agentql.jsx (1)
Icon(1-55)src/frontend/src/icons/Brandfetch/brandfetch.jsx (1)
Icon(1-5)
src/frontend/src/icons/Jira/jira.jsx (3)
src/frontend/src/icons/AgentQLcomposio/agentql.jsx (1)
Icon(1-55)src/frontend/src/icons/Brandfetch/brandfetch.jsx (1)
Icon(1-5)src/frontend/src/icons/Canvas/canvas.jsx (1)
Icon(1-17)
src/frontend/src/icons/Bolna/bolna.jsx (2)
src/frontend/src/icons/AgentQLcomposio/agentql.jsx (1)
Icon(1-55)src/frontend/src/icons/Brandfetch/brandfetch.jsx (1)
Icon(1-5)
src/lfx/src/lfx/components/composio/brightdata_composio.py (1)
src/lfx/src/lfx/components/composio/agentql_composio.py (1)
set_default_tools(10-11)
src/frontend/src/icons/Digicert/digicert.jsx (2)
src/frontend/src/icons/AgentQLcomposio/agentql.jsx (1)
Icon(1-55)src/frontend/src/icons/Timelinesai/timelinesai.jsx (1)
Icon(1-1076)
src/lfx/src/lfx/components/composio/agentql_composio.py (1)
src/lfx/src/lfx/components/composio/agiled_composio.py (1)
set_default_tools(10-11)
src/lfx/src/lfx/components/composio/jira_composio.py (9)
src/lfx/src/lfx/components/composio/agentql_composio.py (1)
set_default_tools(10-11)src/lfx/src/lfx/components/composio/agiled_composio.py (1)
set_default_tools(10-11)src/lfx/src/lfx/components/composio/bolna_composio.py (1)
set_default_tools(10-11)src/lfx/src/lfx/components/composio/brandfetch_composio.py (1)
set_default_tools(10-11)src/lfx/src/lfx/components/composio/brightdata_composio.py (1)
set_default_tools(10-11)src/lfx/src/lfx/components/composio/canvas_composio.py (1)
set_default_tools(10-11)src/lfx/src/lfx/components/composio/capsulecrm_composio.py (1)
set_default_tools(10-11)src/lfx/src/lfx/components/composio/digicert_composio.py (1)
set_default_tools(10-11)src/lfx/src/lfx/components/composio/timelinesai_composio.py (1)
set_default_tools(10-11)
src/lfx/src/lfx/components/composio/agiled_composio.py (1)
src/lfx/src/lfx/base/composio/composio_base.py (1)
ComposioBaseComponent(32-2157)
src/lfx/src/lfx/components/composio/canvas_composio.py (3)
src/lfx/src/lfx/components/composio/agentql_composio.py (1)
set_default_tools(10-11)src/lfx/src/lfx/components/composio/brightdata_composio.py (1)
set_default_tools(10-11)src/lfx/src/lfx/components/composio/jira_composio.py (1)
set_default_tools(10-11)
src/frontend/src/icons/Timelinesai/timelinesai.jsx (2)
src/frontend/src/icons/Brightdata/brightdata.jsx (1)
Icon(1-380)src/frontend/src/icons/Canvas/canvas.jsx (1)
Icon(1-17)
src/lfx/src/lfx/components/composio/__init__.py (17)
src/lfx/src/lfx/components/composio/agentql_composio.py (1)
ComposioAgentQLAPIComponent(4-11)src/lfx/src/lfx/components/composio/agiled_composio.py (1)
ComposioAgiledAPIComponent(4-11)src/lfx/src/lfx/components/composio/airtable_composio.py (1)
ComposioAirtableAPIComponent(4-11)src/lfx/src/lfx/components/composio/asana_composio.py (1)
ComposioAsanaAPIComponent(4-11)src/lfx/src/lfx/components/composio/attio_composio.py (1)
ComposioAttioAPIComponent(4-11)src/lfx/src/lfx/components/composio/bolna_composio.py (1)
ComposioBolnaAPIComponent(4-11)src/lfx/src/lfx/components/composio/brandfetch_composio.py (1)
ComposioBrandfetchAPIComponent(4-11)src/lfx/src/lfx/components/composio/brightdata_composio.py (1)
ComposioBrightdataAPIComponent(4-11)src/lfx/src/lfx/components/composio/calendly_composio.py (1)
ComposioCalendlyAPIComponent(4-11)src/lfx/src/lfx/components/composio/capsulecrm_composio.py (1)
ComposioCapsuleCRMAPIComponent(4-11)src/lfx/src/lfx/components/composio/canvas_composio.py (1)
ComposioCanvaasAPIComponent(4-11)src/lfx/src/lfx/components/composio/contentful_composio.py (1)
ComposioContentfulAPIComponent(4-11)src/lfx/src/lfx/components/composio/discord_composio.py (1)
ComposioDiscordAPIComponent(4-11)src/lfx/src/lfx/components/composio/digicert_composio.py (1)
ComposioDigicertAPIComponent(4-11)src/lfx/src/lfx/components/composio/figma_composio.py (1)
ComposioFigmaAPIComponent(4-11)src/lfx/src/lfx/components/composio/jira_composio.py (1)
ComposioJiraAPIComponent(4-11)src/lfx/src/lfx/components/composio/wrike_composio.py (1)
ComposioWrikeAPIComponent(4-11)
🪛 GitHub Check: Ruff Style Check (3.13)
src/lfx/src/lfx/components/composio/__init__.py
[failure] 8-45: Ruff (I001)
src/lfx/src/lfx/components/composio/init.py:8:5: I001 Import block is un-sorted or un-formatted
🪛 GitHub Actions: Ruff Style Check
src/lfx/src/lfx/components/composio/__init__.py
[error] 8-8: Ruff check failed. Import block is un-sorted or un-formatted (I001).
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Run Frontend Unit Tests / Frontend Jest Unit Tests
- GitHub Check: Test Starter Templates
- GitHub Check: Update Starter Projects
🔇 Additional comments (15)
src/frontend/src/icons/Brightdata/index.tsx (1)
1-9: Approve BrightdataIcon implementation
ForwardRef wrapper is consistent andBrightdatais correctly mapped inlazyIconImports.ts.src/frontend/src/icons/Brandfetch/index.tsx (1)
1-9: Consistent forwardRef wrapper; mirror the ref check done for Agiled.Structure/typing are consistent. Ensure ./brandfetch forwards the ref to as well (see Agiled comment for script).
src/lfx/src/lfx/components/composio/digicert_composio.py (1)
6-11: Wiring verified:ComposioDigicertAPIComponentis correctly exported in__init__.pyand theDigicertkey with matching icon import exists inlazyIconImports.ts.src/lfx/src/lfx/components/composio/agentql_composio.py (1)
4-11: No action required: backend icon key “AgentQL” matches frontend mapping.src/frontend/src/icons/Canvas/canvas.jsx (1)
1-19: LGTM; props are forwarded and sizing is overridable.This follows the existing icon pattern and spreads
...propsafter static attrs, allowing overrides.src/frontend/src/icons/lazyIconImports.ts (1)
6-7: Confirm icon key ↔ export consistency
Manually verify that your frontend entries match the exact backendiconstrings (case-sensitive):
CapsuleCRM→ folderCapsulecrm, exportingCapsulecrmIconCanvaas(not “Canvas”/“Canva”) → folderCanvas, exportingCanvasIconsrc/frontend/src/icons/Jira/index.tsx (1)
1-9: LGTM! Follows established forwardRef pattern.The component correctly uses React.forwardRef with the established
React.PropsWithChildren<{}>prop type pattern and properly forwards ref and props to the underlying SVG component.Based on learnings
src/frontend/src/icons/Timelinesai/index.tsx (1)
1-9: LGTM! Follows established forwardRef pattern.The component correctly uses React.forwardRef with the established
React.PropsWithChildren<{}>prop type pattern and properly forwards ref and props to the underlying SVG component.Based on learnings
src/frontend/src/icons/Capsulecrm/index.tsx (1)
1-9: LGTM! Follows established forwardRef pattern.The component correctly uses React.forwardRef with the established
React.PropsWithChildren<{}>prop type pattern and properly forwards ref and props to the underlying SVG component.Based on learnings
src/frontend/src/icons/Canvas/index.tsx (1)
1-9: LGTM! Follows established forwardRef pattern.The component correctly uses React.forwardRef with the established
React.PropsWithChildren<{}>prop type pattern and properly forwards ref and props to the underlying SVG component.Based on learnings
src/lfx/src/lfx/components/composio/agiled_composio.py (1)
4-8: LGTM on metadata; confirm icon mapping key.Class wiring and attributes look consistent. Please verify that the frontend lazyIconImports maps the key "Agiled" to this icon so backend->frontend strings match exactly.
Based on learnings
src/frontend/src/icons/Timelinesai/timelinesai.jsx (1)
1-8: Verify wrapper and lazy import wiring for Timelinesai.Ensure src/frontend/src/icons/Timelinesai/index.tsx forwards ref and passes isDark, and that lazyIconImports.ts uses key "Timelinesai" matching the backend icon string.
Based on learnings
src/lfx/src/lfx/components/composio/jira_composio.py (1)
4-8: LGTM; double-check icon key matches frontend.Attributes look fine. Please confirm lazyIconImports contains "Jira" keyed entry to match icon = "Jira".
Based on learnings
src/lfx/src/lfx/components/composio/bolna_composio.py (1)
4-8: LGTM; confirm frontend mapping for "Bolna".Looks consistent. Please ensure the frontend lazy mapping key is exactly "Bolna".
Based on learnings
src/lfx/src/lfx/components/composio/capsulecrm_composio.py (1)
5-8: Verify icon key matches frontend mapping exactly.Ensure the icon key "CapsuleCRM" has a matching entry in src/frontend/src/icons/lazyIconImports.ts to prevent missing icon at runtime. Based on learnings.
| const Icon = (props) => ( | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| viewBox="0 0 512 512" | ||
| width="512" | ||
| height="512" | ||
| {...props} | ||
| > |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Add isDark support, accessibility, and scalable sizing.
Align with icon theming/accessibility standards.
-const Icon = (props) => (
- <svg
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 512 512"
- width="512"
- height="512"
- {...props}
- >
+const Icon = ({ isDark = false, title = "AgentQL", ...props }) => {
+ const primary = isDark ? "#E8ECF0" : "#000000";
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 512 512"
+ width="1em"
+ height="1em"
+ role="img"
+ aria-label={title}
+ {...props}
+ >As per coding guidelines.
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In src/frontend/src/icons/AgentQLcomposio/agentql.jsx around lines 1 to 8, the
Icon component currently hardcodes width/height and lacks theming and
accessibility; add an optional boolean prop isDark and an optional size prop
(default e.g. 24) and use size for both width and height (or allow passed-in
width/height via props to override), remove the fixed 512 values, and make the
icon color driven by currentColor or by switching fill/stroke based on isDark;
also add accessibility attributes: role="img", a visually descriptive <title>
(use a title prop or fallback), and set aria-hidden={!!props['aria-hidden']}
when no title provided; ensure props are spread last so passed attributes
override defaults.
| import React, { forwardRef } from "react"; | ||
| import AgentqlIconSVG from "./agentql"; | ||
|
|
||
| export const AgentqlIcon = forwardRef< | ||
| SVGSVGElement, | ||
| React.PropsWithChildren<{}> | ||
| >((props, ref) => { | ||
| return <AgentqlIconSVG ref={ref} {...props} />; | ||
| }); No newline at end of file |
There was a problem hiding this comment.
🧩 Analysis chain
LGTM: forwardRef wrapper matches established pattern.
Props/ref forwarding looks consistent.
Run to verify lazy mapping and backend icon key alignment:
🏁 Script executed:
#!/usr/bin/env bash
# Ensure the lazy loader maps this export and backend icon names match.
rg -n "lazyIconsMapping" src/frontend/src/icons/lazyIconImports.ts -A5
rg -nP "icon\\s*[:=]\\s*['\"]AgentQLcomposio['\"]" -g "Sep28newToolkits/**" -SLength of output: 460
Add lazy loader mapping for AgentQLcomposio
In src/frontend/src/icons/lazyIconImports.ts, update the lazyIconsMapping block:
AgentQL: () => import("@/icons/AgentQL").then((mod) => ({ default: mod.AgentQLIcon })),
+ AgentQLcomposio: () => import("@/icons/AgentQLcomposio").then((mod) => ({ default: mod.AgentqlIcon })),Also verify that the backend’s icon key is AgentQLcomposio to match this entry.
📝 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.
| import React, { forwardRef } from "react"; | |
| import AgentqlIconSVG from "./agentql"; | |
| export const AgentqlIcon = forwardRef< | |
| SVGSVGElement, | |
| React.PropsWithChildren<{}> | |
| >((props, ref) => { | |
| return <AgentqlIconSVG ref={ref} {...props} />; | |
| }); | |
| // … other icon mappings … | |
| AgentQL: () => import("@/icons/AgentQL").then((mod) => ({ default: mod.AgentQLIcon })), | |
| AgentQLcomposio: () => import("@/icons/AgentQLcomposio").then((mod) => ({ default: mod.AgentqlIcon })), | |
| // … remaining mappings … |
🤖 Prompt for AI Agents
In src/frontend/src/icons/AgentQLcomposio/index.tsx lines 1-9, the icon
component exists but the lazy loader mapping is missing; update
src/frontend/src/icons/lazyIconImports.ts to add an entry in lazyIconsMapping
for the backend key "AgentQLcomposio" that lazily imports this component
(pointing to "src/frontend/src/icons/AgentQLcomposio" or the relative path used
by the other mappings) so the icon is loaded via the same lazy mechanism, and
confirm the backend uses the exact key "AgentQLcomposio" (case-sensitive) to
match this mapping.
| const Icon = (props) => ( | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| viewBox="0 0 512 512" | ||
| width="512" | ||
| height="512" | ||
| {...props} | ||
| > | ||
| <g fill="None" fillOpacity="0.0" stroke="#0061FE" strokeOpacity="1.00" strokeWidth="0.3"><path d=" |
There was a problem hiding this comment.
Add dark‑mode support (isDark) or document exception for brand logo.
Guidelines require icon components to support isDark. If this brand mark must stay colored, at least ensure neutrals (whites/blacks) adapt or document the exception; otherwise parts may vanish in dark themes. As per coding guidelines.
🤖 Prompt for AI Agents
In src/frontend/src/icons/Agiled/agiled.jsx around lines 1 to 9, the SVG
component doesn't support the required isDark handling so parts can disappear in
dark themes; either implement an isDark prop (default false) and use it to
switch neutral fills/strokes (e.g., use black/white or theme token variables)
while preserving brand colors for parts that must remain colored, or add a clear
comment/documentation at the top of the file explaining this icon is a branded
exception and will not invert for dark mode; if implementing isDark, accept it
in props, compute stroke/fill values conditionally, and ensure those neutral
attributes use the conditional values instead of hardcoded white/black so the
icon remains visible in both themes.
| import React, { forwardRef } from "react"; | ||
| import AgiledIconSVG from "./agiled"; | ||
|
|
||
| export const AgiledIcon = forwardRef< | ||
| SVGSVGElement, | ||
| React.PropsWithChildren<{}> | ||
| >((props, ref) => { | ||
| return <AgiledIconSVG ref={ref} {...props} />; | ||
| }); No newline at end of file |
There was a problem hiding this comment.
🧩 Analysis chain
Forward-ref wrapper matches repo pattern; verify inner SVG accepts the ref.
LGTM on structure and typing. Please confirm that ./agiled attaches the ref to the root (i.e., it itself uses forwardRef); otherwise the forwarded ref won’t bind to a DOM node.
Run the checks below:
🏁 Script executed:
#!/bin/bash
# 1) Confirm the inner SVG component is ref-aware
rg -n "forwardRef" src/frontend/src/icons/Agiled
rg -nP '(?s)<svg\b' src/frontend/src/icons/Agiled/agiled.jsx -n -C1 || true
# 2) Ensure lazyIconImports has a key "Agiled" matching backend icon strings
fd -a lazyIconImports.ts src | xargs -I{} rg -n "Agiled" {}
# 3) Cross-check backend icon strings vs frontend keys
rg -nP '^\s*icon\s*=\s*"' src/lfx/src/lfx/components/composio | sed 's/.*icon\s*=\s*"\(.*\)".*/\1/' | sort -u
fd -td src/frontend/src/icons | sed 's#.*/icons/##' | sort -uLength of output: 1057
Ensure agiled.jsx forwards refs to the <svg>
The AgiledIcon wrapper uses forwardRef, but src/frontend/src/icons/Agiled/agiled.jsx is a plain functional component that doesn’t accept or attach refs; update it to use React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>((props, ref) => <svg ref={ref} {...props}>…).
lazyIconImportsentry"Agiled"correctly matches the backend icon names.- (Optional) assign
AgiledIcon.displayName = "AgiledIcon"for clearer DevTools naming.
| const Icon = (props) => ( | ||
| <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 439 277" {...props}> | ||
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 21.78 5 43.56 5 66 C4.34 66 3.68 66 3 66 C3.165 66.7425 3.33 67.485 3.5 68.25 C4.45720697 75.42905226 4.57740133 82.90169402 3 90 C3.66 90 4.32 90 5 90 C5 111.45 5 132.9 5 155 C3.35 155.33 1.7 155.66 0 156 C-0.33 137.19 -0.66 118.38 -1 99 C-3.475 101.97 -3.475 101.97 -6 105 C-5.67 105.33 -5.34 105.66 -5 106 C-4.90673284 107.56547048 -4.88254418 109.13512772 -4.88647461 110.70336914 C-4.88658791 112.20481224 -4.88658791 112.20481224 -4.88670349 113.73658752 C-4.89186478 114.8251152 -4.89702606 115.91364288 -4.90234375 117.03515625 C-4.9037587 118.14354355 -4.90517365 119.25193085 -4.90663147 120.39390564 C-4.91224967 123.95013069 -4.92480525 127.50629383 -4.9375 131.0625 C-4.94251266 133.46679597 -4.94707597 135.87109292 -4.95117188 138.27539062 C-4.96222501 144.18361504 -4.97898083 150.0918031 -5 156 C-6.65 156 -8.3 156 -10 156 C-10.33 140.49 -10.66 124.98 -11 109 C-15.14970883 111.42219876 -15.14970883 111.42219876 -15.48101807 114.33488464 C-15.47213562 115.25199722 -15.46325317 116.1691098 -15.45410156 117.11401367 C-15.45379944 118.15486618 -15.45349731 119.19571869 -15.45318604 120.26811218 C-15.43254089 121.39006485 -15.41189575 122.51201752 -15.390625 123.66796875 C-15.38213531 125.39289299 -15.38213531 125.39289299 -15.37347412 127.15266418 C-15.35105474 130.8313634 -15.3008458 134.50909437 -15.25 138.1875 C-15.2299423 140.67902241 -15.21169026 143.17056006 -15.1953125 145.66210938 C-15.15117166 151.77507084 -15.08420349 157.88746626 -15 164 C-16.65 164 -18.3 164 -20 164 C-20 147.5 -20 131 -20 114 C-22.475 114.495 -22.475 114.495 -25 115 C-25 131.17 -25 147.34 -25 164 C-26.65 164 -28.3 164 -30 164 C-30 147.83 -30 131.66 -30 115 C-31.65 115 -33.3 115 -35 115 C-35 135.13 -35 155.26 -35 176 C-36.65 176 -38.3 176 -40 176 C-40 155.87 -40 135.74 -40 115 C-41.65 114.34 -43.3 113.68 -45 113 C-45 124.55 -45 136.1 -45 148 C-46.32 148 -47.64 148 -49 148 C-49 135.79 -49 123.58 -49 111 C-50.65 110.34 -52.3 109.68 -54 109 C-54.33 121.21 -54.66 133.42 -55 146 C-56.32 145.67 -57.64 145.34 -59 145 C-58.97905273 143.81446533 -58.95810547 142.62893066 -58.93652344 141.4074707 C-58.86400669 137.00004196 -58.81815785 132.59266574 -58.78027344 128.18481445 C-58.76018454 126.2787997 -58.73290806 124.37284638 -58.69824219 122.46704102 C-58.64960358 119.72396674 -58.62700421 116.98170875 -58.609375 114.23828125 C-58.57840729 112.96456413 -58.57840729 112.96456413 -58.54681396 111.66511536 C-58.54651184 110.86466293 -58.54620972 110.06421051 -58.54589844 109.23950195 C-58.53701599 108.54000931 -58.52813354 107.84051666 -58.51898193 107.11982727 C-59.00983765 104.24216784 -59.00983765 104.24216784 -63 100 C-63.33 113.53 -63.66 127.06 -64 141 C-65.65 141.33 -67.3 141.66 -69 142 C-69 99.76 -69 57.52 -69 14 C-67.35 14 -65.7 14 -64 14 C-63.67 27.86 -63.34 41.72 -63 56 C-60.69 53.36 -58.38 50.72 -56 48 C-53.69 46.68 -51.38 45.36 -49 44 C-49 31.79 -49 19.58 -49 7 C-47.68 7 -46.36 7 -45 7 C-45 18.55 -45 30.1 -45 42 C-42.03 41.505 -42.03 41.505 -39 41 C-26.81398745 40.19584689 -16.4784057 41.86604901 -7 50 C-5.02 52.31 -3.04 54.62 -1 57 C-0.67 38.19 -0.34 19.38 0 0 Z M-38 55 C-37.01 55.33 -36.02 55.66 -35 56 C-35 70.19 -35 84.38 -35 99 C-36.65 99 -38.3 99 -40 99 C-36.877998 101.08133467 -36.06733011 101.2737822 -32.5 101.25 C-31.33984375 101.25773437 -31.33984375 101.25773437 -30.15625 101.265625 C-27.70486156 101.12738062 -27.70486156 101.12738062 -25 99 C-26.65 99 -28.3 99 -30 99 C-30 84.81 -30 70.62 -30 56 C-29.01 55.67 -28.02 55.34 -27 55 C-30.63 55 -34.26 55 -38 55 Z M-49 62 C-53.8462411 68.38385867 -54.82404795 75.19443471 -54 83 C-52.32622442 88.76724847 -49.72647147 93.19576686 -45 97 C-43.35 97.66 -41.7 98.32 -40 99 C-39.67 84.81 -39.34 70.62 -39 56 C-42.96525573 56 -46.17567701 59.44412751 -49 62 Z M-26 56 C-25.67 70.19 -25.34 84.38 -25 99 C-20.19695965 97.45957252 -20.19695965 97.45957252 -18 95 C-18.66 95 -19.32 95 -20 95 C-20 83.78 -20 72.56 -20 61 C-19.34 60.67 -18.68 60.34 -18 60 C-21.66980204 57.08828211 -21.66980204 57.08828211 -26 56 Z M-65 57 C-64 59 -64 59 -64 59 Z M-66 59 C-65 61 -65 61 -65 61 Z M0 59 C1 61 1 61 1 61 Z M-67 61 C-66 63 -66 63 -66 63 Z M1 61 C2 63 2 63 2 63 Z M-68 64 C-67 66 -67 66 -67 66 Z M2 64 C3 66 3 66 3 66 Z M-15 66 C-15.33 74.58 -15.66 83.16 -16 92 C-11.75950544 87.75950544 -11.15521222 83.95567398 -10.6875 78.0625 C-10.78326037 73.61399565 -12.25925139 70.06174675 -14 66 C-14.33 66 -14.66 66 -15 66 Z M-17 92 C-17 95 -17 95 -17 95 Z " fill="#4466A3" transform="translate(178,61)"/> | ||
| <path d="M0 0 C1.32 0 2.64 0 4 0 C4.33 36.3 4.66 72.6 5 110 C6.98 105.05 8.96 100.1 11 95 C10.34 95 9.68 95 9 95 C9 71.9 9 48.8 9 25 C10.65 25 12.3 25 14 25 C14.33 44.8 14.66 64.6 15 85 C15.99 83.02 16.98 81.04 18 79 C20.43934225 78.86498106 22.87124104 78.76596103 25.3125 78.6875 C26.00279297 78.64560547 26.69308594 78.60371094 27.40429688 78.56054688 C29.42578125 78.51171875 29.42578125 78.51171875 33 79 C35.5844074 82.07408459 36.48643431 85.21608576 38 89 C38.33 65.9 38.66 42.8 39 19 C40.65 19 42.3 19 44 19 C44 45.73 44 72.46 44 100 C43.34 100 42.68 100 42 100 C43.98 104.95 45.96 109.9 48 115 C48.33 84.31 48.66 53.62 49 22 C50.65 22.33 52.3 22.66 54 23 C54 56.66 54 90.32 54 125 C53.34 125 52.68 125 52 125 C53.98 129.95 55.96 134.9 58 140 C58.33 110.96 58.66 81.92 59 52 C60.32 52 61.64 52 63 52 C63 93.58 63 135.16 63 178 C61.68 178 60.36 178 59 178 C59 169.09 59 160.18 59 151 C54.38 150.67 49.76 150.34 45 150 C44.67 169.8 44.34 189.6 44 210 C42.35 210 40.7 210 39 210 C38.97684592 200.66418209 38.95906924 191.32837403 38.94818783 181.99253368 C38.94296573 177.65769119 38.93588024 173.32286831 38.92456055 168.98803711 C38.91370783 164.80593485 38.90771808 160.62385148 38.90512276 156.44173622 C38.90327282 154.84491999 38.89966045 153.24810482 38.89426994 151.65129662 C38.8870279 149.41749194 38.8860104 147.18376567 38.88647461 144.94995117 C38.884254 143.67754074 38.88203339 142.40513031 38.87974548 141.09416199 C39 138 39 138 40 135 C31.42 135.33 22.84 135.66 14 136 C14 158.44 14 180.88 14 204 C12.35 204 10.7 204 9 204 C8.505 175.29 8.505 175.29 8 146 C7.01 147.98 7.01 147.98 6 150 C0.72 150 -4.56 150 -10 150 C-9.67 148.35 -9.34 146.7 -9 145 C-9.33 145 -9.66 145 -10 145 C-10 109.36 -10 73.72 -10 37 C-8.68 37 -7.36 37 -6 37 C-5.67 69.67 -5.34 102.34 -5 136 C-1.13603149 125.95368187 0.73176592 120.30811433 0.56762695 110.2331543 C0.56835709 109.03156677 0.56908722 107.82997925 0.56983948 106.59197998 C0.56698242 103.3424065 0.54216179 100.093954 0.50696969 96.84460044 C0.47540403 93.43208048 0.47275196 90.01953125 0.46684265 86.60688782 C0.45139181 80.16494949 0.41048444 73.72344278 0.3600952 67.28169328 C0.30392616 59.93939209 0.2766465 52.59706871 0.25161803 45.25460565 C0.19955884 30.16949791 0.11179032 15.08479242 0 0 Z M13 88 C14 90 14 90 14 90 Z M12 90 C13 92 13 92 13 92 Z M39 92 C40 94 40 94 40 94 Z M11 93 C12 95 12 95 12 95 Z M40 95 C41 97 41 97 41 97 Z M25 98 C24.46770674 99.26607607 23.94955456 100.53810412 23.4375 101.8125 C23.14746094 102.52019531 22.85742188 103.22789063 22.55859375 103.95703125 C21.74936976 106.1735067 21.74936976 106.1735067 23 109 C23.22179785 110.89212737 23.40614015 112.78884472 23.5625 114.6875 C23.64628906 115.68136719 23.73007812 116.67523438 23.81640625 117.69921875 C23.87699219 118.45847656 23.93757813 119.21773437 24 120 C22.35 120 20.7 120 19 120 C18.67 119.01 18.34 118.02 18 117 C17.67 118.65 17.34 120.3 17 122 C22.61 122 28.22 122 34 122 C33.67 121.01 33.34 120.02 33 119 C31.68 119.33 30.36 119.66 29 120 C29.875 113.25 29.875 113.25 31 111 C30.26711523 108.76398294 29.44009385 106.55828225 28.5625 104.375 C28.08941406 103.18648438 27.61632812 101.99796875 27.12890625 100.7734375 C26.57009766 99.40058594 26.57009766 99.40058594 26 98 C25.67 98 25.34 98 25 98 Z M21 109 C22 111 22 111 22 111 Z M20 112 C21 114 21 114 21 114 Z M3 113 C4 115 4 115 4 115 Z M31 113 C32 115 32 115 32 115 Z M19 114 C20 117 20 117 20 117 Z M2 116 C3 118 3 118 3 118 Z M32 116 C33 118 33 118 33 118 Z M1 118 C2 120 2 120 2 120 Z M49 118 C50 120 50 120 50 120 Z M50 120 C51 122 51 122 51 122 Z M51 123 C52 125 52 125 52 125 Z M10 138 C11 140 11 140 11 140 Z M-7 139 C-6 141 -6 141 -6 141 Z M41 140 C42 142 42 142 42 142 Z M-8 141 C-7 143 -7 143 -7 143 Z M9 141 C10 143 10 143 10 143 Z M42 143 C43 145 43 145 43 145 Z M59 143 C60 145 60 145 60 145 Z M60 146 C61 148 61 148 61 148 Z " fill="#4467A3" transform="translate(326,24)"/> | ||
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 39.66666667 5 79.33333333 5 119 C5.99 120.485 5.99 120.485 7 122 C7.33 107.81 7.66 93.62 8 79 C12.95 79 17.9 79 23 79 C23 102.43 23 125.86 23 150 C18.05 150 13.1 150 8 150 C7.01 149.01 7.01 149.01 6 148 C5.67 174.73 5.34 201.46 5 229 C3.35 229 1.7 229 0 229 C0 199.33333333 0 169.66666667 0 140 C-1.54119651 137.70585252 -3.11372981 135.47459205 -4.75 133.25 C-5.64154771 132.02671361 -6.53218213 130.80276107 -7.421875 129.578125 C-7.81987305 129.03575195 -8.21787109 128.49337891 -8.62792969 127.93457031 C-10.4757041 125.32927415 -12.22827 122.657595 -14 120 C-14.33 138.81 -14.66 157.62 -15 177 C-16.65 176.67 -18.3 176.34 -20 176 C-20 154.66666667 -20 133.33333333 -20 112 C-21.32 110.35 -22.64 108.7 -24 107 C-24.33 121.19 -24.66 135.38 -25 150 C-29.95 150 -34.9 150 -40 150 C-40 126.57 -40 103.14 -40 79 C-35.05 79 -30.1 79 -25 79 C-23.68 80.65 -22.36 82.3 -21 84 C-20.67 73.77 -20.34 63.54 -20 53 C-18.35 53 -16.7 53 -15 53 C-15.0314209 54.73286255 -15.0314209 54.73286255 -15.06347656 56.50073242 C-15.13600398 60.79634148 -15.18184593 65.09189665 -15.21972656 69.38793945 C-15.23981305 71.24545398 -15.26708778 73.10290551 -15.30175781 74.96020508 C-15.35040737 77.63378463 -15.37299809 80.30652656 -15.390625 82.98046875 C-15.41127014 83.80773972 -15.43191528 84.63501068 -15.45318604 85.48735046 C-15.45363922 86.65799797 -15.45363922 86.65799797 -15.45410156 87.85229492 C-15.46298401 88.53402267 -15.47186646 89.21575043 -15.48101807 89.9181366 C-14.98221939 92.76171177 -14.98221939 92.76171177 -11 97 C-10.67 81.82 -10.34 66.64 -10 51 C-8.35 51 -6.7 51 -5 51 C-5.01332367 52.0169117 -5.01332367 52.0169117 -5.0269165 53.05436707 C-5.1154149 60.11078459 -5.17574506 67.16704445 -5.21972656 74.22387695 C-5.23984098 76.85740563 -5.26713604 79.49088966 -5.30175781 82.12426758 C-5.35028088 85.90978007 -5.37297112 89.694702 -5.390625 93.48046875 C-5.41127014 94.65772018 -5.43191528 95.83497162 -5.45318604 97.04789734 C-5.45348816 98.14866104 -5.45379028 99.24942474 -5.45410156 100.38354492 C-5.46742523 101.83249397 -5.46742523 101.83249397 -5.48101807 103.31071472 C-5.0965408 106.69496426 -5.0965408 106.69496426 -1 111 C-0.67 74.37 -0.34 37.74 0 0 Z " fill="#4467A2" transform="translate(286,24)"/> | ||
| <path d="M0 0 C2.0625 0.4375 2.0625 0.4375 4 1 C4.02527062 7.39037231 4.04283317 13.78073183 4.05493164 20.17114258 C4.05997308 22.34692873 4.06680607 24.52271147 4.07543945 26.69848633 C4.08751338 29.81853067 4.09323005 32.93853038 4.09765625 36.05859375 C4.10281754 37.03775253 4.10797882 38.01691132 4.11329651 39.02574158 C4.11337204 39.92659988 4.11344757 40.82745819 4.11352539 41.75561523 C4.115746 42.55281479 4.11796661 43.35001434 4.12025452 44.17137146 C4 46 4 46 3 47 C4.65 48.65 6.3 50.3 8 52 C8.33 34.84 8.66 17.68 9 0 C11.475 0.495 11.475 0.495 14 1 C14.02312283 12.06534858 14.04091478 23.13069145 14.05181217 34.19605923 C14.05704113 39.33359566 14.06413901 44.47111563 14.07543945 49.60864258 C14.08626787 54.5623141 14.09227674 59.51596974 14.09487724 64.46965218 C14.09673157 66.36397616 14.10035234 68.25829924 14.10573006 70.1526165 C14.11293989 72.79634386 14.11399097 75.44000471 14.11352539 78.08374023 C14.11712067 78.87495773 14.12071594 79.66617523 14.12442017 80.48136902 C14.11405216 85.88594784 14.11405216 85.88594784 13 87 C12.90090698 89.33160055 12.87029496 91.66629942 12.875 94 C12.87242188 95.27875 12.86984375 96.5575 12.8671875 97.875 C12.64139107 100.86687244 12.64139107 100.86687244 14 102 C14.0935919 103.71865409 14.11744611 105.44115744 14.11352539 107.16235352 C14.11344986 108.26341934 14.11337433 109.36448517 14.11329651 110.49891663 C14.10813522 111.6968132 14.10297394 112.89470978 14.09765625 114.12890625 C14.0962413 115.34827377 14.09482635 116.5676413 14.09336853 117.82395935 C14.08774967 121.7368307 14.07519396 125.64964581 14.0625 129.5625 C14.05748743 132.20768147 14.0529241 134.85286383 14.04882812 137.49804688 C14.03777411 143.99871726 14.02101764 150.49935461 14 157 C12.35 157 10.7 157 9 157 C8.67 141.16 8.34 125.32 8 109 C3.94590682 112.3397157 3.94590682 112.3397157 3.51898193 115.15142822 C3.52786438 115.92420105 3.53674683 116.69697388 3.54589844 117.49316406 C3.54620056 118.37377502 3.54650269 119.25438599 3.54681396 120.16168213 C3.56745911 121.10348328 3.58810425 122.04528442 3.609375 123.015625 C3.61786469 124.47207428 3.61786469 124.47207428 3.62652588 125.95794678 C3.64889689 129.05580169 3.69909527 132.15249533 3.75 135.25 C3.77006403 137.35154578 3.78831497 139.45310972 3.8046875 141.5546875 C3.8487642 146.7035717 3.91779742 151.85158903 4 157 C2.35 156.67 0.7 156.34 -1 156 C-1 142.14 -1 128.28 -1 114 C-13.21 114 -25.42 114 -38 114 C-38 90.57 -38 67.14 -38 43 C-8 43 -8 43 -1 44 C-1.00523682 42.70263916 -1.01047363 41.40527832 -1.01586914 40.06860352 C-1.03391469 35.27352585 -1.04543037 30.4784512 -1.05493164 25.68334961 C-1.05997288 23.60456844 -1.06680574 21.52579084 -1.07543945 19.44702148 C-1.08751422 16.46597414 -1.09323024 13.48497351 -1.09765625 10.50390625 C-1.10539818 9.10078941 -1.10539818 9.10078941 -1.11329651 7.66932678 C-1.11337204 6.80850998 -1.11344757 5.94769318 -1.11352539 5.06079102 C-1.115746 4.29912125 -1.11796661 3.53745148 -1.12025452 2.75270081 C-1 1 -1 1 0 0 Z M9 53 C10 55 10 55 10 55 Z M-24 55 C-24 60.61 -24 66.22 -24 72 C-21.916875 72.04125 -19.83375 72.0825 -17.6875 72.125 C-16.51574219 72.14820313 -15.34398437 72.17140625 -14.13671875 72.1953125 C-10.83606339 72.25320618 -10.83606339 72.25320618 -8 70 C-8.99 70 -9.98 70 -11 70 C-11 65.71 -11 61.42 -11 57 C-10.34 56.67 -9.68 56.34 -9 56 C-13.90068963 54.36643679 -18.85738476 54.94470306 -24 55 Z M10 56 C11 59 11 59 11 59 Z M-6 59 C-6 61.97 -6 64.94 -6 68 C-5.34 67.34 -4.68 66.68 -4 66 C-4.32326553 62.40320934 -4.32326553 62.40320934 -5 59 C-5.33 59 -5.66 59 -6 59 Z M11 60 C11 62.31 11 64.62 11 67 C11.33 67 11.66 67 12 67 C12 64.69 12 62.38 12 60 C11.67 60 11.34 60 11 60 Z M10 68 C11 70 11 70 11 70 Z M9 70 C10 72 10 72 10 72 Z M8 72 C6.63823419 73.98075027 5.30406884 75.98079663 4 78 C6.97 79.98 6.97 79.98 10 82 C9.67 78.7 9.34 75.4 9 72 C8.67 72 8.34 72 8 72 Z M11 83 C12 85 12 85 12 85 Z M-24 84 C-24 89.61 -24 95.22 -24 101 C-19.9471875 101.1546875 -19.9471875 101.1546875 -15.8125 101.3125 C-14.54950073 101.38078003 -14.54950073 101.38078003 -13.26098633 101.45043945 C-9.04349545 101.52814195 -7.44773185 101.34565827 -3.984375 98.671875 C-1.79078581 96.12894612 -1.79078581 96.12894612 -1.4375 92.9375 C-1.82483865 89.42649279 -1.82483865 89.42649279 -6 86 C-6 90.29 -6 94.58 -6 99 C-7.65 99.33 -9.3 99.66 -11 100 C-11 95.05 -11 90.1 -11 85 C-10.34 84.67 -9.68 84.34 -9 84 C-13.95 84 -18.9 84 -24 84 Z M9 106 C10 108 10 108 10 108 Z " fill="#4567A3" transform="translate(90,60)"/> | ||
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 26.73 5 53.46 5 81 C3.68 81 2.36 81 1 81 C0.505 81.99 0.505 81.99 0 83 C9.9 83 19.8 83 30 83 C30 87.29 30 91.58 30 96 C15.15 96 0.3 96 -15 96 C-15 72.57 -15 49.14 -15 25 C-10.05 25 -5.1 25 0 25 C0 16.75 0 8.5 0 0 Z " fill="#4567A3" transform="translate(207,78)"/> | ||
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 55.44 5 110.88 5 168 C3.35 168 1.7 168 0 168 C0 112.56 0 57.12 0 0 Z " fill="#4367A3" transform="translate(40,55)"/> | ||
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 40.59 5 81.18 5 123 C3.35 123 1.7 123 0 123 C0 82.41 0 41.82 0 0 Z " fill="#4367A2" transform="translate(10,77)"/> | ||
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 39.27 5 78.54 5 119 C3.35 119 1.7 119 0 119 C0 79.73 0 40.46 0 0 Z " fill="#4466A3" transform="translate(394,79)"/> | ||
| <path d="M0 0 C2.475 0.495 2.475 0.495 5 1 C5 15.85 5 30.7 5 46 C3.68 46 2.36 46 1 46 C1 70.09 1 94.18 1 119 C2.32 119 3.64 119 5 119 C5 133.85 5 148.7 5 164 C3.35 164.33 1.7 164.66 0 165 C0 110.55 0 56.1 0 0 Z " fill="#4668A4" transform="translate(50,56)"/> | ||
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 33.66 5 67.32 5 102 C3.35 102 1.7 102 0 102 C0 68.34 0 34.68 0 0 Z " fill="#4467A3" transform="translate(296,175)"/> | ||
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 33.33 5 66.66 5 101 C3.02 101.495 3.02 101.495 1 102 C-0.95365306 100.04634694 -0.12022124 97.06600248 -0.12442017 94.46598816 C-0.12082489 93.52515884 -0.11722961 92.58432953 -0.11352539 91.61499023 C-0.11367142 90.62973358 -0.11381744 89.64447693 -0.1139679 88.62936401 C-0.11326832 85.35575193 -0.10547385 82.08219596 -0.09765625 78.80859375 C-0.09579223 76.54557832 -0.09436825 74.28256249 -0.09336853 72.01954651 C-0.0895421 66.05021052 -0.07971075 60.08089868 -0.06866455 54.11157227 C-0.05845312 48.02555671 -0.05387149 41.93953727 -0.04882812 35.85351562 C-0.03808859 23.90233311 -0.02101068 11.95116856 0 0 Z " fill="#4467A2" transform="translate(30,88)"/> | ||
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 33.33 5 66.66 5 101 C3.35 101 1.7 101 0 101 C0 67.67 0 34.34 0 0 Z " fill="#4367A3" transform="translate(296,1)"/> | ||
| <path d="M0 0 C1.32 0 2.64 0 4 0 C4 41.58 4 83.16 4 126 C2.68 126 1.36 126 0 126 C0 117.09 0 108.18 0 99 C0.99 98.505 0.99 98.505 2 98 C1.67468292 97.03368149 1.34936584 96.06736298 1.01419067 95.07176208 C-0.24331198 90.64211989 -0.26691934 86.43024127 -0.22705078 81.85180664 C-0.22734283 80.96320953 -0.22763489 80.07461243 -0.22793579 79.15908813 C-0.22655033 76.24267572 -0.21102617 73.32652365 -0.1953125 70.41015625 C-0.19157958 68.37991984 -0.18873393 66.34968161 -0.18673706 64.31944275 C-0.17912256 58.9913124 -0.15949286 53.66329212 -0.1373291 48.33520508 C-0.11682358 42.89210499 -0.10772529 37.44898701 -0.09765625 32.00585938 C-0.07624488 21.33719139 -0.04213535 10.66860487 0 0 Z " fill="#5071A8" transform="translate(385,76)"/> | ||
| <path d="M0 0 C2.475 0.495 2.475 0.495 5 1 C5 32.68 5 64.36 5 97 C3.35 97 1.7 97 0 97 C0 64.99 0 32.98 0 0 Z " fill="#4769A3" transform="translate(20,90)"/> | ||
| <path d="M0 0 C1.32 0 2.64 0 4 0 C4 38.28 4 76.56 4 116 C3.34 116 2.68 116 2 116 C1.34 117.32 0.68 118.64 0 120 C0 80.4 0 40.8 0 0 Z " fill="#4D6EA8" transform="translate(326,24)"/> | ||
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 29.37 5 58.74 5 89 C3.35 89 1.7 89 0 89 C0 59.63 0 30.26 0 0 Z " fill="#4467A2" transform="translate(414,94)"/> | ||
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 29.37 5 58.74 5 89 C3.35 89 1.7 89 0 89 C0 59.63 0 30.26 0 0 Z " fill="#4568A3" transform="translate(404,94)"/> | ||
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 29.04 5 58.08 5 88 C3.35 88 1.7 88 0 88 C0 58.96 0 29.92 0 0 Z " fill="#4467A3" transform="translate(306,175)"/> | ||
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 29.04 5 58.08 5 88 C3.35 88 1.7 88 0 88 C0 58.96 0 29.92 0 0 Z " fill="#4467A3" transform="translate(306,14)"/> | ||
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 30.69 5 61.38 5 93 C3.35 93 1.7 93 0 93 C-0.02698189 91.37509046 -0.04638757 89.75005367 -0.0625 88.125 C-0.07410156 87.22007812 -0.08570313 86.31515625 -0.09765625 85.3828125 C0 83 0 83 1 81 C1.0962762 78.98103136 1.12981825 76.9587571 1.125 74.9375 C1.12757813 73.85339844 1.13015625 72.76929688 1.1328125 71.65234375 C1.30118564 69.07756602 1.30118564 69.07756602 0 68 C-0.0942174 65.88318683 -0.11742761 63.76319242 -0.11352539 61.64428711 C-0.11367142 60.98089828 -0.11381744 60.31750946 -0.1139679 59.63401794 C-0.11326881 57.43176044 -0.10547665 55.22958655 -0.09765625 53.02734375 C-0.09579206 51.50419664 -0.09436816 49.98104893 -0.09336853 48.457901 C-0.08954346 44.44162349 -0.07971328 40.42538192 -0.06866455 36.40911865 C-0.05845019 32.31376634 -0.05387086 28.21840824 -0.04882812 24.12304688 C-0.038091 16.08201472 -0.02101472 8.04101183 0 0 Z " fill="#4367A3" transform="translate(237,92)"/> | ||
| <path d="M0 0 C1.32 0 2.64 0 4 0 C4.02316181 13.21279116 4.04093472 26.4255775 4.05181217 39.63838482 C4.05703257 45.77349756 4.06411499 51.90859642 4.07543945 58.04370117 C4.08629819 63.9634852 4.0922832 69.88325587 4.09487724 75.80304909 C4.09672609 78.06249006 4.10033637 80.32193029 4.10573006 82.58136559 C4.11298005 85.74395711 4.11398926 88.90649331 4.11352539 92.0690918 C4.11712067 93.00489075 4.12071594 93.9406897 4.12442017 94.90484619 C4.11780785 99.06617455 4.06389138 102.94365682 3 107 C1.515 107.495 1.515 107.495 0 108 C0 72.36 0 36.72 0 0 Z " fill="#4D6EA8" transform="translate(316,61)"/> | ||
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 27.06 5 54.12 5 82 C3.35 82 1.7 82 0 82 C0 54.94 0 27.88 0 0 Z " fill="#4467A2" transform="translate(227,77)"/> | ||
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 26.4 5 52.8 5 80 C3.35 80 1.7 80 0 80 C0 53.6 0 27.2 0 0 Z " fill="#4467A2" transform="translate(345,160)"/> | ||
| <path d="M0 0 C1.32 0 2.64 0 4 0 C4 38.94 4 77.88 4 118 C2.68 118 1.36 118 0 118 C0 79.06 0 40.12 0 0 Z " fill="#496AA5" transform="translate(188,80)"/> | ||
| <path d="M0 0 C1.98 0.495 1.98 0.495 4 1 C4 27.07 4 53.14 4 80 C2.35 80 0.7 80 -1 80 C-1.02312376 69.71695462 -1.04091525 59.43391538 -1.05181217 49.15084934 C-1.05704093 44.3765172 -1.06413844 39.60220279 -1.07543945 34.82788086 C-1.0862686 30.22433738 -1.09227689 25.62081101 -1.09487724 21.01725578 C-1.09673144 19.25690377 -1.10035196 17.49655274 -1.10573006 15.73620796 C-1.11294086 13.27927723 -1.11399093 10.82241805 -1.11352539 8.36547852 C-1.11712067 7.63036545 -1.12071594 6.89525238 -1.12442017 6.13786316 C-1.11405216 1.11405216 -1.11405216 1.11405216 0 0 Z " fill="#4367A3" transform="translate(218,79)"/> | ||
| <path d="M0 0 C1.32 0.33 2.64 0.66 4 1 C4 32.68 4 64.36 4 97 C2.68 97 1.36 97 0 97 C0 64.99 0 32.98 0 0 Z " fill="#5171A9" transform="translate(1,90)"/> | ||
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 25.41 5 50.82 5 77 C3.35 77 1.7 77 0 77 C0 51.59 0 26.18 0 0 Z " fill="#4467A2" transform="translate(424,100)"/> | ||
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 25.08 5 50.16 5 76 C2.525 76.495 2.525 76.495 0 77 C0 51.59 0 26.18 0 0 Z " fill="#4467A3" transform="translate(434,100)"/> | ||
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 24.42 5 48.84 5 74 C3.35 73.67 1.7 73.34 0 73 C0 48.91 0 24.82 0 0 Z " fill="#4367A2" transform="translate(69,175)"/> | ||
| <path d="M0 0 C1.32 0 2.64 0 4 0 C4 24.42 4 48.84 4 74 C2.35 74 0.7 74 -1 74 C-1.02312484 64.49925675 -1.0409158 54.99852312 -1.05181217 45.49775791 C-1.05704069 41.08662996 -1.06413777 36.6755212 -1.07543945 32.2644043 C-1.08626944 28.01098885 -1.09227707 23.75759191 -1.09487724 19.50416374 C-1.09673129 17.87778367 -1.10035152 16.25140466 -1.10573006 14.62503242 C-1.11294198 12.35489807 -1.11399088 10.08484115 -1.11352539 7.81469727 C-1.115746 6.52008072 -1.11796661 5.22546417 -1.12025452 3.89161682 C-1 1 -1 1 0 0 Z " fill="#4367A2" transform="translate(70,28)"/> | ||
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 22.11 5 44.22 5 67 C3.35 67 1.7 67 0 67 C0 44.89 0 22.78 0 0 Z " fill="#4367A3" transform="translate(355,160)"/> | ||
| <path d="M0 0 C1.32 0 2.64 0 4 0 C4 21.45 4 42.9 4 65 C2.35 65 0.7 65 -1 65 C-1.02312684 56.67271053 -1.04091683 48.34543437 -1.05181217 40.01812077 C-1.05704026 36.15179882 -1.06413654 32.28549879 -1.07543945 28.41918945 C-1.086271 24.69096599 -1.0922774 20.96276366 -1.09487724 17.23452568 C-1.09673101 15.80910344 -1.10035071 14.38368241 -1.10573006 12.95826912 C-1.11294393 10.96836592 -1.11340808 8.97844166 -1.11352539 6.98852539 C-1.115746 5.85379288 -1.11796661 4.71906036 -1.12025452 3.54994202 C-1 1 -1 1 0 0 Z " fill="#4367A2" transform="translate(346,37)"/> | ||
| <path d="M0 0 C1.32 0 2.64 0 4 0 C4 25.74 4 51.48 4 78 C2.68 78 1.36 78 0 78 C0 52.26 0 26.52 0 0 Z " fill="#4E70A8" transform="translate(326,175)"/> | ||
| <path d="M0 0 C1.32 0 2.64 0 4 0 C4 20.13 4 40.26 4 61 C2.35 61 0.7 61 -1 61 C-1.02312792 53.19424805 -1.04091738 45.38850405 -1.05181217 37.58272648 C-1.05704002 33.9585404 -1.06413587 30.3343777 -1.07543945 26.71020508 C-1.08627184 23.21540025 -1.09227758 19.72061796 -1.09487724 16.22579765 C-1.09763551 14.23760611 -1.10544688 12.24942369 -1.11329651 10.26124573 C-1.11337204 9.06007614 -1.11344757 7.85890656 -1.11352539 6.62133789 C-1.115746 5.55766495 -1.11796661 4.493992 -1.12025452 3.39808655 C-1 1 -1 1 0 0 Z " fill="#4366A3" transform="translate(139,40)"/> | ||
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 18.15 5 36.3 5 55 C2.525 55.495 2.525 55.495 0 56 C0 37.52 0 19.04 0 0 Z " fill="#4367A2" transform="translate(375,175)"/> | ||
| <path d="M0 0 C1.98 0.495 1.98 0.495 4 1 C4 17.83 4 34.66 4 52 C2.35 52 0.7 52 -1 52 C-1.02526739 44.75513449 -1.0428318 37.51028026 -1.05493164 30.26538086 C-1.05997356 27.79857967 -1.06680691 25.33178148 -1.07543945 22.86499023 C-1.08751125 19.32795471 -1.09322956 15.79095855 -1.09765625 12.25390625 C-1.10281754 11.14350479 -1.10797882 10.03310333 -1.11329651 8.88905334 C-1.11337204 7.86807053 -1.11344757 6.84708771 -1.11352539 5.79516602 C-1.115746 4.89137711 -1.11796661 3.9875882 -1.12025452 3.05641174 C-1 1 -1 1 0 0 Z " fill="#4367A2" transform="translate(356,50)"/> | ||
| <path d="M0 0 C2.475 0.495 2.475 0.495 5 1 C5 17.83 5 34.66 5 52 C3.35 51.67 1.7 51.34 0 51 C0 34.17 0 17.34 0 0 Z " fill="#4367A2" transform="translate(158,52)"/> | ||
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 16.5 5 33 5 50 C3.35 50 1.7 50 0 50 C0 33.5 0 17 0 0 Z " fill="#4769A3" transform="translate(79,175)"/> | ||
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 16.5 5 33 5 50 C3.35 50 1.7 50 0 50 C0 33.5 0 17 0 0 Z " fill="#4367A2" transform="translate(79,52)"/> | ||
| <path d="M0 0 C1.98 0.495 1.98 0.495 4 1 C4 17.5 4 34 4 51 C0 49 0 49 -1 48 C-1.09822744 46.53194708 -1.1279837 45.0592254 -1.12939453 43.58789062 C-1.13412277 42.18138245 -1.13412277 42.18138245 -1.13894653 40.74645996 C-1.1369223 39.72669067 -1.13489807 38.70692139 -1.1328125 37.65625 C-1.13376923 36.61682251 -1.13472595 35.57739502 -1.13571167 34.50646973 C-1.13639363 32.30395446 -1.13453827 30.10143721 -1.13037109 27.89892578 C-1.12502308 24.51460281 -1.13031559 21.13041256 -1.13671875 17.74609375 C-1.13605797 15.61197887 -1.13477681 13.47786408 -1.1328125 11.34375 C-1.13483673 10.32398071 -1.13686096 9.30421143 -1.13894653 8.25354004 C-1.13579437 7.31586792 -1.13264221 6.3781958 -1.12939453 5.41210938 C-1.12859894 4.58239624 -1.12780334 3.75268311 -1.12698364 2.89782715 C-1 1 -1 1 0 0 Z " fill="#4467A3" transform="translate(169,60)"/> | ||
| <path d="M0 0 C5 5 5 5 5.60127258 7.34761047 C5.59016953 8.15369247 5.57906647 8.95977448 5.56762695 9.7902832 C5.5672493 10.71086014 5.56687164 11.63143707 5.56648254 12.57991028 C5.54067612 13.5602977 5.51486969 14.54068512 5.48828125 15.55078125 C5.48120651 16.56472458 5.47413177 17.57866791 5.46684265 18.62333679 C5.43891012 21.8538163 5.37617162 25.08254661 5.3125 28.3125 C5.28741575 30.5058343 5.26460281 32.69919584 5.24414062 34.89257812 C5.18908755 40.26231302 5.10547273 45.63103154 5 51 C3.35 50.67 1.7 50.34 0 50 C0 33.5 0 17 0 0 Z " fill="#4367A3" transform="translate(276,152)"/> | ||
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 15.84 5 31.68 5 48 C3.35 48 1.7 48 0 48 C0 32.16 0 16.32 0 0 Z " fill="#4568A3" transform="translate(148,53)"/> | ||
| <path d="M0 0 C1.32 0 2.64 0 4 0 C4 13.86 4 27.72 4 42 C2.68 42 1.36 42 0 42 C0 28.14 0 14.28 0 0 Z " fill="#4E70A8" transform="translate(316,175)"/> | ||
| <path d="M0 0 C1.32 0 2.64 0 4 0 C4 13.86 4 27.72 4 42 C2.68 42 1.36 42 0 42 C0 28.14 0 14.28 0 0 Z " fill="#4E70A8" transform="translate(60,175)"/> | ||
| <path d="M0 0 C1.32 0 2.64 0 4 0 C4 13.86 4 27.72 4 42 C2.68 42 1.36 42 0 42 C0 28.14 0 14.28 0 0 Z " fill="#4E6FA8" transform="translate(60,60)"/> | ||
| <path d="M0 0 C1.32 0.33 2.64 0.66 4 1 C4 13.87 4 26.74 4 40 C2.68 39.67 1.36 39.34 0 39 C0 26.13 0 13.26 0 0 Z " fill="#4E6EA8" transform="translate(119,167)"/> | ||
| <path d="M0 0 C1.32 0 2.64 0 4 0 C4 12.21 4 24.42 4 37 C2.68 37.66 1.36 38.32 0 39 C0 26.13 0 13.26 0 0 Z " fill="#4F70A7" transform="translate(119,71)"/> | ||
| <path d="M0 0 C1.98 0.99 1.98 0.99 4 2 C4 13.55 4 25.1 4 37 C2.68 37 1.36 37 0 37 C0 24.79 0 12.58 0 0 Z " fill="#4F6FA7" transform="translate(129,172)"/> | ||
| <path d="M0 0 C1.32 0 2.64 0 4 0 C4 11.55 4 23.1 4 35 C2.02 35.495 2.02 35.495 0 36 C0 24.12 0 12.24 0 0 Z " fill="#5070A7" transform="translate(129,68)"/> | ||
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 8.25 5 16.5 5 25 C3.35 25.33 1.7 25.66 0 26 C0 17.42 0 8.84 0 0 Z " fill="#4467A3" transform="translate(227,175)"/> | ||
| <path d="M0 0 C1.32 0 2.64 0 4 0 C4 10.56 4 21.12 4 32 C2.68 32 1.36 32 0 32 C0 21.44 0 10.88 0 0 Z " fill="#4E6FA8" transform="translate(198,175)"/> | ||
| <path d="M0 0 C0.33 0 0.66 0 1 0 C1 11.55 1 23.1 1 35 C-3 32 -3 32 -3.50170898 29.15258789 C-3.49985596 28.02071045 -3.49800293 26.88883301 -3.49609375 25.72265625 C-3.49673828 24.48708984 -3.49738281 23.25152344 -3.49804688 21.97851562 C-3.47806641 20.68623047 -3.45808594 19.39394531 -3.4375 18.0625 C-3.44458984 16.77408203 -3.45167969 15.48566406 -3.45898438 14.15820312 C-3.38697203 3.52807343 -3.38697203 3.52807343 0 0 Z " fill="#5171A9" transform="translate(132,121)"/> | ||
| <path d="M0 0 C1.32 0 2.64 0 4 0 C4 10.23 4 20.46 4 31 C2.68 31 1.36 31 0 31 C0 20.77 0 10.54 0 0 Z " fill="#4F70A8" transform="translate(198,71)"/> | ||
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 7.92 5 15.84 5 24 C3.35 24 1.7 24 0 24 C0 16.08 0 8.16 0 0 Z " fill="#4467A3" transform="translate(207,175)"/> | ||
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 7.59 5 15.18 5 23 C3.35 23 1.7 23 0 23 C0 15.41 0 7.82 0 0 Z " fill="#4367A2" transform="translate(217,175)"/> | ||
| <path d="M0 0 C1.32 0 2.64 0 4 0 C4 6.93 4 13.86 4 21 C2.68 21 1.36 21 0 21 C0 14.07 0 7.14 0 0 Z " fill="#5070A8" transform="translate(247,175)"/> | ||
| <path d="M0 0 C1.32 0 2.64 0 4 0 C4 6.6 4 13.2 4 20 C2.68 20 1.36 20 0 20 C0 13.4 0 6.8 0 0 Z " fill="#4E70A8" transform="translate(247,82)"/> | ||
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 4.95 5 9.9 5 15 C3.35 15 1.7 15 0 15 C0 10.05 0 5.1 0 0 Z " fill="#4467A3" transform="translate(69,145)"/> | ||
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 4.62 5 9.24 5 14 C3.35 14 1.7 14 0 14 C0 9.38 0 4.76 0 0 Z " fill="#4768A3" transform="translate(69,116)"/> | ||
| <path d="M0 0 C1.32 0 2.64 0 4 0 C4 3.96 4 7.92 4 12 C2.68 12 1.36 12 0 12 C0 8.04 0 4.08 0 0 Z " fill="#4E70A8" transform="translate(257,175)"/> | ||
| <path d="M0 0 C1.32 0 2.64 0 4 0 C4 3.96 4 7.92 4 12 C2.68 12 1.36 12 0 12 C0 8.04 0 4.08 0 0 Z " fill="#4F6FA8" transform="translate(257,90)"/> | ||
| <path d="M0 0 C0.99 0.495 0.99 0.495 2 1 C2.73075648 3.3140622 3.40138258 5.64828869 4 8 C2.68 8 1.36 8 0 8 C0 5.36 0 2.72 0 0 Z " fill="#5575AB" transform="translate(355,136)"/> | ||
| </svg> | ||
| ); | ||
| export default Icon; |
There was a problem hiding this comment.
Add isDark prop support for light and dark mode compatibility.
The SVG component must use the isDark prop to support both light and dark mode themes. Currently, the component uses hardcoded fill colors without theme awareness.
Based on learnings
Apply this diff to add isDark prop support:
-const Icon = (props) => (
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 439 277" {...props}>
+const Icon = ({ isDark, ...props }) => (
+ <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 439 277" {...props}>Consider updating the hardcoded fill colors to use theme-aware colors based on the isDark prop, or ensure the parent components handle theming appropriately.
📝 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.
| const Icon = (props) => ( | |
| <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 439 277" {...props}> | |
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 21.78 5 43.56 5 66 C4.34 66 3.68 66 3 66 C3.165 66.7425 3.33 67.485 3.5 68.25 C4.45720697 75.42905226 4.57740133 82.90169402 3 90 C3.66 90 4.32 90 5 90 C5 111.45 5 132.9 5 155 C3.35 155.33 1.7 155.66 0 156 C-0.33 137.19 -0.66 118.38 -1 99 C-3.475 101.97 -3.475 101.97 -6 105 C-5.67 105.33 -5.34 105.66 -5 106 C-4.90673284 107.56547048 -4.88254418 109.13512772 -4.88647461 110.70336914 C-4.88658791 112.20481224 -4.88658791 112.20481224 -4.88670349 113.73658752 C-4.89186478 114.8251152 -4.89702606 115.91364288 -4.90234375 117.03515625 C-4.9037587 118.14354355 -4.90517365 119.25193085 -4.90663147 120.39390564 C-4.91224967 123.95013069 -4.92480525 127.50629383 -4.9375 131.0625 C-4.94251266 133.46679597 -4.94707597 135.87109292 -4.95117188 138.27539062 C-4.96222501 144.18361504 -4.97898083 150.0918031 -5 156 C-6.65 156 -8.3 156 -10 156 C-10.33 140.49 -10.66 124.98 -11 109 C-15.14970883 111.42219876 -15.14970883 111.42219876 -15.48101807 114.33488464 C-15.47213562 115.25199722 -15.46325317 116.1691098 -15.45410156 117.11401367 C-15.45379944 118.15486618 -15.45349731 119.19571869 -15.45318604 120.26811218 C-15.43254089 121.39006485 -15.41189575 122.51201752 -15.390625 123.66796875 C-15.38213531 125.39289299 -15.38213531 125.39289299 -15.37347412 127.15266418 C-15.35105474 130.8313634 -15.3008458 134.50909437 -15.25 138.1875 C-15.2299423 140.67902241 -15.21169026 143.17056006 -15.1953125 145.66210938 C-15.15117166 151.77507084 -15.08420349 157.88746626 -15 164 C-16.65 164 -18.3 164 -20 164 C-20 147.5 -20 131 -20 114 C-22.475 114.495 -22.475 114.495 -25 115 C-25 131.17 -25 147.34 -25 164 C-26.65 164 -28.3 164 -30 164 C-30 147.83 -30 131.66 -30 115 C-31.65 115 -33.3 115 -35 115 C-35 135.13 -35 155.26 -35 176 C-36.65 176 -38.3 176 -40 176 C-40 155.87 -40 135.74 -40 115 C-41.65 114.34 -43.3 113.68 -45 113 C-45 124.55 -45 136.1 -45 148 C-46.32 148 -47.64 148 -49 148 C-49 135.79 -49 123.58 -49 111 C-50.65 110.34 -52.3 109.68 -54 109 C-54.33 121.21 -54.66 133.42 -55 146 C-56.32 145.67 -57.64 145.34 -59 145 C-58.97905273 143.81446533 -58.95810547 142.62893066 -58.93652344 141.4074707 C-58.86400669 137.00004196 -58.81815785 132.59266574 -58.78027344 128.18481445 C-58.76018454 126.2787997 -58.73290806 124.37284638 -58.69824219 122.46704102 C-58.64960358 119.72396674 -58.62700421 116.98170875 -58.609375 114.23828125 C-58.57840729 112.96456413 -58.57840729 112.96456413 -58.54681396 111.66511536 C-58.54651184 110.86466293 -58.54620972 110.06421051 -58.54589844 109.23950195 C-58.53701599 108.54000931 -58.52813354 107.84051666 -58.51898193 107.11982727 C-59.00983765 104.24216784 -59.00983765 104.24216784 -63 100 C-63.33 113.53 -63.66 127.06 -64 141 C-65.65 141.33 -67.3 141.66 -69 142 C-69 99.76 -69 57.52 -69 14 C-67.35 14 -65.7 14 -64 14 C-63.67 27.86 -63.34 41.72 -63 56 C-60.69 53.36 -58.38 50.72 -56 48 C-53.69 46.68 -51.38 45.36 -49 44 C-49 31.79 -49 19.58 -49 7 C-47.68 7 -46.36 7 -45 7 C-45 18.55 -45 30.1 -45 42 C-42.03 41.505 -42.03 41.505 -39 41 C-26.81398745 40.19584689 -16.4784057 41.86604901 -7 50 C-5.02 52.31 -3.04 54.62 -1 57 C-0.67 38.19 -0.34 19.38 0 0 Z M-38 55 C-37.01 55.33 -36.02 55.66 -35 56 C-35 70.19 -35 84.38 -35 99 C-36.65 99 -38.3 99 -40 99 C-36.877998 101.08133467 -36.06733011 101.2737822 -32.5 101.25 C-31.33984375 101.25773437 -31.33984375 101.25773437 -30.15625 101.265625 C-27.70486156 101.12738062 -27.70486156 101.12738062 -25 99 C-26.65 99 -28.3 99 -30 99 C-30 84.81 -30 70.62 -30 56 C-29.01 55.67 -28.02 55.34 -27 55 C-30.63 55 -34.26 55 -38 55 Z M-49 62 C-53.8462411 68.38385867 -54.82404795 75.19443471 -54 83 C-52.32622442 88.76724847 -49.72647147 93.19576686 -45 97 C-43.35 97.66 -41.7 98.32 -40 99 C-39.67 84.81 -39.34 70.62 -39 56 C-42.96525573 56 -46.17567701 59.44412751 -49 62 Z M-26 56 C-25.67 70.19 -25.34 84.38 -25 99 C-20.19695965 97.45957252 -20.19695965 97.45957252 -18 95 C-18.66 95 -19.32 95 -20 95 C-20 83.78 -20 72.56 -20 61 C-19.34 60.67 -18.68 60.34 -18 60 C-21.66980204 57.08828211 -21.66980204 57.08828211 -26 56 Z M-65 57 C-64 59 -64 59 -64 59 Z M-66 59 C-65 61 -65 61 -65 61 Z M0 59 C1 61 1 61 1 61 Z M-67 61 C-66 63 -66 63 -66 63 Z M1 61 C2 63 2 63 2 63 Z M-68 64 C-67 66 -67 66 -67 66 Z M2 64 C3 66 3 66 3 66 Z M-15 66 C-15.33 74.58 -15.66 83.16 -16 92 C-11.75950544 87.75950544 -11.15521222 83.95567398 -10.6875 78.0625 C-10.78326037 73.61399565 -12.25925139 70.06174675 -14 66 C-14.33 66 -14.66 66 -15 66 Z M-17 92 C-17 95 -17 95 -17 95 Z " fill="#4466A3" transform="translate(178,61)"/> | |
| <path d="M0 0 C1.32 0 2.64 0 4 0 C4.33 36.3 4.66 72.6 5 110 C6.98 105.05 8.96 100.1 11 95 C10.34 95 9.68 95 9 95 C9 71.9 9 48.8 9 25 C10.65 25 12.3 25 14 25 C14.33 44.8 14.66 64.6 15 85 C15.99 83.02 16.98 81.04 18 79 C20.43934225 78.86498106 22.87124104 78.76596103 25.3125 78.6875 C26.00279297 78.64560547 26.69308594 78.60371094 27.40429688 78.56054688 C29.42578125 78.51171875 29.42578125 78.51171875 33 79 C35.5844074 82.07408459 36.48643431 85.21608576 38 89 C38.33 65.9 38.66 42.8 39 19 C40.65 19 42.3 19 44 19 C44 45.73 44 72.46 44 100 C43.34 100 42.68 100 42 100 C43.98 104.95 45.96 109.9 48 115 C48.33 84.31 48.66 53.62 49 22 C50.65 22.33 52.3 22.66 54 23 C54 56.66 54 90.32 54 125 C53.34 125 52.68 125 52 125 C53.98 129.95 55.96 134.9 58 140 C58.33 110.96 58.66 81.92 59 52 C60.32 52 61.64 52 63 52 C63 93.58 63 135.16 63 178 C61.68 178 60.36 178 59 178 C59 169.09 59 160.18 59 151 C54.38 150.67 49.76 150.34 45 150 C44.67 169.8 44.34 189.6 44 210 C42.35 210 40.7 210 39 210 C38.97684592 200.66418209 38.95906924 191.32837403 38.94818783 181.99253368 C38.94296573 177.65769119 38.93588024 173.32286831 38.92456055 168.98803711 C38.91370783 164.80593485 38.90771808 160.62385148 38.90512276 156.44173622 C38.90327282 154.84491999 38.89966045 153.24810482 38.89426994 151.65129662 C38.8870279 149.41749194 38.8860104 147.18376567 38.88647461 144.94995117 C38.884254 143.67754074 38.88203339 142.40513031 38.87974548 141.09416199 C39 138 39 138 40 135 C31.42 135.33 22.84 135.66 14 136 C14 158.44 14 180.88 14 204 C12.35 204 10.7 204 9 204 C8.505 175.29 8.505 175.29 8 146 C7.01 147.98 7.01 147.98 6 150 C0.72 150 -4.56 150 -10 150 C-9.67 148.35 -9.34 146.7 -9 145 C-9.33 145 -9.66 145 -10 145 C-10 109.36 -10 73.72 -10 37 C-8.68 37 -7.36 37 -6 37 C-5.67 69.67 -5.34 102.34 -5 136 C-1.13603149 125.95368187 0.73176592 120.30811433 0.56762695 110.2331543 C0.56835709 109.03156677 0.56908722 107.82997925 0.56983948 106.59197998 C0.56698242 103.3424065 0.54216179 100.093954 0.50696969 96.84460044 C0.47540403 93.43208048 0.47275196 90.01953125 0.46684265 86.60688782 C0.45139181 80.16494949 0.41048444 73.72344278 0.3600952 67.28169328 C0.30392616 59.93939209 0.2766465 52.59706871 0.25161803 45.25460565 C0.19955884 30.16949791 0.11179032 15.08479242 0 0 Z M13 88 C14 90 14 90 14 90 Z M12 90 C13 92 13 92 13 92 Z M39 92 C40 94 40 94 40 94 Z M11 93 C12 95 12 95 12 95 Z M40 95 C41 97 41 97 41 97 Z M25 98 C24.46770674 99.26607607 23.94955456 100.53810412 23.4375 101.8125 C23.14746094 102.52019531 22.85742188 103.22789063 22.55859375 103.95703125 C21.74936976 106.1735067 21.74936976 106.1735067 23 109 C23.22179785 110.89212737 23.40614015 112.78884472 23.5625 114.6875 C23.64628906 115.68136719 23.73007812 116.67523438 23.81640625 117.69921875 C23.87699219 118.45847656 23.93757813 119.21773437 24 120 C22.35 120 20.7 120 19 120 C18.67 119.01 18.34 118.02 18 117 C17.67 118.65 17.34 120.3 17 122 C22.61 122 28.22 122 34 122 C33.67 121.01 33.34 120.02 33 119 C31.68 119.33 30.36 119.66 29 120 C29.875 113.25 29.875 113.25 31 111 C30.26711523 108.76398294 29.44009385 106.55828225 28.5625 104.375 C28.08941406 103.18648438 27.61632812 101.99796875 27.12890625 100.7734375 C26.57009766 99.40058594 26.57009766 99.40058594 26 98 C25.67 98 25.34 98 25 98 Z M21 109 C22 111 22 111 22 111 Z M20 112 C21 114 21 114 21 114 Z M3 113 C4 115 4 115 4 115 Z M31 113 C32 115 32 115 32 115 Z M19 114 C20 117 20 117 20 117 Z M2 116 C3 118 3 118 3 118 Z M32 116 C33 118 33 118 33 118 Z M1 118 C2 120 2 120 2 120 Z M49 118 C50 120 50 120 50 120 Z M50 120 C51 122 51 122 51 122 Z M51 123 C52 125 52 125 52 125 Z M10 138 C11 140 11 140 11 140 Z M-7 139 C-6 141 -6 141 -6 141 Z M41 140 C42 142 42 142 42 142 Z M-8 141 C-7 143 -7 143 -7 143 Z M9 141 C10 143 10 143 10 143 Z M42 143 C43 145 43 145 43 145 Z M59 143 C60 145 60 145 60 145 Z M60 146 C61 148 61 148 61 148 Z " fill="#4467A3" transform="translate(326,24)"/> | |
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 39.66666667 5 79.33333333 5 119 C5.99 120.485 5.99 120.485 7 122 C7.33 107.81 7.66 93.62 8 79 C12.95 79 17.9 79 23 79 C23 102.43 23 125.86 23 150 C18.05 150 13.1 150 8 150 C7.01 149.01 7.01 149.01 6 148 C5.67 174.73 5.34 201.46 5 229 C3.35 229 1.7 229 0 229 C0 199.33333333 0 169.66666667 0 140 C-1.54119651 137.70585252 -3.11372981 135.47459205 -4.75 133.25 C-5.64154771 132.02671361 -6.53218213 130.80276107 -7.421875 129.578125 C-7.81987305 129.03575195 -8.21787109 128.49337891 -8.62792969 127.93457031 C-10.4757041 125.32927415 -12.22827 122.657595 -14 120 C-14.33 138.81 -14.66 157.62 -15 177 C-16.65 176.67 -18.3 176.34 -20 176 C-20 154.66666667 -20 133.33333333 -20 112 C-21.32 110.35 -22.64 108.7 -24 107 C-24.33 121.19 -24.66 135.38 -25 150 C-29.95 150 -34.9 150 -40 150 C-40 126.57 -40 103.14 -40 79 C-35.05 79 -30.1 79 -25 79 C-23.68 80.65 -22.36 82.3 -21 84 C-20.67 73.77 -20.34 63.54 -20 53 C-18.35 53 -16.7 53 -15 53 C-15.0314209 54.73286255 -15.0314209 54.73286255 -15.06347656 56.50073242 C-15.13600398 60.79634148 -15.18184593 65.09189665 -15.21972656 69.38793945 C-15.23981305 71.24545398 -15.26708778 73.10290551 -15.30175781 74.96020508 C-15.35040737 77.63378463 -15.37299809 80.30652656 -15.390625 82.98046875 C-15.41127014 83.80773972 -15.43191528 84.63501068 -15.45318604 85.48735046 C-15.45363922 86.65799797 -15.45363922 86.65799797 -15.45410156 87.85229492 C-15.46298401 88.53402267 -15.47186646 89.21575043 -15.48101807 89.9181366 C-14.98221939 92.76171177 -14.98221939 92.76171177 -11 97 C-10.67 81.82 -10.34 66.64 -10 51 C-8.35 51 -6.7 51 -5 51 C-5.01332367 52.0169117 -5.01332367 52.0169117 -5.0269165 53.05436707 C-5.1154149 60.11078459 -5.17574506 67.16704445 -5.21972656 74.22387695 C-5.23984098 76.85740563 -5.26713604 79.49088966 -5.30175781 82.12426758 C-5.35028088 85.90978007 -5.37297112 89.694702 -5.390625 93.48046875 C-5.41127014 94.65772018 -5.43191528 95.83497162 -5.45318604 97.04789734 C-5.45348816 98.14866104 -5.45379028 99.24942474 -5.45410156 100.38354492 C-5.46742523 101.83249397 -5.46742523 101.83249397 -5.48101807 103.31071472 C-5.0965408 106.69496426 -5.0965408 106.69496426 -1 111 C-0.67 74.37 -0.34 37.74 0 0 Z " fill="#4467A2" transform="translate(286,24)"/> | |
| <path d="M0 0 C2.0625 0.4375 2.0625 0.4375 4 1 C4.02527062 7.39037231 4.04283317 13.78073183 4.05493164 20.17114258 C4.05997308 22.34692873 4.06680607 24.52271147 4.07543945 26.69848633 C4.08751338 29.81853067 4.09323005 32.93853038 4.09765625 36.05859375 C4.10281754 37.03775253 4.10797882 38.01691132 4.11329651 39.02574158 C4.11337204 39.92659988 4.11344757 40.82745819 4.11352539 41.75561523 C4.115746 42.55281479 4.11796661 43.35001434 4.12025452 44.17137146 C4 46 4 46 3 47 C4.65 48.65 6.3 50.3 8 52 C8.33 34.84 8.66 17.68 9 0 C11.475 0.495 11.475 0.495 14 1 C14.02312283 12.06534858 14.04091478 23.13069145 14.05181217 34.19605923 C14.05704113 39.33359566 14.06413901 44.47111563 14.07543945 49.60864258 C14.08626787 54.5623141 14.09227674 59.51596974 14.09487724 64.46965218 C14.09673157 66.36397616 14.10035234 68.25829924 14.10573006 70.1526165 C14.11293989 72.79634386 14.11399097 75.44000471 14.11352539 78.08374023 C14.11712067 78.87495773 14.12071594 79.66617523 14.12442017 80.48136902 C14.11405216 85.88594784 14.11405216 85.88594784 13 87 C12.90090698 89.33160055 12.87029496 91.66629942 12.875 94 C12.87242188 95.27875 12.86984375 96.5575 12.8671875 97.875 C12.64139107 100.86687244 12.64139107 100.86687244 14 102 C14.0935919 103.71865409 14.11744611 105.44115744 14.11352539 107.16235352 C14.11344986 108.26341934 14.11337433 109.36448517 14.11329651 110.49891663 C14.10813522 111.6968132 14.10297394 112.89470978 14.09765625 114.12890625 C14.0962413 115.34827377 14.09482635 116.5676413 14.09336853 117.82395935 C14.08774967 121.7368307 14.07519396 125.64964581 14.0625 129.5625 C14.05748743 132.20768147 14.0529241 134.85286383 14.04882812 137.49804688 C14.03777411 143.99871726 14.02101764 150.49935461 14 157 C12.35 157 10.7 157 9 157 C8.67 141.16 8.34 125.32 8 109 C3.94590682 112.3397157 3.94590682 112.3397157 3.51898193 115.15142822 C3.52786438 115.92420105 3.53674683 116.69697388 3.54589844 117.49316406 C3.54620056 118.37377502 3.54650269 119.25438599 3.54681396 120.16168213 C3.56745911 121.10348328 3.58810425 122.04528442 3.609375 123.015625 C3.61786469 124.47207428 3.61786469 124.47207428 3.62652588 125.95794678 C3.64889689 129.05580169 3.69909527 132.15249533 3.75 135.25 C3.77006403 137.35154578 3.78831497 139.45310972 3.8046875 141.5546875 C3.8487642 146.7035717 3.91779742 151.85158903 4 157 C2.35 156.67 0.7 156.34 -1 156 C-1 142.14 -1 128.28 -1 114 C-13.21 114 -25.42 114 -38 114 C-38 90.57 -38 67.14 -38 43 C-8 43 -8 43 -1 44 C-1.00523682 42.70263916 -1.01047363 41.40527832 -1.01586914 40.06860352 C-1.03391469 35.27352585 -1.04543037 30.4784512 -1.05493164 25.68334961 C-1.05997288 23.60456844 -1.06680574 21.52579084 -1.07543945 19.44702148 C-1.08751422 16.46597414 -1.09323024 13.48497351 -1.09765625 10.50390625 C-1.10539818 9.10078941 -1.10539818 9.10078941 -1.11329651 7.66932678 C-1.11337204 6.80850998 -1.11344757 5.94769318 -1.11352539 5.06079102 C-1.115746 4.29912125 -1.11796661 3.53745148 -1.12025452 2.75270081 C-1 1 -1 1 0 0 Z M9 53 C10 55 10 55 10 55 Z M-24 55 C-24 60.61 -24 66.22 -24 72 C-21.916875 72.04125 -19.83375 72.0825 -17.6875 72.125 C-16.51574219 72.14820313 -15.34398437 72.17140625 -14.13671875 72.1953125 C-10.83606339 72.25320618 -10.83606339 72.25320618 -8 70 C-8.99 70 -9.98 70 -11 70 C-11 65.71 -11 61.42 -11 57 C-10.34 56.67 -9.68 56.34 -9 56 C-13.90068963 54.36643679 -18.85738476 54.94470306 -24 55 Z M10 56 C11 59 11 59 11 59 Z M-6 59 C-6 61.97 -6 64.94 -6 68 C-5.34 67.34 -4.68 66.68 -4 66 C-4.32326553 62.40320934 -4.32326553 62.40320934 -5 59 C-5.33 59 -5.66 59 -6 59 Z M11 60 C11 62.31 11 64.62 11 67 C11.33 67 11.66 67 12 67 C12 64.69 12 62.38 12 60 C11.67 60 11.34 60 11 60 Z M10 68 C11 70 11 70 11 70 Z M9 70 C10 72 10 72 10 72 Z M8 72 C6.63823419 73.98075027 5.30406884 75.98079663 4 78 C6.97 79.98 6.97 79.98 10 82 C9.67 78.7 9.34 75.4 9 72 C8.67 72 8.34 72 8 72 Z M11 83 C12 85 12 85 12 85 Z M-24 84 C-24 89.61 -24 95.22 -24 101 C-19.9471875 101.1546875 -19.9471875 101.1546875 -15.8125 101.3125 C-14.54950073 101.38078003 -14.54950073 101.38078003 -13.26098633 101.45043945 C-9.04349545 101.52814195 -7.44773185 101.34565827 -3.984375 98.671875 C-1.79078581 96.12894612 -1.79078581 96.12894612 -1.4375 92.9375 C-1.82483865 89.42649279 -1.82483865 89.42649279 -6 86 C-6 90.29 -6 94.58 -6 99 C-7.65 99.33 -9.3 99.66 -11 100 C-11 95.05 -11 90.1 -11 85 C-10.34 84.67 -9.68 84.34 -9 84 C-13.95 84 -18.9 84 -24 84 Z M9 106 C10 108 10 108 10 108 Z " fill="#4567A3" transform="translate(90,60)"/> | |
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 26.73 5 53.46 5 81 C3.68 81 2.36 81 1 81 C0.505 81.99 0.505 81.99 0 83 C9.9 83 19.8 83 30 83 C30 87.29 30 91.58 30 96 C15.15 96 0.3 96 -15 96 C-15 72.57 -15 49.14 -15 25 C-10.05 25 -5.1 25 0 25 C0 16.75 0 8.5 0 0 Z " fill="#4567A3" transform="translate(207,78)"/> | |
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 55.44 5 110.88 5 168 C3.35 168 1.7 168 0 168 C0 112.56 0 57.12 0 0 Z " fill="#4367A3" transform="translate(40,55)"/> | |
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 40.59 5 81.18 5 123 C3.35 123 1.7 123 0 123 C0 82.41 0 41.82 0 0 Z " fill="#4367A2" transform="translate(10,77)"/> | |
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 39.27 5 78.54 5 119 C3.35 119 1.7 119 0 119 C0 79.73 0 40.46 0 0 Z " fill="#4466A3" transform="translate(394,79)"/> | |
| <path d="M0 0 C2.475 0.495 2.475 0.495 5 1 C5 15.85 5 30.7 5 46 C3.68 46 2.36 46 1 46 C1 70.09 1 94.18 1 119 C2.32 119 3.64 119 5 119 C5 133.85 5 148.7 5 164 C3.35 164.33 1.7 164.66 0 165 C0 110.55 0 56.1 0 0 Z " fill="#4668A4" transform="translate(50,56)"/> | |
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 33.66 5 67.32 5 102 C3.35 102 1.7 102 0 102 C0 68.34 0 34.68 0 0 Z " fill="#4467A3" transform="translate(296,175)"/> | |
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 33.33 5 66.66 5 101 C3.02 101.495 3.02 101.495 1 102 C-0.95365306 100.04634694 -0.12022124 97.06600248 -0.12442017 94.46598816 C-0.12082489 93.52515884 -0.11722961 92.58432953 -0.11352539 91.61499023 C-0.11367142 90.62973358 -0.11381744 89.64447693 -0.1139679 88.62936401 C-0.11326832 85.35575193 -0.10547385 82.08219596 -0.09765625 78.80859375 C-0.09579223 76.54557832 -0.09436825 74.28256249 -0.09336853 72.01954651 C-0.0895421 66.05021052 -0.07971075 60.08089868 -0.06866455 54.11157227 C-0.05845312 48.02555671 -0.05387149 41.93953727 -0.04882812 35.85351562 C-0.03808859 23.90233311 -0.02101068 11.95116856 0 0 Z " fill="#4467A2" transform="translate(30,88)"/> | |
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 33.33 5 66.66 5 101 C3.35 101 1.7 101 0 101 C0 67.67 0 34.34 0 0 Z " fill="#4367A3" transform="translate(296,1)"/> | |
| <path d="M0 0 C1.32 0 2.64 0 4 0 C4 41.58 4 83.16 4 126 C2.68 126 1.36 126 0 126 C0 117.09 0 108.18 0 99 C0.99 98.505 0.99 98.505 2 98 C1.67468292 97.03368149 1.34936584 96.06736298 1.01419067 95.07176208 C-0.24331198 90.64211989 -0.26691934 86.43024127 -0.22705078 81.85180664 C-0.22734283 80.96320953 -0.22763489 80.07461243 -0.22793579 79.15908813 C-0.22655033 76.24267572 -0.21102617 73.32652365 -0.1953125 70.41015625 C-0.19157958 68.37991984 -0.18873393 66.34968161 -0.18673706 64.31944275 C-0.17912256 58.9913124 -0.15949286 53.66329212 -0.1373291 48.33520508 C-0.11682358 42.89210499 -0.10772529 37.44898701 -0.09765625 32.00585938 C-0.07624488 21.33719139 -0.04213535 10.66860487 0 0 Z " fill="#5071A8" transform="translate(385,76)"/> | |
| <path d="M0 0 C2.475 0.495 2.475 0.495 5 1 C5 32.68 5 64.36 5 97 C3.35 97 1.7 97 0 97 C0 64.99 0 32.98 0 0 Z " fill="#4769A3" transform="translate(20,90)"/> | |
| <path d="M0 0 C1.32 0 2.64 0 4 0 C4 38.28 4 76.56 4 116 C3.34 116 2.68 116 2 116 C1.34 117.32 0.68 118.64 0 120 C0 80.4 0 40.8 0 0 Z " fill="#4D6EA8" transform="translate(326,24)"/> | |
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 29.37 5 58.74 5 89 C3.35 89 1.7 89 0 89 C0 59.63 0 30.26 0 0 Z " fill="#4467A2" transform="translate(414,94)"/> | |
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 29.37 5 58.74 5 89 C3.35 89 1.7 89 0 89 C0 59.63 0 30.26 0 0 Z " fill="#4568A3" transform="translate(404,94)"/> | |
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 29.04 5 58.08 5 88 C3.35 88 1.7 88 0 88 C0 58.96 0 29.92 0 0 Z " fill="#4467A3" transform="translate(306,175)"/> | |
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 29.04 5 58.08 5 88 C3.35 88 1.7 88 0 88 C0 58.96 0 29.92 0 0 Z " fill="#4467A3" transform="translate(306,14)"/> | |
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 30.69 5 61.38 5 93 C3.35 93 1.7 93 0 93 C-0.02698189 91.37509046 -0.04638757 89.75005367 -0.0625 88.125 C-0.07410156 87.22007812 -0.08570313 86.31515625 -0.09765625 85.3828125 C0 83 0 83 1 81 C1.0962762 78.98103136 1.12981825 76.9587571 1.125 74.9375 C1.12757813 73.85339844 1.13015625 72.76929688 1.1328125 71.65234375 C1.30118564 69.07756602 1.30118564 69.07756602 0 68 C-0.0942174 65.88318683 -0.11742761 63.76319242 -0.11352539 61.64428711 C-0.11367142 60.98089828 -0.11381744 60.31750946 -0.1139679 59.63401794 C-0.11326881 57.43176044 -0.10547665 55.22958655 -0.09765625 53.02734375 C-0.09579206 51.50419664 -0.09436816 49.98104893 -0.09336853 48.457901 C-0.08954346 44.44162349 -0.07971328 40.42538192 -0.06866455 36.40911865 C-0.05845019 32.31376634 -0.05387086 28.21840824 -0.04882812 24.12304688 C-0.038091 16.08201472 -0.02101472 8.04101183 0 0 Z " fill="#4367A3" transform="translate(237,92)"/> | |
| <path d="M0 0 C1.32 0 2.64 0 4 0 C4.02316181 13.21279116 4.04093472 26.4255775 4.05181217 39.63838482 C4.05703257 45.77349756 4.06411499 51.90859642 4.07543945 58.04370117 C4.08629819 63.9634852 4.0922832 69.88325587 4.09487724 75.80304909 C4.09672609 78.06249006 4.10033637 80.32193029 4.10573006 82.58136559 C4.11298005 85.74395711 4.11398926 88.90649331 4.11352539 92.0690918 C4.11712067 93.00489075 4.12071594 93.9406897 4.12442017 94.90484619 C4.11780785 99.06617455 4.06389138 102.94365682 3 107 C1.515 107.495 1.515 107.495 0 108 C0 72.36 0 36.72 0 0 Z " fill="#4D6EA8" transform="translate(316,61)"/> | |
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 27.06 5 54.12 5 82 C3.35 82 1.7 82 0 82 C0 54.94 0 27.88 0 0 Z " fill="#4467A2" transform="translate(227,77)"/> | |
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 26.4 5 52.8 5 80 C3.35 80 1.7 80 0 80 C0 53.6 0 27.2 0 0 Z " fill="#4467A2" transform="translate(345,160)"/> | |
| <path d="M0 0 C1.32 0 2.64 0 4 0 C4 38.94 4 77.88 4 118 C2.68 118 1.36 118 0 118 C0 79.06 0 40.12 0 0 Z " fill="#496AA5" transform="translate(188,80)"/> | |
| <path d="M0 0 C1.98 0.495 1.98 0.495 4 1 C4 27.07 4 53.14 4 80 C2.35 80 0.7 80 -1 80 C-1.02312376 69.71695462 -1.04091525 59.43391538 -1.05181217 49.15084934 C-1.05704093 44.3765172 -1.06413844 39.60220279 -1.07543945 34.82788086 C-1.0862686 30.22433738 -1.09227689 25.62081101 -1.09487724 21.01725578 C-1.09673144 19.25690377 -1.10035196 17.49655274 -1.10573006 15.73620796 C-1.11294086 13.27927723 -1.11399093 10.82241805 -1.11352539 8.36547852 C-1.11712067 7.63036545 -1.12071594 6.89525238 -1.12442017 6.13786316 C-1.11405216 1.11405216 -1.11405216 1.11405216 0 0 Z " fill="#4367A3" transform="translate(218,79)"/> | |
| <path d="M0 0 C1.32 0.33 2.64 0.66 4 1 C4 32.68 4 64.36 4 97 C2.68 97 1.36 97 0 97 C0 64.99 0 32.98 0 0 Z " fill="#5171A9" transform="translate(1,90)"/> | |
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 25.41 5 50.82 5 77 C3.35 77 1.7 77 0 77 C0 51.59 0 26.18 0 0 Z " fill="#4467A2" transform="translate(424,100)"/> | |
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 25.08 5 50.16 5 76 C2.525 76.495 2.525 76.495 0 77 C0 51.59 0 26.18 0 0 Z " fill="#4467A3" transform="translate(434,100)"/> | |
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 24.42 5 48.84 5 74 C3.35 73.67 1.7 73.34 0 73 C0 48.91 0 24.82 0 0 Z " fill="#4367A2" transform="translate(69,175)"/> | |
| <path d="M0 0 C1.32 0 2.64 0 4 0 C4 24.42 4 48.84 4 74 C2.35 74 0.7 74 -1 74 C-1.02312484 64.49925675 -1.0409158 54.99852312 -1.05181217 45.49775791 C-1.05704069 41.08662996 -1.06413777 36.6755212 -1.07543945 32.2644043 C-1.08626944 28.01098885 -1.09227707 23.75759191 -1.09487724 19.50416374 C-1.09673129 17.87778367 -1.10035152 16.25140466 -1.10573006 14.62503242 C-1.11294198 12.35489807 -1.11399088 10.08484115 -1.11352539 7.81469727 C-1.115746 6.52008072 -1.11796661 5.22546417 -1.12025452 3.89161682 C-1 1 -1 1 0 0 Z " fill="#4367A2" transform="translate(70,28)"/> | |
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 22.11 5 44.22 5 67 C3.35 67 1.7 67 0 67 C0 44.89 0 22.78 0 0 Z " fill="#4367A3" transform="translate(355,160)"/> | |
| <path d="M0 0 C1.32 0 2.64 0 4 0 C4 21.45 4 42.9 4 65 C2.35 65 0.7 65 -1 65 C-1.02312684 56.67271053 -1.04091683 48.34543437 -1.05181217 40.01812077 C-1.05704026 36.15179882 -1.06413654 32.28549879 -1.07543945 28.41918945 C-1.086271 24.69096599 -1.0922774 20.96276366 -1.09487724 17.23452568 C-1.09673101 15.80910344 -1.10035071 14.38368241 -1.10573006 12.95826912 C-1.11294393 10.96836592 -1.11340808 8.97844166 -1.11352539 6.98852539 C-1.115746 5.85379288 -1.11796661 4.71906036 -1.12025452 3.54994202 C-1 1 -1 1 0 0 Z " fill="#4367A2" transform="translate(346,37)"/> | |
| <path d="M0 0 C1.32 0 2.64 0 4 0 C4 25.74 4 51.48 4 78 C2.68 78 1.36 78 0 78 C0 52.26 0 26.52 0 0 Z " fill="#4E70A8" transform="translate(326,175)"/> | |
| <path d="M0 0 C1.32 0 2.64 0 4 0 C4 20.13 4 40.26 4 61 C2.35 61 0.7 61 -1 61 C-1.02312792 53.19424805 -1.04091738 45.38850405 -1.05181217 37.58272648 C-1.05704002 33.9585404 -1.06413587 30.3343777 -1.07543945 26.71020508 C-1.08627184 23.21540025 -1.09227758 19.72061796 -1.09487724 16.22579765 C-1.09763551 14.23760611 -1.10544688 12.24942369 -1.11329651 10.26124573 C-1.11337204 9.06007614 -1.11344757 7.85890656 -1.11352539 6.62133789 C-1.115746 5.55766495 -1.11796661 4.493992 -1.12025452 3.39808655 C-1 1 -1 1 0 0 Z " fill="#4366A3" transform="translate(139,40)"/> | |
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 18.15 5 36.3 5 55 C2.525 55.495 2.525 55.495 0 56 C0 37.52 0 19.04 0 0 Z " fill="#4367A2" transform="translate(375,175)"/> | |
| <path d="M0 0 C1.98 0.495 1.98 0.495 4 1 C4 17.83 4 34.66 4 52 C2.35 52 0.7 52 -1 52 C-1.02526739 44.75513449 -1.0428318 37.51028026 -1.05493164 30.26538086 C-1.05997356 27.79857967 -1.06680691 25.33178148 -1.07543945 22.86499023 C-1.08751125 19.32795471 -1.09322956 15.79095855 -1.09765625 12.25390625 C-1.10281754 11.14350479 -1.10797882 10.03310333 -1.11329651 8.88905334 C-1.11337204 7.86807053 -1.11344757 6.84708771 -1.11352539 5.79516602 C-1.115746 4.89137711 -1.11796661 3.9875882 -1.12025452 3.05641174 C-1 1 -1 1 0 0 Z " fill="#4367A2" transform="translate(356,50)"/> | |
| <path d="M0 0 C2.475 0.495 2.475 0.495 5 1 C5 17.83 5 34.66 5 52 C3.35 51.67 1.7 51.34 0 51 C0 34.17 0 17.34 0 0 Z " fill="#4367A2" transform="translate(158,52)"/> | |
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 16.5 5 33 5 50 C3.35 50 1.7 50 0 50 C0 33.5 0 17 0 0 Z " fill="#4769A3" transform="translate(79,175)"/> | |
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 16.5 5 33 5 50 C3.35 50 1.7 50 0 50 C0 33.5 0 17 0 0 Z " fill="#4367A2" transform="translate(79,52)"/> | |
| <path d="M0 0 C1.98 0.495 1.98 0.495 4 1 C4 17.5 4 34 4 51 C0 49 0 49 -1 48 C-1.09822744 46.53194708 -1.1279837 45.0592254 -1.12939453 43.58789062 C-1.13412277 42.18138245 -1.13412277 42.18138245 -1.13894653 40.74645996 C-1.1369223 39.72669067 -1.13489807 38.70692139 -1.1328125 37.65625 C-1.13376923 36.61682251 -1.13472595 35.57739502 -1.13571167 34.50646973 C-1.13639363 32.30395446 -1.13453827 30.10143721 -1.13037109 27.89892578 C-1.12502308 24.51460281 -1.13031559 21.13041256 -1.13671875 17.74609375 C-1.13605797 15.61197887 -1.13477681 13.47786408 -1.1328125 11.34375 C-1.13483673 10.32398071 -1.13686096 9.30421143 -1.13894653 8.25354004 C-1.13579437 7.31586792 -1.13264221 6.3781958 -1.12939453 5.41210938 C-1.12859894 4.58239624 -1.12780334 3.75268311 -1.12698364 2.89782715 C-1 1 -1 1 0 0 Z " fill="#4467A3" transform="translate(169,60)"/> | |
| <path d="M0 0 C5 5 5 5 5.60127258 7.34761047 C5.59016953 8.15369247 5.57906647 8.95977448 5.56762695 9.7902832 C5.5672493 10.71086014 5.56687164 11.63143707 5.56648254 12.57991028 C5.54067612 13.5602977 5.51486969 14.54068512 5.48828125 15.55078125 C5.48120651 16.56472458 5.47413177 17.57866791 5.46684265 18.62333679 C5.43891012 21.8538163 5.37617162 25.08254661 5.3125 28.3125 C5.28741575 30.5058343 5.26460281 32.69919584 5.24414062 34.89257812 C5.18908755 40.26231302 5.10547273 45.63103154 5 51 C3.35 50.67 1.7 50.34 0 50 C0 33.5 0 17 0 0 Z " fill="#4367A3" transform="translate(276,152)"/> | |
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 15.84 5 31.68 5 48 C3.35 48 1.7 48 0 48 C0 32.16 0 16.32 0 0 Z " fill="#4568A3" transform="translate(148,53)"/> | |
| <path d="M0 0 C1.32 0 2.64 0 4 0 C4 13.86 4 27.72 4 42 C2.68 42 1.36 42 0 42 C0 28.14 0 14.28 0 0 Z " fill="#4E70A8" transform="translate(316,175)"/> | |
| <path d="M0 0 C1.32 0 2.64 0 4 0 C4 13.86 4 27.72 4 42 C2.68 42 1.36 42 0 42 C0 28.14 0 14.28 0 0 Z " fill="#4E70A8" transform="translate(60,175)"/> | |
| <path d="M0 0 C1.32 0 2.64 0 4 0 C4 13.86 4 27.72 4 42 C2.68 42 1.36 42 0 42 C0 28.14 0 14.28 0 0 Z " fill="#4E6FA8" transform="translate(60,60)"/> | |
| <path d="M0 0 C1.32 0.33 2.64 0.66 4 1 C4 13.87 4 26.74 4 40 C2.68 39.67 1.36 39.34 0 39 C0 26.13 0 13.26 0 0 Z " fill="#4E6EA8" transform="translate(119,167)"/> | |
| <path d="M0 0 C1.32 0 2.64 0 4 0 C4 12.21 4 24.42 4 37 C2.68 37.66 1.36 38.32 0 39 C0 26.13 0 13.26 0 0 Z " fill="#4F70A7" transform="translate(119,71)"/> | |
| <path d="M0 0 C1.98 0.99 1.98 0.99 4 2 C4 13.55 4 25.1 4 37 C2.68 37 1.36 37 0 37 C0 24.79 0 12.58 0 0 Z " fill="#4F6FA7" transform="translate(129,172)"/> | |
| <path d="M0 0 C1.32 0 2.64 0 4 0 C4 11.55 4 23.1 4 35 C2.02 35.495 2.02 35.495 0 36 C0 24.12 0 12.24 0 0 Z " fill="#5070A7" transform="translate(129,68)"/> | |
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 8.25 5 16.5 5 25 C3.35 25.33 1.7 25.66 0 26 C0 17.42 0 8.84 0 0 Z " fill="#4467A3" transform="translate(227,175)"/> | |
| <path d="M0 0 C1.32 0 2.64 0 4 0 C4 10.56 4 21.12 4 32 C2.68 32 1.36 32 0 32 C0 21.44 0 10.88 0 0 Z " fill="#4E6FA8" transform="translate(198,175)"/> | |
| <path d="M0 0 C0.33 0 0.66 0 1 0 C1 11.55 1 23.1 1 35 C-3 32 -3 32 -3.50170898 29.15258789 C-3.49985596 28.02071045 -3.49800293 26.88883301 -3.49609375 25.72265625 C-3.49673828 24.48708984 -3.49738281 23.25152344 -3.49804688 21.97851562 C-3.47806641 20.68623047 -3.45808594 19.39394531 -3.4375 18.0625 C-3.44458984 16.77408203 -3.45167969 15.48566406 -3.45898438 14.15820312 C-3.38697203 3.52807343 -3.38697203 3.52807343 0 0 Z " fill="#5171A9" transform="translate(132,121)"/> | |
| <path d="M0 0 C1.32 0 2.64 0 4 0 C4 10.23 4 20.46 4 31 C2.68 31 1.36 31 0 31 C0 20.77 0 10.54 0 0 Z " fill="#4F70A8" transform="translate(198,71)"/> | |
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 7.92 5 15.84 5 24 C3.35 24 1.7 24 0 24 C0 16.08 0 8.16 0 0 Z " fill="#4467A3" transform="translate(207,175)"/> | |
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 7.59 5 15.18 5 23 C3.35 23 1.7 23 0 23 C0 15.41 0 7.82 0 0 Z " fill="#4367A2" transform="translate(217,175)"/> | |
| <path d="M0 0 C1.32 0 2.64 0 4 0 C4 6.93 4 13.86 4 21 C2.68 21 1.36 21 0 21 C0 14.07 0 7.14 0 0 Z " fill="#5070A8" transform="translate(247,175)"/> | |
| <path d="M0 0 C1.32 0 2.64 0 4 0 C4 6.6 4 13.2 4 20 C2.68 20 1.36 20 0 20 C0 13.4 0 6.8 0 0 Z " fill="#4E70A8" transform="translate(247,82)"/> | |
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 4.95 5 9.9 5 15 C3.35 15 1.7 15 0 15 C0 10.05 0 5.1 0 0 Z " fill="#4467A3" transform="translate(69,145)"/> | |
| <path d="M0 0 C1.65 0 3.3 0 5 0 C5 4.62 5 9.24 5 14 C3.35 14 1.7 14 0 14 C0 9.38 0 4.76 0 0 Z " fill="#4768A3" transform="translate(69,116)"/> | |
| <path d="M0 0 C1.32 0 2.64 0 4 0 C4 3.96 4 7.92 4 12 C2.68 12 1.36 12 0 12 C0 8.04 0 4.08 0 0 Z " fill="#4E70A8" transform="translate(257,175)"/> | |
| <path d="M0 0 C1.32 0 2.64 0 4 0 C4 3.96 4 7.92 4 12 C2.68 12 1.36 12 0 12 C0 8.04 0 4.08 0 0 Z " fill="#4F6FA8" transform="translate(257,90)"/> | |
| <path d="M0 0 C0.99 0.495 0.99 0.495 2 1 C2.73075648 3.3140622 3.40138258 5.64828869 4 8 C2.68 8 1.36 8 0 8 C0 5.36 0 2.72 0 0 Z " fill="#5575AB" transform="translate(355,136)"/> | |
| </svg> | |
| ); | |
| export default Icon; | |
| - const Icon = (props) => ( | |
| const Icon = ({ isDark, ...props }) => ( | |
| <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 439 277" {...props}> |
| from .brightdata_composio import ComposioBrightdataAPIComponent | ||
| from .calendly_composio import ComposioCalendlyAPIComponent | ||
| from .capsulecrm_composio import ComposioCapsuleCRMAPIComponent | ||
| from .canvas_composio import ComposioCanvaasAPIComponent |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
🧩 Analysis chain
Typo in class/component name (“Canvaas”).
Consider renaming ComposioCanvaasAPIComponent → ComposioCanvasAPIComponent across the codebase (class name, icon key, mapping, all) to match the app name "canvas" and avoid future drift.
Please confirm the frontend icon key uses "Canvas" or "Canvaas" and align both sides accordingly. Based on learnings.
🏁 Script executed:
#!/bin/bash
echo "=== Occurrences of ComposioCanvaasAPIComponent ==="
rg -n "ComposioCanvaasAPIComponent" || echo "none found"
echo
echo "=== canvas_composio.py location ==="
file=$(rg -l "canvas_composio.py" | head -n1)
echo "${file:-not found}"
if [ -n "$file" ]; then
echo
echo "=== Class definition in $file ==="
rg -n -C3 "class Composio" "$file"
echo
echo "=== icon attribute in $file ==="
rg -n -C3 "icon" "$file"
fi
echo
echo "=== 'Canvaas' in frontend TS/TSX files ==="
rg -n "Canvaas" -g "*.ts" -g "*.tsx" || echo "none found"
echo
echo "=== 'canvas' literals in frontend mapping files (first 20) ==="
rg -n "['\"]canvas['\"]" -g "*.ts" -g "*.tsx" | head -n20 || echo "none found"Length of output: 819
Rename ComposioCanvaasAPIComponent → ComposioCanvasAPIComponent and align icon keys
- In src/lfx/src/lfx/components/composio/canvas_composio.py and init.py, rename class and imports from ComposioCanvaasAPIComponent → ComposioCanvasAPIComponent, update all.
- In the Python mapping (
"ComposioCanvaasAPIComponent": "canvaas_composio"), change to"ComposioCanvasAPIComponent": "canvas_composio". - In src/frontend/src/icons/lazyIconImports.ts, rename the
Canvaaskey toCanvasto match the backend icon key.
🤖 Prompt for AI Agents
In src/lfx/src/lfx/components/composio/__init__.py around line 18 and related
files, the class and import are incorrectly named ComposioCanvaasAPIComponent
and the icon keys are misaligned; rename the class in
src/lfx/src/lfx/components/composio/canvas_composio.py from
ComposioCanvaasAPIComponent to ComposioCanvasAPIComponent, update the import in
__init__.py to from .canvas_composio import ComposioCanvasAPIComponent and
update __all__ accordingly, change the Python mapping key from
"ComposioCanvaasAPIComponent": "canvaas_composio" to
"ComposioCanvasAPIComponent": "canvas_composio", and update the frontend icon
key in src/frontend/src/icons/lazyIconImports.ts by renaming the Canvaas key to
Canvas so backend and frontend keys match.
| "ComposioBrightdataAPIComponent": "brightdata_composio", | ||
| "ComposioCalendlyAPIComponent": "calendly_composio", | ||
| "ComposioCapsuleCRMAPIComponent": "capsulecrm_composio", | ||
| "ComposioCanvaasAPIComponent": "canvaas_composio", | ||
| "ComposioContentfulAPIComponent": "contentful_composio", | ||
| "ComposioDiscordAPIComponent": "discord_composio", | ||
| "ComposioDigicertAPIComponent": "digicert_composio", | ||
| "ComposioFigmaAPIComponent": "figma_composio", | ||
| "ComposioGitHubAPIComponent": "github_composio", | ||
| "ComposioGmailAPIComponent": "gmail_composio", | ||
| "ComposioGoogleCalendarAPIComponent": "googlecalendar_composio", | ||
| "ComposioGooglemeetAPIComponent": "googlemeet_composio", | ||
| "ComposioOutlookAPIComponent": "outlook_composio", | ||
| "ComposioSlackAPIComponent": "slack_composio", | ||
| "ComposioGoogleDocsAPIComponent": "googledocs_composio", | ||
| "ComposioGoogleSheetsAPIComponent": "googlesheets_composio", | ||
| "ComposioGoogleTasksAPIComponent": "googletasks_composio", | ||
| "ComposioGooglemeetAPIComponent": "googlemeet_composio", | ||
| "ComposioJiraAPIComponent": "jira_composio", | ||
| "ComposioKlaviyoAPIComponent": "klaviyo_composio", | ||
| "ComposioLinearAPIComponent": "linear_composio", | ||
| "ComposioMiroAPIComponent": "miro_composio", | ||
| "ComposioNotionAPIComponent": "notion_composio", | ||
| "ComposioOneDriveAPIComponent": "onedrive_composio", | ||
| "ComposioOutlookAPIComponent": "outlook_composio", | ||
| "ComposioRedditAPIComponent": "reddit_composio", | ||
| "ComposioSlackAPIComponent": "slack_composio", | ||
| "ComposioSlackbotAPIComponent": "slackbot_composio", | ||
| "ComposioSupabaseAPIComponent": "supabase_composio", | ||
| "ComposioTimelinesaiAPIComponent": "timelinesai_composio", | ||
| "ComposioTodoistAPIComponent": "todoist_composio", | ||
| "ComposioYoutubeAPIComponent": "youtube_composio", | ||
| "ComposioGoogleDocsAPIComponent": "googledocs_composio", | ||
| "ComposioGoogleSheetsAPIComponent": "googlesheets_composio", | ||
| "ComposioKlaviyoAPIComponent": "klaviyo_composio", | ||
| "ComposioNotionAPIComponent": "notion_composio", | ||
| "ComposioOneDriveAPIComponent": "onedrive_composio", | ||
| "ComposioAirtableAPIComponent": "airtable_composio", | ||
| "ComposioAsanaAPIComponent": "asana_composio", | ||
| "ComposioAttioAPIComponent": "attio_composio", | ||
| "ComposioCalendlyAPIComponent": "calendly_composio", | ||
| "ComposioContentfulAPIComponent": "contentful_composio", | ||
| "ComposioDiscordAPIComponent": "discord_composio", | ||
| "ComposioFigmaAPIComponent": "figma_composio", | ||
| "ComposioMiroAPIComponent": "miro_composio", | ||
| "ComposioWrikeAPIComponent": "wrike_composio", | ||
| "ComposioYoutubeAPIComponent": "youtube_composio", | ||
| } | ||
|
|
||
| # Always expose all components - individual failures will be handled on import | ||
| __all__ = [ | ||
| "ComposioAPIComponent", | ||
| "ComposioAgentQLAPIComponent", | ||
| "ComposioAgiledAPIComponent", | ||
| "ComposioAirtableAPIComponent", | ||
| "ComposioAsanaAPIComponent", | ||
| "ComposioAttioAPIComponent", |
There was a problem hiding this comment.
🧩 Analysis chain
Sanity-check mappings, files, and classes.
Run this read-only script to catch typos (module filenames, class names) and all/mapping drift.
🏁 Script executed:
#!/usr/bin/env bash
set -euo pipefail
INIT="src/lfx/src/lfx/components/composio/__init__.py"
BASE="src/lfx/src/lfx/components/composio"
python - <<'PY'
import ast, os, re, sys, json
INIT = "src/lfx/src/lfx/components/composio/__init__.py"
BASE = "src/lfx/src/lfx/components/composio"
with open(INIT, "r", encoding="utf-8") as f:
mod = ast.parse(f.read(), INIT)
dynamic = {}
all_list = []
for node in ast.walk(mod):
if isinstance(node, ast.Assign):
for t in node.targets:
if isinstance(t, ast.Name) and t.id == "_dynamic_imports":
dynamic = {k.s: v.s for k, v in [(e.key, e.value) for e in node.value.keys, node.value.values][0]} if False else { # placeholder
# Fallback simple eval with safeguards:
}
# Safer extraction without eval:
source = open(INIT, "r", encoding="utf-8").read()
import re
dyn = {}
for m in re.finditer(r'"(Composio[^"]+)":\s*"([a-z0-9_]+)"', source):
dyn[m.group(1)] = m.group(2)
all_names = re.findall(r'__all__\s*=\s*\[(.*?)\]', source, re.S)
all_set = set()
if all_names:
all_set = set(re.findall(r'"(Composio[^"]+)"', all_names[0]))
errors = []
# 1) File existence and class declaration
for cls, modname in dyn.items():
path = os.path.join(BASE, f"{modname}.py")
if not os.path.exists(path):
errors.append(f"Missing module file: {path} (for {cls})")
continue
src = open(path, "r", encoding="utf-8").read()
if not re.search(rf'class\s+{re.escape(cls)}\s*\(', src):
errors.append(f"Class '{cls}' not found in {path}")
# 2) __all__ coverage
dyn_keys = set(dyn.keys())
missing_in_all = dyn_keys - all_set
extra_in_all = all_set - dyn_keys
report = {
"missing_module_or_class": errors,
"__all___missing": sorted(missing_in_all),
"__all___extra": sorted(extra_in_all),
}
print(json.dumps(report, indent=2))
PYLength of output: 267
🏁 Script executed:
#!/usr/bin/env bash
set -euo pipefail
INIT="src/lfx/src/lfx/components/composio/__init__.py"
BASE="src/lfx/src/lfx/components/composio"
python3 - <<'PY'
import os, re, json, sys
INIT="src/lfx/src/lfx/components/composio/__init__.py"
BASE="src/lfx/src/lfx/components/composio"
with open(INIT, "r", encoding="utf-8") as f:
text = f.read()
# Extract dynamic_imports dict entries
m = re.search(r'_dynamic_imports\s*=\s*\{([^}]*)\}', text, re.S)
if not m:
print(json.dumps({"error": "_dynamic_imports not found"}))
sys.exit(0)
block = m.group(1)
dyn = dict(re.findall(r'"([^"]+)":\s*"([^"]+)"', block))
# Extract __all__ entries
m2 = re.search(r'__all__\s*=\s*\[(.*?)\]', text, re.S)
all_list = re.findall(r'"([^"]+)"', m2.group(1)) if m2 else []
all_set = set(all_list)
# Validate modules and classes
missing = []
for cls, modname in dyn.items():
path = os.path.join(BASE, f"{modname}.py")
if not os.path.exists(path):
missing.append(f"Missing module: {path} for class {cls}")
continue
src = open(path, "r", encoding="utf-8").read()
if not re.search(rf'class\s+{re.escape(cls)}\s*\(', src):
missing.append(f"Class {cls} not found in {path}")
# Compare __all__
dyn_keys = set(dyn.keys())
missing_in_all = sorted(dyn_keys - all_set)
extra_in_all = sorted(all_set - dyn_keys)
report = {
"missing_module_or_class": missing,
"__all___missing": missing_in_all,
"__all___extra": extra_in_all
}
print(json.dumps(report, indent=2))
PYLength of output: 320
Fix missing module and missing class in composio dynamic imports
ComposioCanvaasAPIComponentis mapped tocanvaas_composio.pybut that file is missing undersrc/lfx/src/lfx/components/composio/.ComposioTimelinesaiAPIComponentisn’t declared insrc/lfx/src/lfx/components/composio/timelinesai_composio.py.
Add the missing file or correct the mapping, and declare the missing class to restore consistency.
🤖 Prompt for AI Agents
In src/lfx/src/lfx/components/composio/__init__.py around lines 47–86, the
dynamic import map references ComposioCanvaasAPIComponent -> canvaas_composio
and ComposioTimelinesaiAPIComponent -> timelinesai_composio but the
canvaas_composio module file is missing and the timelinesai_composio module does
not declare the referenced class; create
src/lfx/src/lfx/components/composio/canvaas_composio.py (or update the mapping
to the correct existing module name) implementing the expected
ComposioCanvaasAPIComponent class, and update
src/lfx/src/lfx/components/composio/timelinesai_composio.py to declare and
export ComposioTimelinesaiAPIComponent (matching the constructor/signature
pattern used by other Composio* components) so the dynamic imports are
consistent.
| "ComposioGmailAPIComponent": "gmail_composio", | ||
| "ComposioGoogleCalendarAPIComponent": "googlecalendar_composio", | ||
| "ComposioGooglemeetAPIComponent": "googlemeet_composio", | ||
| "ComposioOutlookAPIComponent": "outlook_composio", |
There was a problem hiding this comment.
Broken lazy import: wrong module name for Canvas.
"ComposioCanvaasAPIComponent" maps to "canvaas_composio" but the file is canvas_composio.py. This will raise AttributeError at runtime.
- "ComposioCanvaasAPIComponent": "canvaas_composio",
+ "ComposioCanvaasAPIComponent": "canvas_composio",📝 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.
| "ComposioCanvaasAPIComponent": "canvaas_composio", | |
| "ComposioCanvaasAPIComponent": "canvas_composio", |
🤖 Prompt for AI Agents
In src/lfx/src/lfx/components/composio/__init__.py around line 59, the mapping
uses the wrong module name "canvaas_composio" which doesn't match the actual
file canvas_composio.py and will cause an AttributeError; update the mapping
value to "canvas_composio" so the lazy import points to the correct module name,
then run the test or import path to verify the component loads correctly.
| class ComposioBrandfetchAPIComponent(ComposioBaseComponent): | ||
| display_name: str = "Brandfetch" | ||
| icon = "Brandfetch" | ||
| documentation: str = "https://docs.composio.dev" | ||
| app_name = "brandfetch" | ||
|
|
||
| def set_default_tools(self): | ||
| """Set the default tools for Brandfetch component.""" |
There was a problem hiding this comment.
🧩 Analysis chain
Consider curating default tools to reduce noise.
Base class falls back to the first few actions; optionally set a curated subset to improve UX.
class ComposioBrandfetchAPIComponent(ComposioBaseComponent):
display_name: str = "Brandfetch"
icon = "Brandfetch"
documentation: str = "https://docs.composio.dev"
app_name = "brandfetch"
def set_default_tools(self):
- """Set the default tools for Brandfetch component."""
+ """Set the default tools for Brandfetch component."""
+ # Example: pick a safe, representative subset if available.
+ # This assumes actions data is populated by the base.
+ if not hasattr(self, "_actions_data") or not self._actions_data:
+ self._populate_actions_data()
+ candidates = list(self._actions_data.keys())
+ # TODO: refine selection once action names are known (e.g., by prefix).
+ self._default_tools = set(candidates[:5])Ensure exports and icon mapping align:
Based on learnings.
🏁 Script executed:
#!/usr/bin/env bash
# __init__ export
rg -n "ComposioBrandfetchAPIComponent" src/lfx/src/lfx/components/composio/__init__.py
# Frontend icon mapping matches "Brandfetch"
rg -n "lazyIconsMapping" -C3 src/frontend/src/icons/lazyIconImports.tsLength of output: 439
Add missing frontend icon mapping for Brandfetch and optionally curate default tools
- In
frontend/src/icons/lazyIconImports.ts, add an entry for Brandfetch tolazyIconsMapping:Brandfetch: () => import("@/icons/Brandfetch").then((mod) => ({ default: mod.BrandfetchIcon })),
- Optionally, implement
set_default_toolsinsrc/lfx/src/lfx/components/composio/brandfetch_composio.pyto select a curated subset of actions (e.g., pick the first 5) instead of relying on the base fallback.
🤖 Prompt for AI Agents
In src/lfx/src/lfx/components/composio/brandfetch_composio.py around lines 4-11
and frontend/src/icons/lazyIconImports.ts, the frontend is missing an icon
mapping for Brandfetch and the backend component leaves set_default_tools
unimplemented; to fix add a lazyIconsMapping entry for "Brandfetch" that
dynamically imports the Brandfetch icon module and returns the BrandfetchIcon,
and in the Python component implement set_default_tools to select a curated
subset (e.g., the first 5) of available actions (fallback to the base
implementation if no actions exist) and assign them as the component's default
tools to avoid relying solely on the base fallback.
| class ComposioCanvaasAPIComponent(ComposioBaseComponent): | ||
| display_name: str = "Canvas" | ||
| icon = "Canvaas" | ||
| documentation: str = "https://docs.composio.dev" | ||
| app_name = "canvas" |
There was a problem hiding this comment.
Critical: “Canvaas” vs “Canvas” mismatch will break icon/export resolution.
Class and icon strings use “Canvaas” while display_name/app_name use “Canvas/canvas”. Standardize to “Canvas”. Update init exports and any dynamic import maps accordingly.
Suggested fix:
-class ComposioCanvaasAPIComponent(ComposioBaseComponent):
- display_name: str = "Canvas"
- icon = "Canvaas"
- documentation: str = "https://docs.composio.dev"
- app_name = "canvas"
+class ComposioCanvasAPIComponent(ComposioBaseComponent):
+ display_name: str = "Canvas"
+ icon = "Canvas"
+ documentation: str = "https://docs.composio.dev"
+ app_name = "canvas"Follow-ups:
- Rename file to canvas_composio.py class symbol accordingly.
- Ensure src/lfx/src/lfx/components/composio/init.py exports ComposioCanvasAPIComponent.
- Ensure frontend lazyIconImports uses key "Canvas" and the icon folder is icons/Canvas/.
As per coding guidelines
📝 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.
| class ComposioCanvaasAPIComponent(ComposioBaseComponent): | |
| display_name: str = "Canvas" | |
| icon = "Canvaas" | |
| documentation: str = "https://docs.composio.dev" | |
| app_name = "canvas" | |
| class ComposioCanvasAPIComponent(ComposioBaseComponent): | |
| display_name: str = "Canvas" | |
| icon = "Canvas" | |
| documentation: str = "https://docs.composio.dev" | |
| app_name = "canvas" |
🤖 Prompt for AI Agents
In src/lfx/src/lfx/components/composio/canvas_composio.py around lines 4 to 8,
the class and icon identifiers use the inconsistent spelling "Canvaas" while
display_name and app_name use "Canvas"/"canvas"; change the class symbol and the
icon value to "Canvas" (e.g., ComposioCanvasAPIComponent and icon = "Canvas"),
and update any related __init__ exports and dynamic import keys to match. Also
rename the file to canvas_composio.py if not already, update
src/lfx/src/lfx/components/composio/__init__.py to export
ComposioCanvasAPIComponent, and ensure frontend lazyIconImports/map keys and the
icon folder are "Canvas" (icons/Canvas/) so icon/export resolution is
consistent.
There was a problem hiding this comment.
Pull Request Overview
Copilot reviewed 30 out of 40 changed files in this pull request and generated 1 comment.
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| fill="None" | ||
| illOpacity="0.0" |
There was a problem hiding this comment.
The attribute 'illOpacity' appears to be a typo. It should be 'fillOpacity'.
edwinjosechittilappilly
left a comment
There was a problem hiding this comment.
LGTM aproving with commens since PR with fixes are required for composio base
|
Pull Request is not mergeable
* feat:new Composio components * fix: format * rm: Brandfetch & capsulecrm * updates components JSON * add component index --------- Co-authored-by: Edwin Jose <edwin.jose@datastax.com>



Components added:
agentql,agiled,bolna,brandfetch,brightdata,canvas,capsuleCrm,jira,timelinesai,digicert.Frontend:
Sep28newToolkits/langflow/src/frontend/src/iconsandSep28newToolkits/langflow/src/frontend/src/icons/lazyIconImports.tsBackend:
Sep28newToolkits/langflow/src/lfx/src/lfx/components/composioandSep28newToolkits/langflow/src/lfx/src/lfx/components/composio/__init__.pySummary by CodeRabbit