Merge pull request #63 from langflow-ai/docs-add-lucide-react-library-and-icon-component

docs: add lucide react library and icon component

docs/package-lock.json

@@ -12,6 +12,7 @@
         "@docusaurus/preset-classic": "3.8.1",
         "@mdx-js/react": "^3.0.0",
         "clsx": "^2.0.0",
+        "lucide-react": "^0.544.0",
         "prism-react-renderer": "^2.3.0",
         "react": "^19.0.0",
         "react-dom": "^19.0.0"
@@ -9801,6 +9802,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.544.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.544.0.tgz",
+      "integrity": "sha512-t5tS44bqd825zAW45UQxpG2CvcC4urOwn2TrwSH8u+MjeE+1NnWl6QqeQ/6NdjMqdOygyiT9p3Ev0p1NJykxjw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/markdown-extensions": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/markdown-extensions/-/markdown-extensions-2.0.0.tgz",

docs/package.json

@@ -19,6 +19,7 @@
     "@docusaurus/preset-classic": "3.8.1",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
+    "lucide-react": "^0.544.0",
     "prism-react-renderer": "^2.3.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

docs/src/components/icon/icon.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import * as LucideIcons from "lucide-react";
+
+/*
+How to use this component:
+
+import Icon from "@site/src/components/icon";
+
+<Icon name="AlertCircle" size={24} color="red" />
+*/
+
+type IconProps = {
+  name: string;
+};
+
+export default function Icon({ name, ...props }: IconProps) {
+  const Icon = LucideIcons[name];
+  return Icon ? <Icon {...props} /> : null;
+}