General
PromptBeginner5 minmarkdown
<h1 align="center">
<a href="https://prompts.chat">
5
Rules for creating and implementing component icons in Langflow, covering both backend Python component icon attributes and frontend React icon implementation.
Sign in to like and favorite skills
description: "Rules for creating and implementing component icons in Langflow, covering both backend Python component icon attributes and frontend React icon implementation." globs:
To ensure consistent, clear, and functional icon usage for components, covering both backend (Python) and frontend (React/TypeScript) steps.
src/backend/base/langflow/components/vectorstores/astradb.py)icon attribute to a string matching the icon you want to use.
icon = "AstraDB"
Where: In a new directory for your icon, e.g.,
src/frontend/src/icons/AstraDB/.
How:
Add your SVG as a React component, e.g.,
AstraSVG in AstraDB.jsx.
const AstraSVG = (props) => ( <svg {...props}> <path // ... /> </svg> );
Create an
index.tsx that exports your icon using forwardRef:
import React, { forwardRef } from "react"; import AstraSVG from "./AstraDB"; export const AstraDBIcon = forwardRef< SVGSVGElement, React.PropsWithChildren<{}> >((props, ref) => { return <AstraSVG ref={ref} isDark={isDark} {...props} />; });
AstraDB.jsx), use the isDark prop to switch colors:
const AstraSVG = (props) => ( <svg {...props}> <path fill={props.isDark ? "#ffffff" : "#0A0A0A"} // ... /> </svg> );
isDark prop is passed from the icon wrapper (see above) and should be used to toggle between light and dark color schemes.stringToBool to ensure the prop is interpreted correctly.src/frontend/src/icons/lazyIconImports.tslazyIconsMapping object:
AstraDB: () => import("@/icons/AstraDB").then((mod) => ({ default: mod.AstraDBIcon })),
AstraDB) must match the string used in the backend."AstraDB", "Postgres", "OpenAI").isDark prop in your SVG.AstraDB).icon = "YourIconName".src/frontend/src/icons/YourIconName/.YourIconNameIcon.jsx).index.tsx that exports your icon using forwardRef and passes the isDark prop.lazyIconsMapping in src/frontend/src/icons/lazyIconImports.ts with the exact same name.Example for AstraDB:
icon = "AstraDB"
src/icons/AstraDB/AstraDB.jsx (SVG as React component, uses isDark prop)src/icons/AstraDB/index.tsx (exports AstraDBIcon and passes isDark)lazyIconImports.ts:
AstraDB: () => import("@/icons/AstraDB").then((mod) => ({ default: mod.AstraDBIcon })),