Skip to content

feat: updated Composio Github icon #10764

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
edwinjosechittilappilly merged 2 commits into from
Dec 8, 2025
Merged

feat: updated Composio Github icon #10764

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5068b0c
feat: updated Composio Github component
Uday-sidagana Nov 27, 2025
01022ae
Merge branch 'main' into pr/10764
edwinjosechittilappilly Dec 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 75 additions & 0 deletions src/frontend/src/icons/GithubComposio/github.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
const Icon = (props) => (
<svg
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="250 250 500 500"
style={{ enableBackground: "new 0 0 1000 1000" }}
xmlSpace="preserve"
{...props}
>
<rect
x="0"
y="0"
width="1000"
height="1000"
rx="100"
ry="100"
fill="#111011"
/>
<g>
<path
fillRule="evenodd"
clipRule="evenodd"
fill="#FFFFFF"
d="M500,322.5c-100.5,0-182,81.5-182,182c0,80.4,52.1,148.6,124.5,172.7c9.1,1.7,12.4-3.9,12.4-8.8
c0-4.3-0.2-18.7-0.2-33.9c-50.6,11-61.3-21.5-61.3-21.5c-8.3-21-20.2-26.6-20.2-26.6c-16.5-11.3,1.2-11.1,1.2-11.1
c18.3,1.3,27.9,18.8,27.9,18.8c16.2,27.8,42.6,19.8,53,15.1c1.6-11.8,6.3-19.8,11.6-24.3c-40.4-4.6-82.9-20.2-82.9-89.9
c0-19.9,7.1-36.1,18.8-48.8c-1.9-4.6-8.1-23.1,1.8-48.2c0,0,15.3-4.9,50.1,18.7c14.5-4,30.1-6.1,45.6-6.1c15.5,0.1,31,2.1,45.6,6.1
c34.7-23.5,50-18.7,50-18.7c9.9,25.1,3.7,43.6,1.8,48.2c11.7,12.7,18.7,29,18.7,48.8c0,69.9-42.6,85.3-83.1,89.8
c6.5,5.6,12.3,16.7,12.3,33.7c0,24.3-0.2,43.9-0.2,49.9c0,4.8,3.3,10.5,12.5,8.7C629.9,653.1,682,584.9,682,504.5
C682,404,600.5,322.5,500,322.5z"
/>
<path
fill="#FFFFFF"
d="M386.9,583.8c-0.4,0.9-1.8,1.2-3.1,0.6c-1.3-0.6-2.1-1.8-1.6-2.7c0.4-0.9,1.8-1.2,3.1-0.6
C386.6,581.6,387.4,582.9,386.9,583.8L386.9,583.8z M384.7,582.1"
/>
<path
fill="#FFFFFF"
d="M394.3,592c-0.9,0.8-2.6,0.4-3.7-0.8c-1.2-1.3-1.4-3-0.5-3.8c0.9-0.8,2.5-0.4,3.7,0.8
C395,589.5,395.2,591.2,394.3,592L394.3,592z M392.6,590.2"
/>
<path
fill="#FFFFFF"
d="M401.5,602.5c-1.1,0.8-2.9,0.1-4.1-1.6c-1.1-1.6-1.1-3.6,0-4.3c1.1-0.8,2.9-0.1,4.1,1.5
C402.6,599.8,402.6,601.7,401.5,602.5L401.5,602.5z M401.5,602.5"
/>
<path
fill="#FFFFFF"
d="M411.3,612.6c-1,1.1-3.1,0.8-4.7-0.7c-1.6-1.5-2-3.5-1-4.6c1-1.1,3.1-0.8,4.7,0.7
C411.9,609.4,412.4,611.5,411.3,612.6L411.3,612.6z M411.3,612.6"
/>
<path
fill="#FFFFFF"
d="M424.9,618.5c-0.4,1.4-2.5,2.1-4.5,1.5c-2.1-0.6-3.4-2.3-3-3.7c0.4-1.4,2.5-2.1,4.6-1.5
C424,615.4,425.3,617.1,424.9,618.5L424.9,618.5z M424.9,618.5"
/>
<path
fill="#FFFFFF"
d="M439.8,619.6c0.1,1.5-1.7,2.7-3.9,2.8c-2.2,0.1-3.9-1.2-4-2.6c0-1.5,1.7-2.7,3.9-2.8
C438,616.9,439.8,618.1,439.8,619.6L439.8,619.6z M439.8,619.6"
/>
<path
fill="#FFFFFF"
d="M453.6,617.2c0.3,1.5-1.2,3-3.4,3.4c-2.1,0.4-4.1-0.5-4.3-2c-0.3-1.5,1.3-3,3.4-3.4
C451.4,614.9,453.4,615.7,453.6,617.2L453.6,617.2z M453.6,617.2"
/>
</g>
</svg>
);

