From 7366ed8467aaff04205dc6e1beb8bfa5c6f16fb2 Mon Sep 17 00:00:00 2001
From: zihao <497244062@qq.com>
Date: Mon, 31 Oct 2022 19:32:28 +0800
Subject: [PATCH 1/4] feat(collapse): support multiple types of expandIcon
 property

support multiple types of expandIcon property

fix #1661
---
 src/collapse/CollapsePanel.tsx | 45 ++++++++++++++++++++++------------
 1 file changed, 29 insertions(+), 16 deletions(-)

diff --git a/src/collapse/CollapsePanel.tsx b/src/collapse/CollapsePanel.tsx
index e5f2c2333..83371267e 100644
--- a/src/collapse/CollapsePanel.tsx
+++ b/src/collapse/CollapsePanel.tsx
@@ -39,8 +39,9 @@ const CollapsePanel = (props: CollapsePanelProps) => {
   const { classPrefix } = useConfig();
   const componentName = `${classPrefix}-collapse-panel`;
   const innerValue = value || index;
-  const showExpandIcon = expandIcon === undefined ? expandIconAll : expandIcon;
+  const finalExpandIcon = (expandIcon === undefined ? expandIconAll : expandIcon) || null;
   const headRef = useRef();
+  const iconRef = useRef();
   const contentRef = useRef<HTMLDivElement>();
   const bodyRef = useRef<HTMLDivElement>();
   const isDisabled = disabled || disableAll;
@@ -63,23 +64,35 @@ const CollapsePanel = (props: CollapsePanelProps) => {
   );
 
   const handleClick = (e) => {
-    const canExpand =
-      (expandOnRowClick && e.target === headRef.current) || ['svg', 'path'].includes((e.target as Element).tagName);
+    const canExpand = (expandOnRowClick && e.currentTarget === headRef.current) || e.currentTarget === iconRef.current;
 
     if (canExpand && !isDisabled) {
       updateCollapseValue(innerValue);
     }
+    e.stopPropagation();
   };
 
-  const renderIcon = (direction: string) => (
-    <FakeArrow
-      style={{
-        transform: isActive ? 'rotate(180deg)' : 'rotate(-90deg)',
-      }}
-      isActive={isActive}
-      overlayClassName={classnames(`${componentName}__icon`, `${componentName}__icon--${direction}`)}
-    />
-  );
+  const renderIcon = () => {
+    let iconNode = null;
+    if (React.isValidElement(finalExpandIcon)) {
+      iconNode = finalExpandIcon;
+    } else if (finalExpandIcon) {
+      iconNode = <FakeArrow overlayClassName={classnames(`${componentName}__icon--default`)} />;
+    }
+    return (
+      iconNode && (
+        <div
+          className={`${componentName}__icon ${componentName}__icon--${expandIconPlacement} ${
+            isActive ? `${componentName}__icon--active` : ''
+          }`}
+          ref={iconRef}
+          onClick={handleClick}
+        >
+          {iconNode}
+        </div>
+      )
+    );
+  };
 
   const renderHeader = () => {
     const cls = [
@@ -90,11 +103,11 @@ const CollapsePanel = (props: CollapsePanelProps) => {
     ];
     return (
       <div ref={headRef} className={classnames(cls)} onClick={handleClick}>
-        {showExpandIcon && expandIconPlacement === 'left' ? renderIcon(expandIconPlacement) : null}
-        {header}
+        {expandIconPlacement === 'left' && renderIcon()}
+        {header && header}
         <div className={`${componentName}__header--blank`}></div>
-        {headerRightContent}
-        {showExpandIcon && expandIconPlacement === 'right' ? renderIcon(expandIconPlacement) : null}
+        {headerRightContent && headerRightContent}
+        {expandIconPlacement === 'right' && renderIcon()}
       </div>
     );
   };

From 5f800347cee9ad21c233d8728e0ff194190ac6e3 Mon Sep 17 00:00:00 2001
From: zihao <497244062@qq.com>
Date: Tue, 1 Nov 2022 15:01:09 +0800
Subject: [PATCH 2/4] docs: update demo

update demo
---
 src/collapse/_example/icon.jsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/collapse/_example/icon.jsx b/src/collapse/_example/icon.jsx
index 72cba4654..44bcc01d9 100644
--- a/src/collapse/_example/icon.jsx
+++ b/src/collapse/_example/icon.jsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { Collapse, TagInput, Radio, Checkbox, Space } from 'tdesign-react';
+import { StarIcon } from 'tdesign-icons-react';
 
 const { Panel } = Collapse;
 
@@ -29,6 +30,9 @@ export default function CollapseExample() {
             <TagInput defaultValue={['Vue', 'React']} clearable />
           </div>
         </Panel>
+        <Panel header="自定义图标" expandIcon={<StarIcon />}>
+          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+        </Panel>
       </Collapse>
       <Space direction="vertical">
         <Radio.Group value={radio} options={options} onChange={setRadio} />

From 77c1e6d0562706b20d4ddef030a58e1fb8b9eadc Mon Sep 17 00:00:00 2001
From: zihao <497244062@qq.com>
Date: Tue, 1 Nov 2022 15:06:00 +0800
Subject: [PATCH 3/4] test: update test

update test
---
 src/_common                               |    2 +-
 test/snap/__snapshots__/csr.test.jsx.snap | 1346 ++++++++++++---------
 2 files changed, 774 insertions(+), 574 deletions(-)

diff --git a/src/_common b/src/_common
index 8ec4d6c78..7da691777 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit 8ec4d6c786ee2111f4f5cfcb78b267f84dfeaf97
+Subproject commit 7da691777e11bb60344db1b391b29ce58b40a79c
diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap
index a68de5b8a..d9dc7cfee 100644
--- a/test/snap/__snapshots__/csr.test.jsx.snap
+++ b/test/snap/__snapshots__/csr.test.jsx.snap
@@ -41085,22 +41085,25 @@ exports[`csr snapshot test > csr test src/collapse/_example/base.jsx 1`] = `
             <div
               class="t-collapse-panel__header t-is-clickable"
             >
-              <svg
-                class="t-fake-arrow t-fake-arrow--active t-collapse-panel__icon t-collapse-panel__icon--left"
-                fill="none"
-                height="16"
-                style="transform: rotate(180deg);"
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
+              <div
+                class="t-collapse-panel__icon t-collapse-panel__icon--left t-collapse-panel__icon--active"
               >
-                <path
-                  d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
-                  stroke="black"
-                  stroke-opacity="0.9"
-                  stroke-width="1.3"
-                />
-              </svg>
+                <svg
+                  class="t-fake-arrow t-collapse-panel__icon--default"
+                  fill="none"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                    stroke="black"
+                    stroke-opacity="0.9"
+                    stroke-width="1.3"
+                  />
+                </svg>
+              </div>
               这是一个折叠标题
               <div
                 class="t-collapse-panel__header--blank"
@@ -41127,22 +41130,25 @@ exports[`csr snapshot test > csr test src/collapse/_example/base.jsx 1`] = `
             <div
               class="t-collapse-panel__header t-is-clickable"
             >
-              <svg
-                class="t-fake-arrow t-collapse-panel__icon t-collapse-panel__icon--left"
-                fill="none"
-                height="16"
-                style="transform: rotate(-90deg);"
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
+              <div
+                class="t-collapse-panel__icon t-collapse-panel__icon--left "
               >
-                <path
-                  d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
-                  stroke="black"
-                  stroke-opacity="0.9"
-                  stroke-width="1.3"
-                />
-              </svg>
+                <svg
+                  class="t-fake-arrow t-collapse-panel__icon--default"
+                  fill="none"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                    stroke="black"
+                    stroke-opacity="0.9"
+                    stroke-width="1.3"
+                  />
+                </svg>
+              </div>
               设置默认展开项
               <div
                 class="t-collapse-panel__header--blank"
@@ -41169,22 +41175,25 @@ exports[`csr snapshot test > csr test src/collapse/_example/base.jsx 1`] = `
             <div
               class="t-collapse-panel__header t-is-clickable"
             >
-              <svg
-                class="t-fake-arrow t-fake-arrow--active t-collapse-panel__icon t-collapse-panel__icon--left"
-                fill="none"
-                height="16"
-                style="transform: rotate(180deg);"
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
+              <div
+                class="t-collapse-panel__icon t-collapse-panel__icon--left t-collapse-panel__icon--active"
               >
-                <path
-                  d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
-                  stroke="black"
-                  stroke-opacity="0.9"
-                  stroke-width="1.3"
-                />
-              </svg>
+                <svg
+                  class="t-fake-arrow t-collapse-panel__icon--default"
+                  fill="none"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                    stroke="black"
+                    stroke-opacity="0.9"
+                    stroke-width="1.3"
+                  />
+                </svg>
+              </div>
               自定义折叠面板内容
               <div
                 class="t-collapse-panel__header--blank"
@@ -41276,22 +41285,25 @@ exports[`csr snapshot test > csr test src/collapse/_example/base.jsx 1`] = `
             <div
               class="t-collapse-panel__header t-is-clickable"
             >
-              <svg
-                class="t-fake-arrow t-fake-arrow--active t-collapse-panel__icon t-collapse-panel__icon--left"
-                fill="none"
-                height="16"
-                style="transform: rotate(180deg);"
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
+              <div
+                class="t-collapse-panel__icon t-collapse-panel__icon--left t-collapse-panel__icon--active"
               >
-                <path
-                  d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
-                  stroke="black"
-                  stroke-opacity="0.9"
-                  stroke-width="1.3"
-                />
-              </svg>
+                <svg
+                  class="t-fake-arrow t-collapse-panel__icon--default"
+                  fill="none"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                    stroke="black"
+                    stroke-opacity="0.9"
+                    stroke-width="1.3"
+                  />
+                </svg>
+              </div>
               当前折叠面板折叠时，销毁面板内容
               <div
                 class="t-collapse-panel__header--blank"
@@ -41318,22 +41330,25 @@ exports[`csr snapshot test > csr test src/collapse/_example/base.jsx 1`] = `
             <div
               class="t-collapse-panel__header t-is-clickable"
             >
-              <svg
-                class="t-fake-arrow t-fake-arrow--active t-collapse-panel__icon t-collapse-panel__icon--left"
-                fill="none"
-                height="16"
-                style="transform: rotate(180deg);"
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
+              <div
+                class="t-collapse-panel__icon t-collapse-panel__icon--left t-collapse-panel__icon--active"
               >
-                <path
-                  d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
-                  stroke="black"
-                  stroke-opacity="0.9"
-                  stroke-width="1.3"
-                />
-              </svg>
+                <svg
+                  class="t-fake-arrow t-collapse-panel__icon--default"
+                  fill="none"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                    stroke="black"
+                    stroke-opacity="0.9"
+                    stroke-width="1.3"
+                  />
+                </svg>
+              </div>
               嵌套使用折叠面板
               <div
                 class="t-collapse-panel__header--blank"
@@ -41358,22 +41373,25 @@ exports[`csr snapshot test > csr test src/collapse/_example/base.jsx 1`] = `
                       <div
                         class="t-collapse-panel__header t-is-clickable"
                       >
-                        <svg
-                          class="t-fake-arrow t-collapse-panel__icon t-collapse-panel__icon--left"
-                          fill="none"
-                          height="16"
-                          style="transform: rotate(-90deg);"
-                          viewBox="0 0 16 16"
-                          width="16"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="t-collapse-panel__icon t-collapse-panel__icon--left "
                         >
-                          <path
-                            d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
-                            stroke="black"
-                            stroke-opacity="0.9"
-                            stroke-width="1.3"
-                          />
-                        </svg>
+                          <svg
+                            class="t-fake-arrow t-collapse-panel__icon--default"
+                            fill="none"
+                            height="16"
+                            viewBox="0 0 16 16"
+                            width="16"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                              stroke="black"
+                              stroke-opacity="0.9"
+                              stroke-width="1.3"
+                            />
+                          </svg>
+                        </div>
                         这是一个折叠标题
                         <div
                           class="t-collapse-panel__header--blank"
@@ -41400,22 +41418,25 @@ exports[`csr snapshot test > csr test src/collapse/_example/base.jsx 1`] = `
                       <div
                         class="t-collapse-panel__header t-is-clickable"
                       >
-                        <svg
-                          class="t-fake-arrow t-collapse-panel__icon t-collapse-panel__icon--left"
-                          fill="none"
-                          height="16"
-                          style="transform: rotate(-90deg);"
-                          viewBox="0 0 16 16"
-                          width="16"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="t-collapse-panel__icon t-collapse-panel__icon--left "
                         >
-                          <path
-                            d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
-                            stroke="black"
-                            stroke-opacity="0.9"
-                            stroke-width="1.3"
-                          />
-                        </svg>
+                          <svg
+                            class="t-fake-arrow t-collapse-panel__icon--default"
+                            fill="none"
+                            height="16"
+                            viewBox="0 0 16 16"
+                            width="16"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                              stroke="black"
+                              stroke-opacity="0.9"
+                              stroke-width="1.3"
+                            />
+                          </svg>
+                        </div>
                         这是一个折叠标题
                         <div
                           class="t-collapse-panel__header--blank"
@@ -41454,22 +41475,25 @@ exports[`csr snapshot test > csr test src/collapse/_example/base.jsx 1`] = `
           <div
             class="t-collapse-panel__header t-is-clickable"
           >
-            <svg
-              class="t-fake-arrow t-fake-arrow--active t-collapse-panel__icon t-collapse-panel__icon--left"
-              fill="none"
-              height="16"
-              style="transform: rotate(180deg);"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="t-collapse-panel__icon t-collapse-panel__icon--left t-collapse-panel__icon--active"
             >
-              <path
-                d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
-                stroke="black"
-                stroke-opacity="0.9"
-                stroke-width="1.3"
-              />
-            </svg>
+              <svg
+                class="t-fake-arrow t-collapse-panel__icon--default"
+                fill="none"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                  stroke="black"
+                  stroke-opacity="0.9"
+                  stroke-width="1.3"
+                />
+              </svg>
+            </div>
             这是一个折叠标题
             <div
               class="t-collapse-panel__header--blank"
@@ -41496,22 +41520,25 @@ exports[`csr snapshot test > csr test src/collapse/_example/base.jsx 1`] = `
           <div
             class="t-collapse-panel__header t-is-clickable"
           >
-            <svg
-              class="t-fake-arrow t-collapse-panel__icon t-collapse-panel__icon--left"
-              fill="none"
-              height="16"
-              style="transform: rotate(-90deg);"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="t-collapse-panel__icon t-collapse-panel__icon--left "
             >
-              <path
-                d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
-                stroke="black"
-                stroke-opacity="0.9"
-                stroke-width="1.3"
-              />
-            </svg>
+              <svg
+                class="t-fake-arrow t-collapse-panel__icon--default"
+                fill="none"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                  stroke="black"
+                  stroke-opacity="0.9"
+                  stroke-width="1.3"
+                />
+              </svg>
+            </div>
             设置默认展开项
             <div
               class="t-collapse-panel__header--blank"
@@ -41538,22 +41565,25 @@ exports[`csr snapshot test > csr test src/collapse/_example/base.jsx 1`] = `
           <div
             class="t-collapse-panel__header t-is-clickable"
           >
-            <svg
-              class="t-fake-arrow t-fake-arrow--active t-collapse-panel__icon t-collapse-panel__icon--left"
-              fill="none"
-              height="16"
-              style="transform: rotate(180deg);"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="t-collapse-panel__icon t-collapse-panel__icon--left t-collapse-panel__icon--active"
             >
-              <path
-                d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
-                stroke="black"
-                stroke-opacity="0.9"
-                stroke-width="1.3"
-              />
-            </svg>
+              <svg
+                class="t-fake-arrow t-collapse-panel__icon--default"
+                fill="none"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                  stroke="black"
+                  stroke-opacity="0.9"
+                  stroke-width="1.3"
+                />
+              </svg>
+            </div>
             自定义折叠面板内容
             <div
               class="t-collapse-panel__header--blank"
@@ -41645,22 +41675,25 @@ exports[`csr snapshot test > csr test src/collapse/_example/base.jsx 1`] = `
           <div
             class="t-collapse-panel__header t-is-clickable"
           >
-            <svg
-              class="t-fake-arrow t-fake-arrow--active t-collapse-panel__icon t-collapse-panel__icon--left"
-              fill="none"
-              height="16"
-              style="transform: rotate(180deg);"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="t-collapse-panel__icon t-collapse-panel__icon--left t-collapse-panel__icon--active"
             >
-              <path
-                d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
-                stroke="black"
-                stroke-opacity="0.9"
-                stroke-width="1.3"
-              />
-            </svg>
+              <svg
+                class="t-fake-arrow t-collapse-panel__icon--default"
+                fill="none"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                  stroke="black"
+                  stroke-opacity="0.9"
+                  stroke-width="1.3"
+                />
+              </svg>
+            </div>
             当前折叠面板折叠时，销毁面板内容
             <div
               class="t-collapse-panel__header--blank"
@@ -41687,22 +41720,25 @@ exports[`csr snapshot test > csr test src/collapse/_example/base.jsx 1`] = `
           <div
             class="t-collapse-panel__header t-is-clickable"
           >
-            <svg
-              class="t-fake-arrow t-fake-arrow--active t-collapse-panel__icon t-collapse-panel__icon--left"
-              fill="none"
-              height="16"
-              style="transform: rotate(180deg);"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="t-collapse-panel__icon t-collapse-panel__icon--left t-collapse-panel__icon--active"
             >
-              <path
-                d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
-                stroke="black"
-                stroke-opacity="0.9"
-                stroke-width="1.3"
-              />
-            </svg>
+              <svg
+                class="t-fake-arrow t-collapse-panel__icon--default"
+                fill="none"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                  stroke="black"
+                  stroke-opacity="0.9"
+                  stroke-width="1.3"
+                />
+              </svg>
+            </div>
             嵌套使用折叠面板
             <div
               class="t-collapse-panel__header--blank"
@@ -41727,22 +41763,25 @@ exports[`csr snapshot test > csr test src/collapse/_example/base.jsx 1`] = `
                     <div
                       class="t-collapse-panel__header t-is-clickable"
                     >
-                      <svg
-                        class="t-fake-arrow t-collapse-panel__icon t-collapse-panel__icon--left"
-                        fill="none"
-                        height="16"
-                        style="transform: rotate(-90deg);"
-                        viewBox="0 0 16 16"
-                        width="16"
-                        xmlns="http://www.w3.org/2000/svg"
+                      <div
+                        class="t-collapse-panel__icon t-collapse-panel__icon--left "
                       >
-                        <path
-                          d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
-                          stroke="black"
-                          stroke-opacity="0.9"
-                          stroke-width="1.3"
-                        />
-                      </svg>
+                        <svg
+                          class="t-fake-arrow t-collapse-panel__icon--default"
+                          fill="none"
+                          height="16"
+                          viewBox="0 0 16 16"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                            stroke="black"
+                            stroke-opacity="0.9"
+                            stroke-width="1.3"
+                          />
+                        </svg>
+                      </div>
                       这是一个折叠标题
                       <div
                         class="t-collapse-panel__header--blank"
@@ -41769,22 +41808,25 @@ exports[`csr snapshot test > csr test src/collapse/_example/base.jsx 1`] = `
                     <div
                       class="t-collapse-panel__header t-is-clickable"
                     >
-                      <svg
-                        class="t-fake-arrow t-collapse-panel__icon t-collapse-panel__icon--left"
-                        fill="none"
-                        height="16"
-                        style="transform: rotate(-90deg);"
-                        viewBox="0 0 16 16"
-                        width="16"
-                        xmlns="http://www.w3.org/2000/svg"
+                      <div
+                        class="t-collapse-panel__icon t-collapse-panel__icon--left "
                       >
-                        <path
-                          d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
-                          stroke="black"
-                          stroke-opacity="0.9"
-                          stroke-width="1.3"
-                        />
-                      </svg>
+                        <svg
+                          class="t-fake-arrow t-collapse-panel__icon--default"
+                          fill="none"
+                          height="16"
+                          viewBox="0 0 16 16"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                            stroke="black"
+                            stroke-opacity="0.9"
+                            stroke-width="1.3"
+                          />
+                        </svg>
+                      </div>
                       这是一个折叠标题
                       <div
                         class="t-collapse-panel__header--blank"
@@ -41891,22 +41933,25 @@ exports[`csr snapshot test > csr test src/collapse/_example/icon.jsx 1`] = `
                 <div
                   class="t-collapse-panel__header t-is-clickable"
                 >
-                  <svg
-                    class="t-fake-arrow t-collapse-panel__icon t-collapse-panel__icon--left"
-                    fill="none"
-                    height="16"
-                    style="transform: rotate(-90deg);"
-                    viewBox="0 0 16 16"
-                    width="16"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
-                      stroke="black"
-                      stroke-opacity="0.9"
-                      stroke-width="1.3"
-                    />
-                  </svg>
+                  <div
+                    class="t-collapse-panel__icon t-collapse-panel__icon--left "
+                  >
+                    <svg
+                      class="t-fake-arrow t-collapse-panel__icon--default"
+                      fill="none"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      width="16"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                        stroke="black"
+                        stroke-opacity="0.9"
+                        stroke-width="1.3"
+                      />
+                    </svg>
+                  </div>
                   这是一个折叠标题
                   <div
                     class="t-collapse-panel__header--blank"
@@ -41933,22 +41978,25 @@ exports[`csr snapshot test > csr test src/collapse/_example/icon.jsx 1`] = `
                 <div
                   class="t-collapse-panel__header t-is-clickable"
                 >
-                  <svg
-                    class="t-fake-arrow t-collapse-panel__icon t-collapse-panel__icon--left"
-                    fill="none"
-                    height="16"
-                    style="transform: rotate(-90deg);"
-                    viewBox="0 0 16 16"
-                    width="16"
-                    xmlns="http://www.w3.org/2000/svg"
+                  <div
+                    class="t-collapse-panel__icon t-collapse-panel__icon--left "
                   >
-                    <path
-                      d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
-                      stroke="black"
-                      stroke-opacity="0.9"
-                      stroke-width="1.3"
-                    />
-                  </svg>
+                    <svg
+                      class="t-fake-arrow t-collapse-panel__icon--default"
+                      fill="none"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      width="16"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                        stroke="black"
+                        stroke-opacity="0.9"
+                        stroke-width="1.3"
+                      />
+                    </svg>
+                  </div>
                   折叠后自动销毁
                   <div
                     class="t-collapse-panel__header--blank"
@@ -41965,22 +42013,25 @@ exports[`csr snapshot test > csr test src/collapse/_example/icon.jsx 1`] = `
                 <div
                   class="t-collapse-panel__header t-is-clickable"
                 >
-                  <svg
-                    class="t-fake-arrow t-collapse-panel__icon t-collapse-panel__icon--left"
-                    fill="none"
-                    height="16"
-                    style="transform: rotate(-90deg);"
-                    viewBox="0 0 16 16"
-                    width="16"
-                    xmlns="http://www.w3.org/2000/svg"
+                  <div
+                    class="t-collapse-panel__icon t-collapse-panel__icon--left "
                   >
-                    <path
-                      d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
-                      stroke="black"
-                      stroke-opacity="0.9"
-                      stroke-width="1.3"
-                    />
-                  </svg>
+                    <svg
+                      class="t-fake-arrow t-collapse-panel__icon--default"
+                      fill="none"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      width="16"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                        stroke="black"
+                        stroke-opacity="0.9"
+                        stroke-width="1.3"
+                      />
+                    </svg>
+                  </div>
                   自定义折叠面板内容
                   <div
                     class="t-collapse-panel__header--blank"
@@ -42064,6 +42115,49 @@ exports[`csr snapshot test > csr test src/collapse/_example/icon.jsx 1`] = `
                 </div>
               </div>
             </div>
+            <div
+              class="t-collapse-panel"
+            >
+              <div
+                class="t-collapse-panel__wrapper"
+              >
+                <div
+                  class="t-collapse-panel__header t-is-clickable"
+                >
+                  <div
+                    class="t-collapse-panel__icon t-collapse-panel__icon--left "
+                  >
+                    <svg
+                      class="t-icon t-icon-star"
+                      fill="none"
+                      height="1em"
+                      viewBox="0 0 16 16"
+                      width="1em"
+                    >
+                      <path
+                        d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                        fill="currentColor"
+                        fill-opacity="0.9"
+                      />
+                    </svg>
+                  </div>
+                  自定义图标
+                  <div
+                    class="t-collapse-panel__header--blank"
+                  />
+                </div>
+                <div
+                  class="t-collapse-panel__body t-slide-down-enter-active t-collapse-panel__body--collapsed"
+                  style="height: 0px;"
+                >
+                  <div
+                    class="t-collapse-panel__content"
+                  >
+                    这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
         <div
@@ -42181,22 +42275,25 @@ exports[`csr snapshot test > csr test src/collapse/_example/icon.jsx 1`] = `
               <div
                 class="t-collapse-panel__header t-is-clickable"
               >
-                <svg
-                  class="t-fake-arrow t-collapse-panel__icon t-collapse-panel__icon--left"
-                  fill="none"
-                  height="16"
-                  style="transform: rotate(-90deg);"
-                  viewBox="0 0 16 16"
-                  width="16"
-                  xmlns="http://www.w3.org/2000/svg"
+                <div
+                  class="t-collapse-panel__icon t-collapse-panel__icon--left "
                 >
-                  <path
-                    d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
-                    stroke="black"
-                    stroke-opacity="0.9"
-                    stroke-width="1.3"
-                  />
-                </svg>
+                  <svg
+                    class="t-fake-arrow t-collapse-panel__icon--default"
+                    fill="none"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    width="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                      stroke="black"
+                      stroke-opacity="0.9"
+                      stroke-width="1.3"
+                    />
+                  </svg>
+                </div>
                 这是一个折叠标题
                 <div
                   class="t-collapse-panel__header--blank"
@@ -42223,22 +42320,25 @@ exports[`csr snapshot test > csr test src/collapse/_example/icon.jsx 1`] = `
               <div
                 class="t-collapse-panel__header t-is-clickable"
               >
-                <svg
-                  class="t-fake-arrow t-collapse-panel__icon t-collapse-panel__icon--left"
-                  fill="none"
-                  height="16"
-                  style="transform: rotate(-90deg);"
-                  viewBox="0 0 16 16"
-                  width="16"
-                  xmlns="http://www.w3.org/2000/svg"
+                <div
+                  class="t-collapse-panel__icon t-collapse-panel__icon--left "
                 >
-                  <path
-                    d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
-                    stroke="black"
-                    stroke-opacity="0.9"
-                    stroke-width="1.3"
-                  />
-                </svg>
+                  <svg
+                    class="t-fake-arrow t-collapse-panel__icon--default"
+                    fill="none"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    width="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                      stroke="black"
+                      stroke-opacity="0.9"
+                      stroke-width="1.3"
+                    />
+                  </svg>
+                </div>
                 折叠后自动销毁
                 <div
                   class="t-collapse-panel__header--blank"
@@ -42255,22 +42355,25 @@ exports[`csr snapshot test > csr test src/collapse/_example/icon.jsx 1`] = `
               <div
                 class="t-collapse-panel__header t-is-clickable"
               >
-                <svg
-                  class="t-fake-arrow t-collapse-panel__icon t-collapse-panel__icon--left"
-                  fill="none"
-                  height="16"
-                  style="transform: rotate(-90deg);"
-                  viewBox="0 0 16 16"
-                  width="16"
-                  xmlns="http://www.w3.org/2000/svg"
+                <div
+                  class="t-collapse-panel__icon t-collapse-panel__icon--left "
                 >
-                  <path
-                    d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
-                    stroke="black"
-                    stroke-opacity="0.9"
-                    stroke-width="1.3"
-                  />
-                </svg>
+                  <svg
+                    class="t-fake-arrow t-collapse-panel__icon--default"
+                    fill="none"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    width="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                      stroke="black"
+                      stroke-opacity="0.9"
+                      stroke-width="1.3"
+                    />
+                  </svg>
+                </div>
                 自定义折叠面板内容
                 <div
                   class="t-collapse-panel__header--blank"
@@ -42354,6 +42457,49 @@ exports[`csr snapshot test > csr test src/collapse/_example/icon.jsx 1`] = `
               </div>
             </div>
           </div>
+          <div
+            class="t-collapse-panel"
+          >
+            <div
+              class="t-collapse-panel__wrapper"
+            >
+              <div
+                class="t-collapse-panel__header t-is-clickable"
+              >
+                <div
+                  class="t-collapse-panel__icon t-collapse-panel__icon--left "
+                >
+                  <svg
+                    class="t-icon t-icon-star"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 16 16"
+                    width="1em"
+                  >
+                    <path
+                      d="M9.54 6.38L8 3.26 6.46 6.38l-3.44.5L5.5 9.31l-.59 3.43L8 11.12l3.08 1.62-.59-3.43L13 6.88l-3.45-.5zm5-.29a.3.3 0 01.16.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92a.3.3 0 01.54 0l1.94 3.92 4.32.62z"
+                      fill="currentColor"
+                      fill-opacity="0.9"
+                    />
+                  </svg>
+                </div>
+                自定义图标
+                <div
+                  class="t-collapse-panel__header--blank"
+                />
+              </div>
+              <div
+                class="t-collapse-panel__body t-slide-down-enter-active t-collapse-panel__body--collapsed"
+                style="height: 0px;"
+              >
+                <div
+                  class="t-collapse-panel__content"
+                >
+                  这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
       <div
@@ -42525,22 +42671,25 @@ exports[`csr snapshot test > csr test src/collapse/_example/mutex.jsx 1`] = `
             <div
               class="t-collapse-panel__header t-is-clickable"
             >
-              <svg
-                class="t-fake-arrow t-collapse-panel__icon t-collapse-panel__icon--left"
-                fill="none"
-                height="16"
-                style="transform: rotate(-90deg);"
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
-                  stroke="black"
-                  stroke-opacity="0.9"
-                  stroke-width="1.3"
-                />
-              </svg>
+              <div
+                class="t-collapse-panel__icon t-collapse-panel__icon--left "
+              >
+                <svg
+                  class="t-fake-arrow t-collapse-panel__icon--default"
+                  fill="none"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                    stroke="black"
+                    stroke-opacity="0.9"
+                    stroke-width="1.3"
+                  />
+                </svg>
+              </div>
               这是一个折叠标题
               <div
                 class="t-collapse-panel__header--blank"
@@ -42567,22 +42716,25 @@ exports[`csr snapshot test > csr test src/collapse/_example/mutex.jsx 1`] = `
             <div
               class="t-collapse-panel__header t-is-clickable"
             >
-              <svg
-                class="t-fake-arrow t-collapse-panel__icon t-collapse-panel__icon--left"
-                fill="none"
-                height="16"
-                style="transform: rotate(-90deg);"
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
+              <div
+                class="t-collapse-panel__icon t-collapse-panel__icon--left "
               >
-                <path
-                  d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
-                  stroke="black"
-                  stroke-opacity="0.9"
-                  stroke-width="1.3"
-                />
-              </svg>
+                <svg
+                  class="t-fake-arrow t-collapse-panel__icon--default"
+                  fill="none"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                    stroke="black"
+                    stroke-opacity="0.9"
+                    stroke-width="1.3"
+                  />
+                </svg>
+              </div>
               折叠后自动销毁
               <div
                 class="t-collapse-panel__header--blank"
@@ -42599,22 +42751,25 @@ exports[`csr snapshot test > csr test src/collapse/_example/mutex.jsx 1`] = `
             <div
               class="t-collapse-panel__header t-is-clickable"
             >
-              <svg
-                class="t-fake-arrow t-collapse-panel__icon t-collapse-panel__icon--left"
-                fill="none"
-                height="16"
-                style="transform: rotate(-90deg);"
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
+              <div
+                class="t-collapse-panel__icon t-collapse-panel__icon--left "
               >
-                <path
-                  d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
-                  stroke="black"
-                  stroke-opacity="0.9"
-                  stroke-width="1.3"
-                />
-              </svg>
+                <svg
+                  class="t-fake-arrow t-collapse-panel__icon--default"
+                  fill="none"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                    stroke="black"
+                    stroke-opacity="0.9"
+                    stroke-width="1.3"
+                  />
+                </svg>
+              </div>
               自定义折叠面板内容
               <div
                 class="t-collapse-panel__header--blank"
@@ -42714,22 +42869,25 @@ exports[`csr snapshot test > csr test src/collapse/_example/mutex.jsx 1`] = `
           <div
             class="t-collapse-panel__header t-is-clickable"
           >
-            <svg
-              class="t-fake-arrow t-collapse-panel__icon t-collapse-panel__icon--left"
-              fill="none"
-              height="16"
-              style="transform: rotate(-90deg);"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="t-collapse-panel__icon t-collapse-panel__icon--left "
             >
-              <path
-                d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
-                stroke="black"
-                stroke-opacity="0.9"
-                stroke-width="1.3"
-              />
-            </svg>
+              <svg
+                class="t-fake-arrow t-collapse-panel__icon--default"
+                fill="none"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                  stroke="black"
+                  stroke-opacity="0.9"
+                  stroke-width="1.3"
+                />
+              </svg>
+            </div>
             这是一个折叠标题
             <div
               class="t-collapse-panel__header--blank"
@@ -42756,22 +42914,25 @@ exports[`csr snapshot test > csr test src/collapse/_example/mutex.jsx 1`] = `
           <div
             class="t-collapse-panel__header t-is-clickable"
           >
-            <svg
-              class="t-fake-arrow t-collapse-panel__icon t-collapse-panel__icon--left"
-              fill="none"
-              height="16"
-              style="transform: rotate(-90deg);"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="t-collapse-panel__icon t-collapse-panel__icon--left "
             >
-              <path
-                d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
-                stroke="black"
-                stroke-opacity="0.9"
-                stroke-width="1.3"
-              />
-            </svg>
+              <svg
+                class="t-fake-arrow t-collapse-panel__icon--default"
+                fill="none"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                  stroke="black"
+                  stroke-opacity="0.9"
+                  stroke-width="1.3"
+                />
+              </svg>
+            </div>
             折叠后自动销毁
             <div
               class="t-collapse-panel__header--blank"
@@ -42788,22 +42949,25 @@ exports[`csr snapshot test > csr test src/collapse/_example/mutex.jsx 1`] = `
           <div
             class="t-collapse-panel__header t-is-clickable"
           >
-            <svg
-              class="t-fake-arrow t-collapse-panel__icon t-collapse-panel__icon--left"
-              fill="none"
-              height="16"
-              style="transform: rotate(-90deg);"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="t-collapse-panel__icon t-collapse-panel__icon--left "
             >
-              <path
-                d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
-                stroke="black"
-                stroke-opacity="0.9"
-                stroke-width="1.3"
-              />
-            </svg>
+              <svg
+                class="t-fake-arrow t-collapse-panel__icon--default"
+                fill="none"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                  stroke="black"
+                  stroke-opacity="0.9"
+                  stroke-width="1.3"
+                />
+              </svg>
+            </div>
             自定义折叠面板内容
             <div
               class="t-collapse-panel__header--blank"
@@ -42971,22 +43135,25 @@ exports[`csr snapshot test > csr test src/collapse/_example/other.jsx 1`] = `
                 <div
                   class="t-collapse-panel__header t-is-clickable"
                 >
-                  <svg
-                    class="t-fake-arrow t-collapse-panel__icon t-collapse-panel__icon--left"
-                    fill="none"
-                    height="16"
-                    style="transform: rotate(-90deg);"
-                    viewBox="0 0 16 16"
-                    width="16"
-                    xmlns="http://www.w3.org/2000/svg"
+                  <div
+                    class="t-collapse-panel__icon t-collapse-panel__icon--left "
                   >
-                    <path
-                      d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
-                      stroke="black"
-                      stroke-opacity="0.9"
-                      stroke-width="1.3"
-                    />
-                  </svg>
+                    <svg
+                      class="t-fake-arrow t-collapse-panel__icon--default"
+                      fill="none"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      width="16"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                        stroke="black"
+                        stroke-opacity="0.9"
+                        stroke-width="1.3"
+                      />
+                    </svg>
+                  </div>
                   这是一个折叠标题
                   <div
                     class="t-collapse-panel__header--blank"
@@ -43013,22 +43180,25 @@ exports[`csr snapshot test > csr test src/collapse/_example/other.jsx 1`] = `
                 <div
                   class="t-collapse-panel__header t-is-clickable"
                 >
-                  <svg
-                    class="t-fake-arrow t-collapse-panel__icon t-collapse-panel__icon--left"
-                    fill="none"
-                    height="16"
-                    style="transform: rotate(-90deg);"
-                    viewBox="0 0 16 16"
-                    width="16"
-                    xmlns="http://www.w3.org/2000/svg"
+                  <div
+                    class="t-collapse-panel__icon t-collapse-panel__icon--left "
                   >
-                    <path
-                      d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
-                      stroke="black"
-                      stroke-opacity="0.9"
-                      stroke-width="1.3"
-                    />
-                  </svg>
+                    <svg
+                      class="t-fake-arrow t-collapse-panel__icon--default"
+                      fill="none"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      width="16"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                        stroke="black"
+                        stroke-opacity="0.9"
+                        stroke-width="1.3"
+                      />
+                    </svg>
+                  </div>
                   折叠后自动销毁
                   <div
                     class="t-collapse-panel__header--blank"
@@ -43045,22 +43215,25 @@ exports[`csr snapshot test > csr test src/collapse/_example/other.jsx 1`] = `
                 <div
                   class="t-collapse-panel__header t-is-clickable"
                 >
-                  <svg
-                    class="t-fake-arrow t-collapse-panel__icon t-collapse-panel__icon--left"
-                    fill="none"
-                    height="16"
-                    style="transform: rotate(-90deg);"
-                    viewBox="0 0 16 16"
-                    width="16"
-                    xmlns="http://www.w3.org/2000/svg"
+                  <div
+                    class="t-collapse-panel__icon t-collapse-panel__icon--left "
                   >
-                    <path
-                      d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
-                      stroke="black"
-                      stroke-opacity="0.9"
-                      stroke-width="1.3"
-                    />
-                  </svg>
+                    <svg
+                      class="t-fake-arrow t-collapse-panel__icon--default"
+                      fill="none"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      width="16"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                        stroke="black"
+                        stroke-opacity="0.9"
+                        stroke-width="1.3"
+                      />
+                    </svg>
+                  </div>
                   自定义折叠面板内容
                   <div
                     class="t-collapse-panel__header--blank"
@@ -43228,23 +43401,26 @@ exports[`csr snapshot test > csr test src/collapse/_example/other.jsx 1`] = `
             >
               <div
                 class="t-collapse-panel__header t-is-clickable"
-              >
-                <svg
-                  class="t-fake-arrow t-collapse-panel__icon t-collapse-panel__icon--left"
-                  fill="none"
-                  height="16"
-                  style="transform: rotate(-90deg);"
-                  viewBox="0 0 16 16"
-                  width="16"
-                  xmlns="http://www.w3.org/2000/svg"
+              >
+                <div
+                  class="t-collapse-panel__icon t-collapse-panel__icon--left "
                 >
-                  <path
-                    d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
-                    stroke="black"
-                    stroke-opacity="0.9"
-                    stroke-width="1.3"
-                  />
-                </svg>
+                  <svg
+                    class="t-fake-arrow t-collapse-panel__icon--default"
+                    fill="none"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    width="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                      stroke="black"
+                      stroke-opacity="0.9"
+                      stroke-width="1.3"
+                    />
+                  </svg>
+                </div>
                 这是一个折叠标题
                 <div
                   class="t-collapse-panel__header--blank"
@@ -43271,22 +43447,25 @@ exports[`csr snapshot test > csr test src/collapse/_example/other.jsx 1`] = `
               <div
                 class="t-collapse-panel__header t-is-clickable"
               >
-                <svg
-                  class="t-fake-arrow t-collapse-panel__icon t-collapse-panel__icon--left"
-                  fill="none"
-                  height="16"
-                  style="transform: rotate(-90deg);"
-                  viewBox="0 0 16 16"
-                  width="16"
-                  xmlns="http://www.w3.org/2000/svg"
+                <div
+                  class="t-collapse-panel__icon t-collapse-panel__icon--left "
                 >
-                  <path
-                    d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
-                    stroke="black"
-                    stroke-opacity="0.9"
-                    stroke-width="1.3"
-                  />
-                </svg>
+                  <svg
+                    class="t-fake-arrow t-collapse-panel__icon--default"
+                    fill="none"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    width="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                      stroke="black"
+                      stroke-opacity="0.9"
+                      stroke-width="1.3"
+                    />
+                  </svg>
+                </div>
                 折叠后自动销毁
                 <div
                   class="t-collapse-panel__header--blank"
@@ -43303,22 +43482,25 @@ exports[`csr snapshot test > csr test src/collapse/_example/other.jsx 1`] = `
               <div
                 class="t-collapse-panel__header t-is-clickable"
               >
-                <svg
-                  class="t-fake-arrow t-collapse-panel__icon t-collapse-panel__icon--left"
-                  fill="none"
-                  height="16"
-                  style="transform: rotate(-90deg);"
-                  viewBox="0 0 16 16"
-                  width="16"
-                  xmlns="http://www.w3.org/2000/svg"
+                <div
+                  class="t-collapse-panel__icon t-collapse-panel__icon--left "
                 >
-                  <path
-                    d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
-                    stroke="black"
-                    stroke-opacity="0.9"
-                    stroke-width="1.3"
-                  />
-                </svg>
+                  <svg
+                    class="t-fake-arrow t-collapse-panel__icon--default"
+                    fill="none"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    width="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                      stroke="black"
+                      stroke-opacity="0.9"
+                      stroke-width="1.3"
+                    />
+                  </svg>
+                </div>
                 自定义折叠面板内容
                 <div
                   class="t-collapse-panel__header--blank"
@@ -43541,22 +43723,25 @@ exports[`csr snapshot test > csr test src/collapse/_example/rightSlot.jsx 1`] =
             <div
               class="t-collapse-panel__header t-is-clickable"
             >
-              <svg
-                class="t-fake-arrow t-collapse-panel__icon t-collapse-panel__icon--left"
-                fill="none"
-                height="16"
-                style="transform: rotate(-90deg);"
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
+              <div
+                class="t-collapse-panel__icon t-collapse-panel__icon--left "
               >
-                <path
-                  d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
-                  stroke="black"
-                  stroke-opacity="0.9"
-                  stroke-width="1.3"
-                />
-              </svg>
+                <svg
+                  class="t-fake-arrow t-collapse-panel__icon--default"
+                  fill="none"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                    stroke="black"
+                    stroke-opacity="0.9"
+                    stroke-width="1.3"
+                  />
+                </svg>
+              </div>
               这是一个折叠标题
               <div
                 class="t-collapse-panel__header--blank"
@@ -43593,22 +43778,25 @@ exports[`csr snapshot test > csr test src/collapse/_example/rightSlot.jsx 1`] =
             <div
               class="t-collapse-panel__header t-is-clickable"
             >
-              <svg
-                class="t-fake-arrow t-collapse-panel__icon t-collapse-panel__icon--left"
-                fill="none"
-                height="16"
-                style="transform: rotate(-90deg);"
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
+              <div
+                class="t-collapse-panel__icon t-collapse-panel__icon--left "
               >
-                <path
-                  d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
-                  stroke="black"
-                  stroke-opacity="0.9"
-                  stroke-width="1.3"
-                />
-              </svg>
+                <svg
+                  class="t-fake-arrow t-collapse-panel__icon--default"
+                  fill="none"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                    stroke="black"
+                    stroke-opacity="0.9"
+                    stroke-width="1.3"
+                  />
+                </svg>
+              </div>
               这是一个折叠标题
               <div
                 class="t-collapse-panel__header--blank"
@@ -43645,22 +43833,25 @@ exports[`csr snapshot test > csr test src/collapse/_example/rightSlot.jsx 1`] =
             <div
               class="t-collapse-panel__header t-is-clickable"
             >
-              <svg
-                class="t-fake-arrow t-collapse-panel__icon t-collapse-panel__icon--left"
-                fill="none"
-                height="16"
-                style="transform: rotate(-90deg);"
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
+              <div
+                class="t-collapse-panel__icon t-collapse-panel__icon--left "
               >
-                <path
-                  d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
-                  stroke="black"
-                  stroke-opacity="0.9"
-                  stroke-width="1.3"
-                />
-              </svg>
+                <svg
+                  class="t-fake-arrow t-collapse-panel__icon--default"
+                  fill="none"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                    stroke="black"
+                    stroke-opacity="0.9"
+                    stroke-width="1.3"
+                  />
+                </svg>
+              </div>
               这是一个折叠标题
               <div
                 class="t-collapse-panel__header--blank"
@@ -43734,22 +43925,25 @@ exports[`csr snapshot test > csr test src/collapse/_example/rightSlot.jsx 1`] =
           <div
             class="t-collapse-panel__header t-is-clickable"
           >
-            <svg
-              class="t-fake-arrow t-collapse-panel__icon t-collapse-panel__icon--left"
-              fill="none"
-              height="16"
-              style="transform: rotate(-90deg);"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="t-collapse-panel__icon t-collapse-panel__icon--left "
             >
-              <path
-                d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
-                stroke="black"
-                stroke-opacity="0.9"
-                stroke-width="1.3"
-              />
-            </svg>
+              <svg
+                class="t-fake-arrow t-collapse-panel__icon--default"
+                fill="none"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                  stroke="black"
+                  stroke-opacity="0.9"
+                  stroke-width="1.3"
+                />
+              </svg>
+            </div>
             这是一个折叠标题
             <div
               class="t-collapse-panel__header--blank"
@@ -43786,22 +43980,25 @@ exports[`csr snapshot test > csr test src/collapse/_example/rightSlot.jsx 1`] =
           <div
             class="t-collapse-panel__header t-is-clickable"
           >
-            <svg
-              class="t-fake-arrow t-collapse-panel__icon t-collapse-panel__icon--left"
-              fill="none"
-              height="16"
-              style="transform: rotate(-90deg);"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="t-collapse-panel__icon t-collapse-panel__icon--left "
             >
-              <path
-                d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
-                stroke="black"
-                stroke-opacity="0.9"
-                stroke-width="1.3"
-              />
-            </svg>
+              <svg
+                class="t-fake-arrow t-collapse-panel__icon--default"
+                fill="none"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                  stroke="black"
+                  stroke-opacity="0.9"
+                  stroke-width="1.3"
+                />
+              </svg>
+            </div>
             这是一个折叠标题
             <div
               class="t-collapse-panel__header--blank"
@@ -43838,22 +44035,25 @@ exports[`csr snapshot test > csr test src/collapse/_example/rightSlot.jsx 1`] =
           <div
             class="t-collapse-panel__header t-is-clickable"
           >
-            <svg
-              class="t-fake-arrow t-collapse-panel__icon t-collapse-panel__icon--left"
-              fill="none"
-              height="16"
-              style="transform: rotate(-90deg);"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="t-collapse-panel__icon t-collapse-panel__icon--left "
             >
-              <path
-                d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
-                stroke="black"
-                stroke-opacity="0.9"
-                stroke-width="1.3"
-              />
-            </svg>
+              <svg
+                class="t-fake-arrow t-collapse-panel__icon--default"
+                fill="none"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                  stroke="black"
+                  stroke-opacity="0.9"
+                  stroke-width="1.3"
+                />
+              </svg>
+            </div>
             这是一个折叠标题
             <div
               class="t-collapse-panel__header--blank"

From eef1ff00f349ce28add38a571c2e5a99bcec97ff Mon Sep 17 00:00:00 2001
From: zihao <497244062@qq.com>
Date: Tue, 1 Nov 2022 15:14:21 +0800
Subject: [PATCH 4/4] refactor: update demo

update demo
---
 src/collapse/CollapsePanel.tsx  |  4 ++--
 src/collapse/_example/icon.jsx  |  1 -
 src/collapse/_example/other.jsx | 11 ++++++++++-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/collapse/CollapsePanel.tsx b/src/collapse/CollapsePanel.tsx
index 83371267e..d6558f6f1 100644
--- a/src/collapse/CollapsePanel.tsx
+++ b/src/collapse/CollapsePanel.tsx
@@ -104,9 +104,9 @@ const CollapsePanel = (props: CollapsePanelProps) => {
     return (
       <div ref={headRef} className={classnames(cls)} onClick={handleClick}>
         {expandIconPlacement === 'left' && renderIcon()}
-        {header && header}
+        {header}
         <div className={`${componentName}__header--blank`}></div>
-        {headerRightContent && headerRightContent}
+        {headerRightContent}
         {expandIconPlacement === 'right' && renderIcon()}
       </div>
     );
diff --git a/src/collapse/_example/icon.jsx b/src/collapse/_example/icon.jsx
index 44bcc01d9..bd3a405f4 100644
--- a/src/collapse/_example/icon.jsx
+++ b/src/collapse/_example/icon.jsx
@@ -10,7 +10,6 @@ export default function CollapseExample() {
   const options = [
     { value: 1, label: '左边' },
     { value: 2, label: '右边' },
-    { value: 3, label: '不展示' },
   ];
   return (
     <Space direction="vertical">
diff --git a/src/collapse/_example/other.jsx b/src/collapse/_example/other.jsx
index e918601ba..b7c6c3659 100644
--- a/src/collapse/_example/other.jsx
+++ b/src/collapse/_example/other.jsx
@@ -6,9 +6,10 @@ export default function CollapseExample() {
   const [collapseValue, setCollapseValue] = useState([]);
   const [disabledAll, setDisabledAll] = useState(false);
   const [borderless, setBorderless] = useState(false);
+  const [showIcon, setShowIcon] = useState(true);
   return (
     <Space direction="vertical">
-      <Collapse value={collapseValue} borderless={borderless} disabled={disabledAll} onChange={setCollapseValue}>
+      <Collapse expandIcon={showIcon} value={collapseValue} borderless={borderless} disabled={disabledAll} onChange={setCollapseValue}>
         <Panel header="这是一个折叠标题">
           这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
         </Panel>
@@ -38,6 +39,14 @@ export default function CollapseExample() {
         >
           无边框模式
         </Checkbox>
+        <Checkbox
+          checked={showIcon}
+          onChange={() => {
+            setShowIcon(!showIcon);
+          }}
+        >
+          显示icon
+        </Checkbox>
         <div style={{ marginTop: 10 }}>当前展开的Collapse Panel: {collapseValue.map((item) => `${item} `)}</div>
       </Space>
     </Space>