feat: add icons to API components and update Python icon SVG (#4794)

* add icons: wikipedia, serpapi, searchapi, glean, python, bing * update glean icon * formatting files * ✨ (create_data.py): add an icon attribute with the value "ListFilter" to improve visual representation of the component 📝 (python_code_structured_tool.py): update the icon attribute value from "🐍" to "Python" for better clarity and consistency --------- Co-authored-by: anovazzi1 <[email protected]>
langflow-ai · Nov 22, 2024 · 214d5a9 · 214d5a9
1 parent 0a42341
commit 214d5a9
Show file tree

Hide file tree

Showing 23 changed files with 8,664 additions and 181 deletions.
diff --git a/src/backend/base/langflow/components/processing/create_data.py b/src/backend/base/langflow/components/processing/create_data.py
@@ -14,6 +14,7 @@ class CreateDataComponent(Component):
     name: str = "CreateData"
     MAX_FIELDS = 15  # Define a constant for maximum number of fields
     legacy = True
+    icon = "ListFilter"
 
     inputs = [
         IntInput(

diff --git a/src/backend/base/langflow/components/tools/bing_search_api.py b/src/backend/base/langflow/components/tools/bing_search_api.py
@@ -13,6 +13,7 @@ class BingSearchAPIComponent(LCToolComponent):
     display_name = "Bing Search API"
     description = "Call the Bing Search API."
     name = "BingSearchAPI"
+    icon = "Bing"
 
     inputs = [
         SecretStrInput(name="bing_subscription_key", display_name="Bing Subscription Key"),

diff --git a/src/backend/base/langflow/components/tools/glean_search_api.py b/src/backend/base/langflow/components/tools/glean_search_api.py
@@ -100,6 +100,7 @@ class GleanSearchAPIComponent(LCToolComponent):
     display_name = "Glean Search API"
     description = "Call Glean Search API"
     name = "GleanAPI"
+    icon = "Glean"
 
     inputs = [
         StrInput(

diff --git a/src/backend/base/langflow/components/tools/python_code_structured_tool.py b/src/backend/base/langflow/components/tools/python_code_structured_tool.py
@@ -41,7 +41,7 @@ class PythonCodeStructuredTool(LCToolComponent):
     description = "structuredtool dataclass code to tool"
     documentation = "https://python.langchain.com/docs/modules/tools/custom_tools/#structuredtool-dataclass"
     name = "PythonCodeStructuredTool"
-    icon = "🐍"
+    icon = "Python"
     field_order = ["name", "description", "tool_code", "return_direct", "tool_function"]
     legacy: bool = True
 

diff --git a/src/backend/base/langflow/components/tools/python_repl.py b/src/backend/base/langflow/components/tools/python_repl.py
@@ -16,6 +16,7 @@ class PythonREPLToolComponent(LCToolComponent):
     display_name = "Python REPL"
     description = "A tool for running Python code in a REPL environment."
     name = "PythonREPLTool"
+    icon = "Python"
 
     inputs = [
         StrInput(

diff --git a/src/backend/base/langflow/components/tools/search_api.py b/src/backend/base/langflow/components/tools/search_api.py
@@ -15,6 +15,7 @@ class SearchAPIComponent(LCToolComponent):
     description: str = "Call the searchapi.io API with result limiting"
     name = "SearchAPI"
     documentation: str = "https://www.searchapi.io/docs/google"
+    icon = "SearchAPI"
 
     inputs = [
         MessageTextInput(name="engine", display_name="Engine", value="google"),

diff --git a/src/backend/base/langflow/components/tools/serp_api.py b/src/backend/base/langflow/components/tools/serp_api.py
@@ -33,6 +33,7 @@ class SerpAPIComponent(LCToolComponent):
     display_name = "Serp Search API"
     description = "Call Serp Search API with result limiting"
     name = "SerpAPI"
+    icon = "SerpSearch"
 
     inputs = [
         SecretStrInput(name="serpapi_api_key", display_name="SerpAPI API Key", required=True),

diff --git a/src/backend/base/langflow/components/tools/wikidata_api.py b/src/backend/base/langflow/components/tools/wikidata_api.py
@@ -56,6 +56,7 @@ class WikidataAPIComponent(LCToolComponent):
     display_name = "Wikidata API"
     description = "Performs a search using the Wikidata API."
     name = "WikidataAPI"
+    icon = "Wikipedia"
 
     inputs = [
         MultilineInput(

diff --git a/src/backend/base/langflow/components/tools/wikipedia_api.py b/src/backend/base/langflow/components/tools/wikipedia_api.py
@@ -13,6 +13,7 @@ class WikipediaAPIComponent(LCToolComponent):
     display_name = "Wikipedia API"
     description = "Call Wikipedia API."
     name = "WikipediaAPI"
+    icon = "Wikipedia"
 
     inputs = [
         MultilineInput(

diff --git a/src/frontend/src/icons/Glean/Glean.jsx b/src/frontend/src/icons/Glean/Glean.jsx
diff --git a/src/frontend/src/icons/Glean/glean.svg b/src/frontend/src/icons/Glean/glean.svg
diff --git a/src/frontend/src/icons/Glean/index.tsx b/src/frontend/src/icons/Glean/index.tsx
@@ -0,0 +1,8 @@
+import React, { forwardRef } from "react";
+import SvgGlean from "./Glean";
+
+export const GleanIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
+  (props, ref) => {
+    return <SvgGlean ref={ref} {...props} />;
+  },
+);
diff --git a/src/frontend/src/icons/Python/Python.jsx b/src/frontend/src/icons/Python/Python.jsx
@@ -1,156 +1,156 @@
 export const SvgPython = (props) => (
   <svg
+    width="1080"
+    height="1080"
+    version="1.0"
+    viewBox="0 0 810 810"
     xmlns="http://www.w3.org/2000/svg"
-    width={1000}
-    height={1000}
-    viewBox="0 0 750 750"
+    zoomAndPan="magnify"
     {...props}
   >
     <defs>
-      <clipPath id="a">
-        <path d="M45 42h493v494H45Zm0 0" />
-      </clipPath>
-      <clipPath id="b">
-        <path d="M375.207 42.145c-168.414 0-157.902 73.035-157.902 73.035l.207 75.664h160.703v22.699H153.64S45.906 201.313 45.906 371.262c0 169.906 94.055 163.894 94.055 163.894h56.137v-78.86s-3.028-94.054 92.562-94.054h159.375s89.555 1.453 89.555-86.547V130.188s13.601-88.043-162.383-88.043Zm-88.621 50.87c15.984 0 28.918 12.938 28.918 28.922 0 15.981-12.934 28.918-28.918 28.918-.95 0-1.895-.042-2.836-.136a28.448 28.448 0 0 1-5.563-1.098c-.906-.277-1.8-.594-2.675-.957-.875-.36-1.73-.766-2.567-1.21a29.522 29.522 0 0 1-2.437-1.458 29.114 29.114 0 0 1-6.29-5.703 28.46 28.46 0 0 1-1.69-2.281 27.818 27.818 0 0 1-1.458-2.434 29.596 29.596 0 0 1-1.215-2.566 28.942 28.942 0 0 1-2.055-8.238c-.09-.946-.136-1.891-.132-2.837 0-15.984 12.934-28.921 28.918-28.921Zm0 0" />
-      </clipPath>
-      <clipPath id="d">
-        <path d="M217 209h493v494H217Zm0 0" />
-      </clipPath>
       <clipPath id="e">
-        <path d="M379.977 702.059c168.414 0 157.902-73.036 157.902-73.036l-.207-75.664h-160.7V530.66h224.551s107.758 12.23 107.758-157.7c0-169.925-94.054-163.894-94.054-163.894H559.09v78.84s3.023 94.051-92.563 94.051H307.152s-89.558-1.45-89.558 86.55v145.509s-13.598 88.043 162.383 88.043Zm88.62-50.875a28.573 28.573 0 0 1-5.644-.547 29.24 29.24 0 0 1-2.754-.688 28.56 28.56 0 0 1-5.242-2.168 29.024 29.024 0 0 1-4.715-3.148 29.42 29.42 0 0 1-2.105-1.906 29.448 29.448 0 0 1-1.907-2.102 29.882 29.882 0 0 1-1.687-2.281 28.516 28.516 0 0 1-2.672-5.004 27.907 27.907 0 0 1-.953-2.676 27.808 27.808 0 0 1-.688-2.754 28.29 28.29 0 0 1-.414-2.808 28.598 28.598 0 0 1-.136-2.836c0-15.961 12.937-28.899 28.918-28.899 15.984 0 28.922 12.914 28.922 28.899 0 16.004-12.938 28.918-28.922 28.918Zm0 0" />
+        <path d="m0 0h601v602h-601z" />
+      </clipPath>
+      <clipPath id="a">
+        <path d="m402.21-0.085938c-205.55 0-192.71 89.121-192.71 89.121l0.22656 92.34h196.13v27.719h-274.04s-131.52-14.914-131.52 192.45c0 207.38 114.8 200.03 114.8 200.03h68.508v-96.242s-3.6914-114.79 112.96-114.79h194.54s109.28 1.7734 109.28-105.62v-177.56s16.609-107.46-198.18-107.46zm-108.16 62.09c19.512 0 35.277 15.77 35.277 35.281 0 19.516-15.766 35.285-35.277 35.285-19.516 0-35.289-15.77-35.289-35.285 0-19.512 15.773-35.281 35.289-35.281z" />
       </clipPath>
       <linearGradient
-        id="c"
-        x1={16.152}
-        x2={40.334}
-        y1={15.849}
-        y2={40.112}
-        gradientTransform="matrix(20.73047 0 0 20.73046 -285.782 -289.543)"
+        id="f"
+        x1=".0041684"
+        x2="1.0278"
+        y1="-.0040573"
+        y2="1.0116"
+        gradientTransform="matrix(600.39 0 0 601.69 .29686 -.08793)"
         gradientUnits="userSpaceOnUse"
       >
-        <stop offset={0} stopColor="#387EB8" />
-        <stop offset={0.125} stopColor="#387EB8" />
-        <stop offset={0.141} stopColor="#387EB7" />
-        <stop offset={0.156} stopColor="#387DB7" />
-        <stop offset={0.172} stopColor="#387DB6" />
-        <stop offset={0.188} stopColor="#387CB5" />
-        <stop offset={0.203} stopColor="#387CB4" />
-        <stop offset={0.219} stopColor="#387BB3" />
-        <stop offset={0.234} stopColor="#387BB2" />
-        <stop offset={0.25} stopColor="#387AB1" />
-        <stop offset={0.266} stopColor="#387AB1" />
-        <stop offset={0.281} stopColor="#3879B0" />
-        <stop offset={0.297} stopColor="#3879AF" />
-        <stop offset={0.313} stopColor="#3878AE" />
-        <stop offset={0.328} stopColor="#3778AD" />
-        <stop offset={0.344} stopColor="#3777AC" />
-        <stop offset={0.359} stopColor="#3777AB" />
-        <stop offset={0.375} stopColor="#3776AA" />
-        <stop offset={0.391} stopColor="#3776AA" />
-        <stop offset={0.406} stopColor="#3775A9" />
-        <stop offset={0.422} stopColor="#3775A8" />
-        <stop offset={0.438} stopColor="#3774A7" />
-        <stop offset={0.453} stopColor="#3774A6" />
-        <stop offset={0.469} stopColor="#3773A5" />
-        <stop offset={0.484} stopColor="#3773A4" />
-        <stop offset={0.498} stopColor="#3772A4" />
-        <stop offset={0.5} stopColor="#3772A3" />
-        <stop offset={0.502} stopColor="#3772A3" />
-        <stop offset={0.516} stopColor="#3771A2" />
-        <stop offset={0.531} stopColor="#3771A2" />
-        <stop offset={0.547} stopColor="#3771A1" />
-        <stop offset={0.563} stopColor="#3770A0" />
-        <stop offset={0.578} stopColor="#37709F" />
-        <stop offset={0.594} stopColor="#376F9E" />
-        <stop offset={0.609} stopColor="#376F9E" />
-        <stop offset={0.625} stopColor="#376E9D" />
-        <stop offset={0.641} stopColor="#376E9C" />
-        <stop offset={0.656} stopColor="#366D9B" />
-        <stop offset={0.672} stopColor="#366D9A" />
-        <stop offset={0.688} stopColor="#366C99" />
-        <stop offset={0.703} stopColor="#366C98" />
-        <stop offset={0.719} stopColor="#366B97" />
-        <stop offset={0.734} stopColor="#366B97" />
-        <stop offset={0.75} stopColor="#366A96" />
-        <stop offset={0.766} stopColor="#366A95" />
-        <stop offset={0.781} stopColor="#366994" />
-        <stop offset={0.813} stopColor="#366994" />
-        <stop offset={0.875} stopColor="#366994" />
-        <stop offset={1} stopColor="#366994" />
+        <stop stop-color="#387db8" offset="0" />
+        <stop stop-color="#387db8" offset=".125" />
+        <stop stop-color="#387db7" offset=".14062" />
+        <stop stop-color="#387db6" offset=".15625" />
+        <stop stop-color="#377cb5" offset=".17188" />
+        <stop stop-color="#377cb4" offset=".1875" />
+        <stop stop-color="#377bb4" offset=".20312" />
+        <stop stop-color="#377bb3" offset=".21875" />
+        <stop stop-color="#377ab2" offset=".23438" />
+        <stop stop-color="#377ab1" offset=".25" />
+        <stop stop-color="#3779b0" offset=".26562" />
+        <stop stop-color="#3779af" offset=".28125" />
+        <stop stop-color="#3778ae" offset=".29688" />
+        <stop stop-color="#3778ad" offset=".3125" />
+        <stop stop-color="#3777ad" offset=".32812" />
+        <stop stop-color="#3777ac" offset=".34375" />
+        <stop stop-color="#3776ab" offset=".35938" />
+        <stop stop-color="#3776aa" offset=".375" />
+        <stop stop-color="#3775a9" offset=".39062" />
+        <stop stop-color="#3775a8" offset=".40625" />
+        <stop stop-color="#3774a7" offset=".42188" />
+        <stop stop-color="#3774a7" offset=".4375" />
+        <stop stop-color="#3773a6" offset=".45312" />
+        <stop stop-color="#3773a5" offset=".46875" />
+        <stop stop-color="#3672a4" offset=".48438" />
+        <stop stop-color="#3672a3" offset=".49434" />
+        <stop stop-color="#3671a3" offset=".5" />
+        <stop stop-color="#3671a2" offset=".50566" />
+        <stop stop-color="#3671a2" offset=".51562" />
+        <stop stop-color="#3671a1" offset=".53125" />
+        <stop stop-color="#3670a0" offset=".54688" />
+        <stop stop-color="#3670a0" offset=".5625" />
+        <stop stop-color="#366f9f" offset=".57812" />
+        <stop stop-color="#366f9e" offset=".59375" />
+        <stop stop-color="#366e9d" offset=".60938" />
+        <stop stop-color="#366e9c" offset=".625" />
+        <stop stop-color="#366d9b" offset=".64062" />
+        <stop stop-color="#366d9a" offset=".65625" />
+        <stop stop-color="#366c9a" offset=".67188" />
+        <stop stop-color="#366c99" offset=".6875" />
+        <stop stop-color="#366b98" offset=".70312" />
+        <stop stop-color="#366b97" offset=".71875" />
+        <stop stop-color="#366a96" offset=".73438" />
+        <stop stop-color="#366a95" offset=".75" />
+        <stop stop-color="#366994" offset=".76562" />
+        <stop stop-color="#366994" offset=".78125" />
+        <stop stop-color="#366993" offset=".8125" />
+        <stop stop-color="#366993" offset=".875" />
+        <stop stop-color="#366993" offset="1" />
       </linearGradient>
+      <clipPath id="c">
+        <path d="m209 203h601v602.5h-601z" />
+      </clipPath>
+      <clipPath id="b">
+        <path d="m408.04 805.28c205.53 0 192.69-89.141 192.69-89.141l-0.22266-92.344h-196.14v-27.703h274.04s131.54 14.898 131.54-192.45c0-207.38-114.8-200.02-114.8-200.02h-68.508v96.227s3.6758 114.8-112.96 114.8h-194.56s-109.29-1.7734-109.29 105.62v177.55s-16.594 107.46 198.21 107.46zm108.14-62.102c-19.5 0-35.285-15.785-35.285-35.281 0-19.527 15.785-35.281 35.285-35.281 19.527 0 35.285 15.754 35.285 35.281 0 19.496-15.758 35.281-35.285 35.281z" />
+      </clipPath>
       <linearGradient
-        id="f"
-        x1={23.548}
-        x2={48.282}
-        y1={23.842}
-        y2={47.538}
-        gradientTransform="matrix(20.73047 0 0 20.73046 -285.782 -289.543)"
+        id="d"
+        x1="-.032645"
+        x2="1.014"
+        y1="-.0063659"
+        y2=".98525"
+        gradientTransform="matrix(600.4 0 0 601.7 209.54 203.58)"
         gradientUnits="userSpaceOnUse"
       >
-        <stop offset={0} stopColor="#FFE052" />
-        <stop offset={0.125} stopColor="#FFE052" />
-        <stop offset={0.188} stopColor="#FFE052" />
-        <stop offset={0.219} stopColor="#FFE052" />
-        <stop offset={0.234} stopColor="#FFDF51" />
-        <stop offset={0.25} stopColor="#FFDF51" />
-        <stop offset={0.266} stopColor="#FFDE50" />
-        <stop offset={0.281} stopColor="#FFDD4F" />
-        <stop offset={0.297} stopColor="#FFDD4E" />
-        <stop offset={0.313} stopColor="#FFDC4E" />
-        <stop offset={0.328} stopColor="#FFDB4D" />
-        <stop offset={0.344} stopColor="#FFDB4C" />
-        <stop offset={0.359} stopColor="#FFDA4B" />
-        <stop offset={0.375} stopColor="#FFD94B" />
-        <stop offset={0.391} stopColor="#FFD94A" />
-        <stop offset={0.406} stopColor="#FFD849" />
-        <stop offset={0.422} stopColor="#FFD748" />
-        <stop offset={0.438} stopColor="#FFD748" />
-        <stop offset={0.453} stopColor="#FFD647" />
-        <stop offset={0.469} stopColor="#FFD546" />
-        <stop offset={0.484} stopColor="#FFD545" />
-        <stop offset={0.486} stopColor="#FFD445" />
-        <stop offset={0.5} stopColor="#FFD444" />
-        <stop offset={0.514} stopColor="#FFD444" />
-        <stop offset={0.516} stopColor="#FFD343" />
-        <stop offset={0.531} stopColor="#FFD343" />
-        <stop offset={0.547} stopColor="#FFD242" />
-        <stop offset={0.563} stopColor="#FFD242" />
-        <stop offset={0.578} stopColor="#FFD141" />
-        <stop offset={0.594} stopColor="#FFD040" />
-        <stop offset={0.609} stopColor="#FFD03F" />
-        <stop offset={0.625} stopColor="#FFCF3F" />
-        <stop offset={0.641} stopColor="#FFCE3E" />
-        <stop offset={0.656} stopColor="#FFCE3D" />
-        <stop offset={0.672} stopColor="#FFCD3C" />
-        <stop offset={0.688} stopColor="#FFCC3C" />
-        <stop offset={0.703} stopColor="#FFCC3B" />
-        <stop offset={0.719} stopColor="#FFCB3A" />
-        <stop offset={0.734} stopColor="#FFCA39" />
-        <stop offset={0.75} stopColor="#FFCA39" />
-        <stop offset={0.766} stopColor="#FFC938" />
-        <stop offset={0.781} stopColor="#FFC837" />
-        <stop offset={0.797} stopColor="#FFC836" />
-        <stop offset={0.813} stopColor="#FFC736" />
-        <stop offset={0.828} stopColor="#FFC635" />
-        <stop offset={0.844} stopColor="#FFC634" />
-        <stop offset={0.859} stopColor="#FFC533" />
-        <stop offset={0.875} stopColor="#FFC433" />
-        <stop offset={0.891} stopColor="#FFC432" />
-        <stop offset={0.906} stopColor="#FFC331" />
-        <stop offset={0.938} stopColor="#FFC331" />
-        <stop offset={1} stopColor="#FFC331" />
+        <stop stop-color="#ffdf52" offset="0" />
+        <stop stop-color="#ffdf52" offset=".125" />
+        <stop stop-color="#ffdf52" offset=".1875" />
+        <stop stop-color="#ffdf51" offset=".21875" />
+        <stop stop-color="#ffdf51" offset=".23438" />
+        <stop stop-color="#ffde50" offset=".25" />
+        <stop stop-color="#ffde4f" offset=".26562" />
+        <stop stop-color="#ffdd4f" offset=".28125" />
+        <stop stop-color="#ffdc4e" offset=".29688" />
+        <stop stop-color="#ffdc4d" offset=".3125" />
+        <stop stop-color="#ffdb4c" offset=".32812" />
+        <stop stop-color="#ffda4c" offset=".34375" />
+        <stop stop-color="#ffda4b" offset=".35938" />
+        <stop stop-color="#ffd94a" offset=".375" />
+        <stop stop-color="#ffd849" offset=".39062" />
+        <stop stop-color="#ffd849" offset=".40625" />
+        <stop stop-color="#ffd748" offset=".42188" />
+        <stop stop-color="#ffd647" offset=".4375" />
+        <stop stop-color="#ffd646" offset=".45312" />
+        <stop stop-color="#ffd546" offset=".46875" />
+        <stop stop-color="#ffd445" offset=".48284" />
+        <stop stop-color="#ffd445" offset=".48438" />
+        <stop stop-color="#ffd444" offset=".5" />
+        <stop stop-color="#ffd343" offset=".51562" />
+        <stop stop-color="#ffd243" offset=".51716" />
+        <stop stop-color="#ffd242" offset=".53125" />
+        <stop stop-color="#ffd242" offset=".54688" />
+        <stop stop-color="#ffd141" offset=".5625" />
+        <stop stop-color="#ffd040" offset=".57812" />
+        <stop stop-color="#ffd040" offset=".59375" />
+        <stop stop-color="#ffcf3f" offset=".60938" />
+        <stop stop-color="#ffce3e" offset=".625" />
+        <stop stop-color="#ffce3d" offset=".64062" />
+        <stop stop-color="#ffcd3d" offset=".65625" />
+        <stop stop-color="#ffcc3c" offset=".67188" />
+        <stop stop-color="#ffcc3b" offset=".6875" />
+        <stop stop-color="#ffcb3a" offset=".70312" />
+        <stop stop-color="#ffca3a" offset=".71875" />
+        <stop stop-color="#ffca39" offset=".73438" />
+        <stop stop-color="#ffc938" offset=".75" />
+        <stop stop-color="#ffc837" offset=".76562" />
+        <stop stop-color="#ffc836" offset=".78125" />
+        <stop stop-color="#ffc736" offset=".79688" />
+        <stop stop-color="#ffc735" offset=".8125" />
+        <stop stop-color="#ffc634" offset=".82812" />
+        <stop stop-color="#ffc533" offset=".84375" />
+        <stop stop-color="#ffc533" offset=".85938" />
+        <stop stop-color="#ffc432" offset=".875" />
+        <stop stop-color="#ffc331" offset=".89062" />
+        <stop stop-color="#ffc331" offset=".90625" />
+        <stop stop-color="#ffc330" offset=".9375" />
+        <stop stop-color="#ffc330" offset="1" />
       </linearGradient>
     </defs>
-    <path fill="#fff" d="M-75-75h900v900H-75z" />
-    <path fill="#fff" d="M-75-75h900v900H-75z" />
-    <g clipPath="url(#a)">
-      <g clipPath="url(#b)">
-        <path fill="url(#c)" d="M45.906 42.145v499.023h505.285V42.145Zm0 0" />
+    <g clip-path="url(#e)">
+      <g clip-path="url(#a)">
+        <path d="m0.29688 0v608.93h616.7v-608.93z" fill="url(#f)" />
       </g>
     </g>
-    <g clipPath="url(#d)">
-      <g clipPath="url(#e)">
-        <path fill="url(#f)" d="M203.996 203.035V702.06h505.285V203.035Zm0 0" />
+    <g clip-path="url(#c)">
+      <g clip-path="url(#b)">
+        <path d="m193.24 196.26v609.02h616.7v-609.02z" fill="url(#d)" />
       </g>
     </g>
   </svg>