Add a SVG method to the icon component (#645)

src/frontend/src/components/genericIconComponent/index.tsx

@@ -1,12 +1,19 @@
-/* import React, { forwardRef } from "react";
+import { FC } from "react";
+import SvgGoogle from "../../icons/Google/Google";
+import SvgBing from "../../icons/Bing/Bing";
+import { IconComponentProps, SvgIconProps } from "../../types/components";
+import { svgIcons } from "../../utils";
 
-export default function IconComponent(icon, props, ref) {
+export function IconFromSvg({ name }: SvgIconProps): JSX.Element {
+  const TargetSvg = svgIcons[name]
   return (
-    forwardRef<
-      SVGSVGElement,
-      React.PropsWithChildren<{}>
-    >((props, ref) => {
-      return < ref={ref} {...props} />;
-    })
+    <TargetSvg />
   );
-} */
+}
+
+export default function IconComponent({ method, name }: IconComponentProps): JSX.Element {
+  switch (method) {
+    case 'SVG':
+      return <IconFromSvg name={ name } />
+  }
+}

src/frontend/src/icons/Anthropic/Anthropic.jsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+const SvgAnthropic = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="-170.333 113.047 600 67.4"
+    {...props}
+  >
+    <path
+      d="M-23.533 126.747h21.9v52.6h14v-52.6h21.9v-12.6h-57.8v12.6Zm-24.6 33-29.3-45.6h-15.8v65.1h13.5v-45.6l29.3 45.7h15.8v-65.1h-13.5v45.5Zm138.2-19.6h-30.7v-26h-14v65.1h14v-26.6h30.7v26.6h14v-65.1h-14v26Zm-234.4-26-26 65.1h14.5l5.3-13.7h27.2l5.3 13.7h14.5l-26-65.1h-14.8Zm-1.5 39.4 8.9-22.9 8.9 22.9h-17.8Zm365.5-40.5c-18.8 0-32.1 14-32.1 33.8 0 19.6 13.3 33.6 32.1 33.6 18.7 0 31.9-14 31.9-33.6 0-19.8-13.2-33.8-31.9-33.8Zm0 54.4c-11 0-17.7-7.8-17.7-20.6 0-12.9 6.7-20.8 17.7-20.8 10.9 0 17.5 7.8 17.5 20.8 0 12.7-6.6 20.6-17.5 20.6Zm195.1-10c-2.4 6.3-7.3 10-13.9 10-11 0-17.7-7.8-17.7-20.6 0-12.9 6.7-20.8 17.7-20.8 6.6 0 11.4 3.6 13.9 10h14.8c-3.6-14-14.5-23-28.7-23-18.8 0-32.1 14-32.1 33.8 0 19.6 13.3 33.6 32.1 33.6 14.2 0 25.1-9.1 28.8-23h-14.9Zm-88.9-43.3 26 65.1h14.2l-26-65.1h-14.2Zm-29.5 0h-31.8v65.1h14v-23.6h17.9c14.8 0 23.8-7.8 23.8-20.8 0-12.9-9.1-20.7-23.9-20.7Zm-.6 29h-17.2v-16.4h17.2c6.9 0 10.5 2.8 10.5 8.2 0 5.4-3.6 8.2-10.5 8.2Zm-118.9-9.1c0-12.3-9-19.8-23.8-19.8h-31.8v65.1h14v-25.5h15.5l14 25.5h15.4l-15.5-27.4c7.7-3.1 12.2-9.3 12.2-17.9Zm-41.7-7.3h17.2c6.9 0 10.5 2.5 10.5 7.3 0 4.7-3.6 7.3-10.5 7.3h-17.2v-14.6Z"
+      style={{
+        fill: "#1f1f1e",
+      }}
+    />
+  </svg>
+);
+export default SvgAnthropic;

