doc: update tree switchIcon, close #5484

Author: tangjinzhou

components/tree/__tests__/__snapshots__/demo.test.js.snap

@@ -156,7 +156,7 @@ exports[`renders ./components/tree/demo/customized-icon.vue correctly 1`] = `
       <div>
         <div style="display: flex; flex-direction: column;" class="ant-tree-list-holder-inner">
           <div class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last" draggable="false" aria-grabbed="false"><span aria-hidden="true" class="ant-tree-indent"></span>
-            <!----><span class="ant-tree-switcher ant-tree-switcher_open"><span role="img" aria-label="down" class="anticon anticon-down"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
+            <!----><span class="ant-tree-switcher ant-tree-switcher_open"><span role="img" aria-label="down" class="anticon anticon-down ant-tree-switcher-icon"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
             <!----><span title="parent 1" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"><span class="ant-tree-iconEle ant-tree-icon__customize"><span role="img" aria-label="smile" class="anticon anticon-smile"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span></span><span class="ant-tree-title">parent 1</span>
             <!----></span>
           </div>
@@ -470,12 +470,12 @@ exports[`renders ./components/tree/demo/switcher-icon.vue correctly 1`] = `
       <div>
         <div style="display: flex; flex-direction: column;" class="ant-tree-list-holder-inner">
           <div class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last" draggable="false" aria-grabbed="false"><span aria-hidden="true" class="ant-tree-indent"></span>
-            <!----><span class="ant-tree-switcher ant-tree-switcher_open"><span role="img" aria-label="down" class="anticon anticon-down"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
+            <!----><span class="ant-tree-switcher ant-tree-switcher_open"><span role="img" aria-label="down" class="anticon anticon-down ant-tree-switcher-icon"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
             <!----><span title="parent 1" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"><!----><span class="ant-tree-title">parent 1</span>
             <!----></span>
           </div>
           <div class="ant-tree-treenode ant-tree-treenode-switcher-open" draggable="false" aria-grabbed="false"><span aria-hidden="true" class="ant-tree-indent"><span class="ant-tree-indent-unit ant-tree-indent-unit-start ant-tree-indent-unit-end"></span></span>
-            <!----><span class="ant-tree-switcher ant-tree-switcher_open"><span role="img" aria-label="down" class="anticon anticon-down"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
+            <!----><span class="ant-tree-switcher ant-tree-switcher_open"><span role="img" aria-label="down" class="anticon anticon-down ant-tree-switcher-icon"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
             <!----><span title="parent 1-0" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"><!----><span class="ant-tree-title">parent 1-0</span>
             <!----></span>
           </div>
@@ -495,12 +495,12 @@ exports[`renders ./components/tree/demo/switcher-icon.vue correctly 1`] = `
             <!----></span>
           </div>
           <div class="ant-tree-treenode ant-tree-treenode-switcher-close" draggable="false" aria-grabbed="false"><span aria-hidden="true" class="ant-tree-indent"><span class="ant-tree-indent-unit ant-tree-indent-unit-start ant-tree-indent-unit-end"></span></span>
-            <!----><span class="ant-tree-switcher ant-tree-switcher_close"><span role="img" aria-label="down" class="anticon anticon-down"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
+            <!----><span class="ant-tree-switcher ant-tree-switcher_close"><span role="img" aria-label="down" class="anticon anticon-down ant-tree-switcher-icon"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
             <!----><span title="parent 1-1" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close"><!----><span class="ant-tree-title">parent 1-1</span>
             <!----></span>
           </div>
           <div class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last" draggable="false" aria-grabbed="false"><span aria-hidden="true" class="ant-tree-indent"><span class="ant-tree-indent-unit ant-tree-indent-unit-start ant-tree-indent-unit-end"></span></span>
-            <!----><span class="ant-tree-switcher ant-tree-switcher_close"><span role="img" aria-label="down" class="anticon anticon-down"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
+            <!----><span class="ant-tree-switcher ant-tree-switcher_close"><span role="img" aria-label="down" class="anticon anticon-down ant-tree-switcher-icon"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
             <!----><span title="parent 1-2" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close"><!----><span class="ant-tree-title">parent 1-2</span>
             <!----></span>
           </div>

components/tree/demo/customized-icon.vue

@@ -18,9 +18,7 @@ You can customize icons for different nodes.
 
 <template>
   <a-tree v-model:selectedKeys="selectedKeys" :tree-data="treeData" show-icon default-expand-all>
-    <template #switcherIcon>
-      <down-outlined />
-    </template>
+    <template #switcherIcon="{ switcherCls }"><down-outlined :class="switcherCls" /></template>
     <template #icon="{ key, selected }">
       <template v-if="key === '0-0'">
         <smile-outlined />

components/tree/demo/switcher-icon.vue

@@ -23,7 +23,7 @@ customize collapse/expand icon of tree node
     show-line
     :tree-data="treeData"
   >
-    <template #switcherIcon><down-outlined /></template>
+    <template #switcherIcon="{ switcherCls }"><down-outlined :class="switcherCls" /></template>
   </a-tree>
 </template>
 <script lang="ts">