docs: add icons component with lucide-react integration (#4682)

* ✨ (package.json): add lucide-react package to dependencies for using Lucide icons in the project
✨ (index.tsx): create a new Icon component to render Lucide icons with specified name, size, and color properties

* ♻️ (package.json): remove lucide-react dependency as it is no longer needed in the project

* ⬆️ (package.json): upgrade lucide-react dependency to version 0.460.0

docs/package.json

@@ -23,6 +23,7 @@
     "clsx": "^1.2.1",
     "docusaurus-node-polyfills": "^1.0.0",
     "docusaurus-plugin-image-zoom": "^2.0.0",
+    "lucide-react": "^0.460.0",
     "prism-react-renderer": "^1.3.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

docs/src/components/icon/index.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;
+}