fix: 修复直接传入react组件icon渲染异常问题 (#7526)

* fix: 修复直接传入react组件icon渲染异常问题

* fix: 修复直接传入react组件icon渲染异常问题

* fix: 修复直接传入react组件icon渲染异常问题

* fix: 修复icon render svg问题

* 更新快照

* 更新快照

---------

Co-authored-by: qinhaoyan <30946345+qinhaoyan@users.noreply.github.com>

packages/amis-ui/src/components/icons.tsx

@@ -273,7 +273,15 @@ export function Icon({
 
   // 直接的icon dom
   if (React.isValidElement(icon)) {
-    return icon;
+    return React.cloneElement(icon, {
+      ...((icon.props as any) || {}),
+      className: cxClass(
+        cx(className, classNameProp),
+        (icon.props as any).className
+      ),
+      style,
+      onClick
+    });
   }
 
   // 从css变量中获取icon

packages/amis/__tests__/renderers/Form/__snapshots__/combo.test.tsx.snap

@@ -1072,7 +1072,7 @@ exports[`Renderer:combo with conditions: add button open 1`] = `
                               class="cxd-Button cxd-Button--info cxd-Button--size-sm"
                             >
                               <icon-mock
-                                classname="icon icon-plus-fine"
+                                classname="icon m-r-xs icon icon-plus-fine"
                                 icon="plus-fine"
                               />
                               新增

packages/amis/src/renderers/Collapse.tsx

@@ -190,7 +190,11 @@ export default class Collapse extends React.Component<CollapseProps, {}> {
         expandIcon={
           expandIcon ? (
             typeof (expandIcon as any).icon === 'object' ? (
-              <Icon cx={cx} icon={(expandIcon as any).icon} />
+              <Icon
+                cx={cx}
+                icon={(expandIcon as any).icon}
+                className={cx('Collapse-icon-tranform')}
+              />
             ) : (
               render('arrow-icon', expandIcon || '', {
                 className: cx('Collapse-icon-tranform')

packages/amis/src/renderers/Icon.tsx

@@ -73,8 +73,11 @@ export class Icon extends React.Component<IconProps, object> {
       css,
       env
     } = this.props;
+    let icon = this.props.icon;
 
-    const icon = filter(this.props.icon, data);
+    if (typeof icon === 'string') {
+      icon = filter(this.props.icon, data);
+    }
 
     return (
       <>