From 09ca06ae42cc066ef2429542771b74d8ae8f5216 Mon Sep 17 00:00:00 2001
From: nlicroshan <nlicroshan@easyops.cn>
Date: Mon, 24 Jul 2023 15:32:02 +0800
Subject: [PATCH] fix(): FontAwesomeIcon do not work well

Closes NEXT_BUILDER-3690
---
 .../src/data-providers/load-bricks.tsx        | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/bricks/v2-adapter/src/data-providers/load-bricks.tsx b/bricks/v2-adapter/src/data-providers/load-bricks.tsx
index 751c2dce6..fd1705380 100644
--- a/bricks/v2-adapter/src/data-providers/load-bricks.tsx
+++ b/bricks/v2-adapter/src/data-providers/load-bricks.tsx
@@ -57,6 +57,7 @@ interface LegacyFaIconProps {
     endColor: string;
     direction?: string;
   };
+  className?: string;
 }
 
 const MAIN_KEY = "";
@@ -202,10 +203,29 @@ async function loadMainDll(adapterPkgFilePath: string) {
   });
 
   defineModule(LegacyReactFontAwesome, {
-    FontAwesomeIcon({ icon, gradientColor }: LegacyFaIconProps) {
+    FontAwesomeIcon({
+      icon,
+      gradientColor,
+      className,
+      ...restProps
+    }: LegacyFaIconProps) {
+      /**
+       * Compatible with the following uses:
+       *
+       * import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+       *
+       * <FontAwesomeIcon
+       *  className={styles.plusIcon}
+       *  style={{ marginRight: 12 }}
+       *  icon="plus-square"
+       *  onClick={onClick}
+       * />
+       */
       const FaIcon = "eo-fa-icon" as any;
       return (
         <FaIcon
+          {...restProps}
+          class={className}
           {...{
             ...(Array.isArray(icon)
               ? {