export default Icon;
Comment on lines +1 to +75
Copy link
Contributor

@coderabbitai coderabbitai bot Nov 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion | 🟠 Major

Use isDark prop to drive SVG colors for dark‑mode support

The SVG currently hardcodes fill colors and ignores props.isDark, so the icon does not actually react to theme changes as required by the icon/dark‑mode guidelines. Please wire the fills to isDark so the logo adapts between light and dark schemes. For example:

-const Icon = (props) => (
+const Icon = (props) => (
   <svg
@@
-    <rect
+    <rect
       x="0"
       y="0"
       width="1000"
       height="1000"
       rx="100"
       ry="100"
-      fill="#111011"
+      fill={props.isDark ? "#ffffff" : "#111011"}
     />
@@
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        fill="#FFFFFF"
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        fill={props.isDark ? "#0A0A0A" : "#FFFFFF"}
@@
-      <path
-        fill="#FFFFFF"
+      <path
+        fill={props.isDark ? "#0A0A0A" : "#FFFFFF"}
@@
-      <path
-        fill="#FFFFFF"
+      <path
+        fill={props.isDark ? "#0A0A0A" : "#FFFFFF"}
@@
-      <path
-        fill="#FFFFFF"
+      <path
+        fill={props.isDark ? "#0A0A0A" : "#FFFFFF"}
@@
-      <path
-        fill="#FFFFFF"
+      <path
+        fill={props.isDark ? "#0A0A0A" : "#FFFFFF"}
@@
-      <path
-        fill="#FFFFFF"
+      <path
+        fill={props.isDark ? "#0A0A0A" : "#FFFFFF"}

(Adjust exact colors as needed to match your design, but please base them on props.isDark.)

Based on learnings, SVG icon components should consume an isDark prop to switch between light and dark color schemes.

🤖 Prompt for AI Agents 
In src/frontend/src/icons/GithubComposio/github.jsx lines 1-75, the SVG fills
are hardcoded and ignore props.isDark; update the component to derive fill
colors from props.isDark (e.g., const bg = props.isDark ? darkBgColor :
lightBgColor; const fg = props.isDark ? darkFgColor : lightFgColor) and replace
the hardcoded fill="#111011" on the rect and fill="#FFFFFF" on the paths with
these variables (use sensible defaults when isDark is undefined), ensuring you
continue to spread {...props} and do not remove existing attributes like viewBox
or style.

43 changes: 43 additions & 0 deletions src/frontend/src/icons/GithubComposio/github.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions src/frontend/src/icons/GithubComposio/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import React, { forwardRef } from "react";
import GithubIconSVG from "./github";

export const GithubIcon = forwardRef<
SVGSVGElement,
React.PropsWithChildren<{}>
>((props, ref) => {
return <GithubIconSVG ref={ref} {...props} />;
});
4 changes: 4 additions & 0 deletions src/frontend/src/icons/lazyIconImports.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -200,6 +200,10 @@ export const lazyIconsMapping = {
import("@/icons/GitLoader").then((mod) => ({ default: mod.GitLoaderIcon })),
Github: () =>
import("@/icons/github").then((mod) => ({ default: mod.GithubIcon })),
GithubComposio: () =>
import("@/icons/GithubComposio").then((mod) => ({
default: mod.GithubIcon,
})),
Glean: () =>
import("@/icons/Glean").then((mod) => ({ default: mod.GleanIcon })),
GlobeOk: () =>
Expand Down
2 changes: 1 addition & 1 deletion src/lfx/src/lfx/components/composio/github.amrom.workers.devposio.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

class ComposioGitHubAPIComponent(ComposioBaseComponent):
display_name: str = "GitHub"
icon = "Github"
icon = "GithubComposio"
documentation: str = "https://docs.composio.dev"
app_name = "github"

Expand Down
Loading