src/frontend/src/icons/Anthropic/AnthropicBox.jsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+const SvgAnthropicBox = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="-126.9 247.9 207.161 212.728"
+    {...props}
+  >
+    <defs>
+      <style>{".anthropic_box_svg__st0{fill:#1f1f1e}"}</style>
+    </defs>
+    <path
+      d="M19.9 260.5h21.9v52.6h14v-52.6h21.9v-12.6H19.9v12.6Zm-24.6 33L-34 247.9h-15.8V313h13.5v-45.6L-7 313.1H8.8V248H-4.7v45.5Zm-96.2-45.6-26 65.1h14.5l5.3-13.7h27.2l5.3 13.7h14.5l-26-65.1h-14.8Zm-1.5 39.4 8.9-22.9 8.9 22.9h-17.8ZM38.246 437.628c-2.4 6.3-7.3 10-13.9 10-11 0-17.7-7.8-17.7-20.6 0-12.9 6.7-20.8 17.7-20.8 6.6 0 11.4 3.6 13.9 10h14.8c-3.6-14-14.5-23-28.7-23-18.8 0-32.1 14-32.1 33.8 0 19.6 13.3 33.6 32.1 33.6 14.2 0 25.1-9.1 28.8-23h-14.9Zm-88.9-43.3 26 65.1h14.2l-26-65.1h-14.2Zm-29.5 0h-31.8v65.1h14v-23.6h17.9c14.8 0 23.8-7.8 23.8-20.8 0-12.9-9.1-20.7-23.9-20.7Zm-.6 29h-17.2v-16.4h17.2c6.9 0 10.5 2.8 10.5 8.2 0 5.4-3.6 8.2-10.5 8.2ZM-81.239 347.704h-30.7v-26h-14v65.1h14v-26.6h30.7v26.6h14v-65.1h-14v26Zm129.6-27.1c-18.8 0-32.1 14-32.1 33.8 0 19.6 13.3 33.6 32.1 33.6 18.7 0 31.9-14 31.9-33.6 0-19.8-13.2-33.8-31.9-33.8Zm0 54.4c-11 0-17.7-7.8-17.7-20.6 0-12.9 6.7-20.8 17.7-20.8 10.9 0 17.5 7.8 17.5 20.8 0 12.7-6.6 20.6-17.5 20.6Zm-42.8-33.4c0-12.3-9-19.8-23.8-19.8h-31.8v65.1h14v-25.5h15.5l14 25.5h15.4l-15.5-27.4c7.7-3.1 12.2-9.3 12.2-17.9Zm-41.7-7.3h17.2c6.9 0 10.5 2.5 10.5 7.3 0 4.7-3.6 7.3-10.5 7.3h-17.2v-14.6Z"
+      className="anthropic_box_svg__st0"
+    />
+  </svg>
+);
+export default SvgAnthropicBox;

src/frontend/src/icons/Anthropic/index.tsx

@@ -1,9 +1,9 @@
 import React, { forwardRef } from "react";
-import { ReactComponent as AnthropicSVG } from "./anthropic_box.svg";
+import SvgAnthropicBox from "./AnthropicBox";
 
 export const AnthropicIcon = forwardRef<
   SVGSVGElement,
   React.PropsWithChildren<{}>
 >((props, ref) => {
-  return <AnthropicSVG ref={ref} {...props} />;
+  return <SvgAnthropicBox ref={ref} {...props} />;
 });

src/frontend/src/icons/Notion/index.tsx

@@ -1,9 +1,9 @@
 import React, { forwardRef } from "react";
-import { ReactComponent as NotionSVG } from "./Notion-logo.svg";
+import SvgNotionLogo from "./NotionLogo";
 
 export const NotionIcon = forwardRef<
   SVGSVGElement,
   React.PropsWithChildren<{}>
 >((props, ref) => {
-  return <NotionSVG ref={ref} {...props} />;
+  return <SvgNotionLogo ref={ref} {...props} />;
 });

src/frontend/src/pages/FlowPage/index.tsx

@@ -3,6 +3,7 @@ import { useParams } from "react-router-dom";
 import { TabsContext } from "../../contexts/tabsContext";
 import { getVersion } from "../../controllers/API";
 import Page from "./components/PageComponent";
+import IconComponent from "../../components/genericIconComponent";
 
 export default function FlowPage() {
   const { flows, tabId, setTabId } = useContext(TabsContext);

src/frontend/src/types/components/index.ts

@@ -161,3 +161,12 @@ export type TextHighlightType = {
 export interface IVarHighlightType {
   name: string;
 }
+
+export type SvgIconProps = {
+  name: string;
+}
+
+export type IconComponentProps = {
+  method: string;
+  name: string;
+}

src/frontend/src/utils.ts

@@ -50,6 +50,36 @@ import { SupabaseIcon } from "./icons/supabase";
 import { APITemplateType } from "./types/api";
 import { IVarHighlightType } from "./types/components";
 import { FlowType, NodeType } from "./types/flow";
+import SvgAirbyte from "./icons/Airbyte/Airbyte";
+import SvgAnthropicBox from "./icons/Anthropic/AnthropicBox";
+import SvgBing from "./icons/Bing/Bing";
+import SvgChroma from "./icons/ChromaIcon/Chroma";
+import SvgCohere from "./icons/Cohere/Cohere";
+import SvgEvernoteIcon from "./icons/Evernote/EvernoteIcon";
+import SvgFacebookMessengerLogo2020 from "./icons/FacebookMessenger/FacebookMessengerLogo2020";
+import SvgGitbookSvgrepoCom from "./icons/GitBook/GitbookSvgrepoCom";
+import SvgGoogle from "./icons/Google/Google";
+import SvgYCombinatorLogo from "./icons/hackerNews/YCombinatorLogo";
+import SvgHfLogo from "./icons/HuggingFace/HfLogo";
+import SvgIfixitSeeklogocom from "./icons/IFixIt/IfixitSeeklogoCom";
+import SvgMetaIcon from "./icons/Meta/MetaIcon";
+import SvgMidjourneyEmblem from "./icons/Midjorney/MidjourneyEmblem";
+import SvgMongodbIcon from "./icons/MongoDB/MongodbIcon";
+import SvgNotionLogo from "./icons/Notion/NotionLogo";
+import SvgOpenAi from "./icons/OpenAi/OpenAi";
+import SvgPineconeLogo from "./icons/Pinecone/PineconeLogo";
+import SvgPowerPoint from "./icons/PowerPoint/PowerPoint";
+import SvgQDrant from "./icons/QDrant/QDrant";
+import SvgReadthedocsioIcon from "./icons/ReadTheDocs/ReadthedocsioIcon";
+import SvgSearxLogo from "./icons/Searx/SearxLogo";
+import SvgSerper from "./icons/Serper/Serper";
+import SvgSlackIcon from "./icons/Slack/SlackIcon";
+import SvgSupabaseIcon from "./icons/supabase/SupabaseIcon";
+import SvgVertexAi from "./icons/VertexAI/VertexAi";
+import SvgWeaviate from "./icons/Weaviate/Weaviate";
+import SvgWikipedia from "./icons/Wikipedia/Wikipedia";
+import SvgWolfram from "./icons/Wolfram/Wolfram";
+import SvgWord from "./icons/Word/Word";
 
 export function classNames(...classes: Array<string>) {
   return classes.filter(Boolean).join(" ");
@@ -62,6 +92,39 @@ export enum TypeModal {
   PROMPT = 2,
 }
 
+export const svgIcons = {
+  Airbyte: SvgAirbyte,
+  Anthropic: SvgAnthropicBox,
+  Bing: SvgBing,
+  ChromaIcon: SvgChroma,
+  Cohere: SvgCohere,
+  Evernote: SvgEvernoteIcon,
+  FacebookMessenger: SvgFacebookMessengerLogo2020,
+  GitBook: SvgGitbookSvgrepoCom,
+  Google: SvgGoogle,
+  HackerNews: SvgYCombinatorLogo,
+  HuggingFace: SvgHfLogo,
+  IFixIt: SvgIfixitSeeklogocom,
+  Meta: SvgMetaIcon,
+  MidJorney: SvgMidjourneyEmblem,
+  MongoDB: SvgMongodbIcon,
+  Notion: SvgNotionLogo,
+  OpenAi: SvgOpenAi,
+  Pinecone: SvgPineconeLogo,
+  PowerPoint: SvgPowerPoint,
+  QDrant: SvgQDrant,
+  ReadTheDocs: SvgReadthedocsioIcon,
+  Searx: SvgSearxLogo,
+  Serper: SvgSerper,
+  Slack: SvgSlackIcon,
+  Supabase: SvgSupabaseIcon,
+  VertexAI: SvgVertexAi,
+  Weaviate: SvgWeaviate,
+  Wikipedia: SvgWikipedia,
+  Wolfram: SvgWolfram,
+  Word: SvgWord,
+};
+
 export const textColors = {
   white: "text-white",
   red: "text-red-700",