From a534e4a56a355d0c5c42f302396282232b705b75 Mon Sep 17 00:00:00 2001
From: MengZhaoFly <1424254461@qq.com>
Date: Mon, 27 Apr 2020 23:42:51 +0800
Subject: [PATCH] doc: fix layout demo (#23683)

---
 .../__tests__/__snapshots__/demo.test.js.snap | 377 ++++++++----------
 components/layout/demo/custom-trigger.md      |  15 +-
 components/layout/demo/fixed-sider.md         |  40 +-
 components/layout/demo/responsive.md          |  20 +-
 components/layout/demo/side.md                |  34 +-
 components/layout/demo/top-side-2.md          |  30 +-
 components/layout/demo/top-side.md            |  30 +-
 7 files changed, 218 insertions(+), 328 deletions(-)

diff --git a/components/layout/__tests__/__snapshots__/demo.test.js.snap b/components/layout/__tests__/__snapshots__/demo.test.js.snap
index 07c3bf4dc9..9b2ee27337 100644
--- a/components/layout/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/layout/__tests__/__snapshots__/demo.test.js.snap
@@ -485,9 +485,7 @@ exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = `
               />
             </svg>
           </span>
-          <span
-            class="nav-text"
-          >
+          <span>
             nav 1
           </span>
         </li>
@@ -516,9 +514,7 @@ exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = `
               />
             </svg>
           </span>
-          <span
-            class="nav-text"
-          >
+          <span>
             nav 2
           </span>
         </li>
@@ -547,9 +543,7 @@ exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = `
               />
             </svg>
           </span>
-          <span
-            class="nav-text"
-          >
+          <span>
             nav 3
           </span>
         </li>
@@ -578,9 +572,7 @@ exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = `
               />
             </svg>
           </span>
-          <span
-            class="nav-text"
-          >
+          <span>
             nav 4
           </span>
         </li>
@@ -609,9 +601,7 @@ exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = `
               />
             </svg>
           </span>
-          <span
-            class="nav-text"
-          >
+          <span>
             nav 5
           </span>
         </li>
@@ -640,9 +630,7 @@ exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = `
               />
             </svg>
           </span>
-          <span
-            class="nav-text"
-          >
+          <span>
             nav 6
           </span>
         </li>
@@ -671,9 +659,7 @@ exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = `
               />
             </svg>
           </span>
-          <span
-            class="nav-text"
-          >
+          <span>
             nav 7
           </span>
         </li>
@@ -702,9 +688,7 @@ exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = `
               />
             </svg>
           </span>
-          <span
-            class="nav-text"
-          >
+          <span>
             nav 8
           </span>
         </li>
@@ -877,9 +861,7 @@ exports[`renders ./components/layout/demo/responsive.md correctly 1`] = `
               />
             </svg>
           </span>
-          <span
-            class="nav-text"
-          >
+          <span>
             nav 1
           </span>
         </li>
@@ -908,9 +890,7 @@ exports[`renders ./components/layout/demo/responsive.md correctly 1`] = `
               />
             </svg>
           </span>
-          <span
-            class="nav-text"
-          >
+          <span>
             nav 2
           </span>
         </li>
@@ -939,9 +919,7 @@ exports[`renders ./components/layout/demo/responsive.md correctly 1`] = `
               />
             </svg>
           </span>
-          <span
-            class="nav-text"
-          >
+          <span>
             nav 3
           </span>
         </li>
@@ -970,9 +948,7 @@ exports[`renders ./components/layout/demo/responsive.md correctly 1`] = `
               />
             </svg>
           </span>
-          <span
-            class="nav-text"
-          >
+          <span>
             nav 4
           </span>
         </li>
@@ -1095,30 +1071,28 @@ exports[`renders ./components/layout/demo/side.md correctly 1`] = `
             role="button"
             style="padding-left:24px"
           >
-            <span>
-              <span
-                aria-label="user"
-                class="anticon anticon-user"
-                role="img"
+            <span
+              aria-label="user"
+              class="anticon anticon-user"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                class=""
+                data-icon="user"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
               >
-                <svg
-                  aria-hidden="true"
-                  class=""
-                  data-icon="user"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
-                  />
-                </svg>
-              </span>
-              <span>
-                User
-              </span>
+                <path
+                  d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+                />
+              </svg>
+            </span>
+            <span>
+              User
             </span>
             <i
               class="ant-menu-submenu-arrow"
@@ -1137,30 +1111,28 @@ exports[`renders ./components/layout/demo/side.md correctly 1`] = `
             role="button"
             style="padding-left:24px"
           >
-            <span>
-              <span
-                aria-label="team"
-                class="anticon anticon-team"
-                role="img"
+            <span
+              aria-label="team"
+              class="anticon anticon-team"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                class=""
+                data-icon="team"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
               >
-                <svg
-                  aria-hidden="true"
-                  class=""
-                  data-icon="team"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M824.2 699.9a301.55 301.55 0 00-86.4-60.4C783.1 602.8 812 546.8 812 484c0-110.8-92.4-201.7-203.2-200-109.1 1.7-197 90.6-197 200 0 62.8 29 118.8 74.2 155.5a300.95 300.95 0 00-86.4 60.4C345 754.6 314 826.8 312 903.8a8 8 0 008 8.2h56c4.3 0 7.9-3.4 8-7.7 1.9-58 25.4-112.3 66.7-153.5A226.62 226.62 0 01612 684c60.9 0 118.2 23.7 161.3 66.8C814.5 792 838 846.3 840 904.3c.1 4.3 3.7 7.7 8 7.7h56a8 8 0 008-8.2c-2-77-33-149.2-87.8-203.9zM612 612c-34.2 0-66.4-13.3-90.5-37.5a126.86 126.86 0 01-37.5-91.8c.3-32.8 13.4-64.5 36.3-88 24-24.6 56.1-38.3 90.4-38.7 33.9-.3 66.8 12.9 91 36.6 24.8 24.3 38.4 56.8 38.4 91.4 0 34.2-13.3 66.3-37.5 90.5A127.3 127.3 0 01612 612zM361.5 510.4c-.9-8.7-1.4-17.5-1.4-26.4 0-15.9 1.5-31.4 4.3-46.5.7-3.6-1.2-7.3-4.5-8.8-13.6-6.1-26.1-14.5-36.9-25.1a127.54 127.54 0 01-38.7-95.4c.9-32.1 13.8-62.6 36.3-85.6 24.7-25.3 57.9-39.1 93.2-38.7 31.9.3 62.7 12.6 86 34.4 7.9 7.4 14.7 15.6 20.4 24.4 2 3.1 5.9 4.4 9.3 3.2 17.6-6.1 36.2-10.4 55.3-12.4 5.6-.6 8.8-6.6 6.3-11.6-32.5-64.3-98.9-108.7-175.7-109.9-110.9-1.7-203.3 89.2-203.3 199.9 0 62.8 28.9 118.8 74.2 155.5-31.8 14.7-61.1 35-86.5 60.4-54.8 54.7-85.8 126.9-87.8 204a8 8 0 008 8.2h56.1c4.3 0 7.9-3.4 8-7.7 1.9-58 25.4-112.3 66.7-153.5 29.4-29.4 65.4-49.8 104.7-59.7 3.9-1 6.5-4.7 6-8.7z"
-                  />
-                </svg>
-              </span>
-              <span>
-                Team
-              </span>
+                <path
+                  d="M824.2 699.9a301.55 301.55 0 00-86.4-60.4C783.1 602.8 812 546.8 812 484c0-110.8-92.4-201.7-203.2-200-109.1 1.7-197 90.6-197 200 0 62.8 29 118.8 74.2 155.5a300.95 300.95 0 00-86.4 60.4C345 754.6 314 826.8 312 903.8a8 8 0 008 8.2h56c4.3 0 7.9-3.4 8-7.7 1.9-58 25.4-112.3 66.7-153.5A226.62 226.62 0 01612 684c60.9 0 118.2 23.7 161.3 66.8C814.5 792 838 846.3 840 904.3c.1 4.3 3.7 7.7 8 7.7h56a8 8 0 008-8.2c-2-77-33-149.2-87.8-203.9zM612 612c-34.2 0-66.4-13.3-90.5-37.5a126.86 126.86 0 01-37.5-91.8c.3-32.8 13.4-64.5 36.3-88 24-24.6 56.1-38.3 90.4-38.7 33.9-.3 66.8 12.9 91 36.6 24.8 24.3 38.4 56.8 38.4 91.4 0 34.2-13.3 66.3-37.5 90.5A127.3 127.3 0 01612 612zM361.5 510.4c-.9-8.7-1.4-17.5-1.4-26.4 0-15.9 1.5-31.4 4.3-46.5.7-3.6-1.2-7.3-4.5-8.8-13.6-6.1-26.1-14.5-36.9-25.1a127.54 127.54 0 01-38.7-95.4c.9-32.1 13.8-62.6 36.3-85.6 24.7-25.3 57.9-39.1 93.2-38.7 31.9.3 62.7 12.6 86 34.4 7.9 7.4 14.7 15.6 20.4 24.4 2 3.1 5.9 4.4 9.3 3.2 17.6-6.1 36.2-10.4 55.3-12.4 5.6-.6 8.8-6.6 6.3-11.6-32.5-64.3-98.9-108.7-175.7-109.9-110.9-1.7-203.3 89.2-203.3 199.9 0 62.8 28.9 118.8 74.2 155.5-31.8 14.7-61.1 35-86.5 60.4-54.8 54.7-85.8 126.9-87.8 204a8 8 0 008 8.2h56.1c4.3 0 7.9-3.4 8-7.7 1.9-58 25.4-112.3 66.7-153.5 29.4-29.4 65.4-49.8 104.7-59.7 3.9-1 6.5-4.7 6-8.7z"
+                />
+              </svg>
+            </span>
+            <span>
+              Team
             </span>
             <i
               class="ant-menu-submenu-arrow"
@@ -1193,6 +1165,7 @@ exports[`renders ./components/layout/demo/side.md correctly 1`] = `
               />
             </svg>
           </span>
+          <span />
         </li>
       </ul>
     </div>
@@ -1632,27 +1605,27 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
                 role="button"
                 style="padding-left:24px"
               >
-                <span>
-                  <span
-                    aria-label="user"
-                    class="anticon anticon-user"
-                    role="img"
+                <span
+                  aria-label="user"
+                  class="anticon anticon-user"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class=""
+                    data-icon="user"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class=""
-                      data-icon="user"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
-                      />
-                    </svg>
-                  </span>
+                    <path
+                      d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+                    />
+                  </svg>
+                </span>
+                <span>
                   subnav 1
                 </span>
                 <i
@@ -1705,27 +1678,27 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
                 role="button"
                 style="padding-left:24px"
               >
-                <span>
-                  <span
-                    aria-label="laptop"
-                    class="anticon anticon-laptop"
-                    role="img"
+                <span
+                  aria-label="laptop"
+                  class="anticon anticon-laptop"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class=""
+                    data-icon="laptop"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class=""
-                      data-icon="laptop"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M956.9 845.1L896.4 632V168c0-17.7-14.3-32-32-32h-704c-17.7 0-32 14.3-32 32v464L67.9 845.1C60.4 866 75.8 888 98 888h828.8c22.2 0 37.6-22 30.1-42.9zM200.4 208h624v395h-624V208zm228.3 608l8.1-37h150.3l8.1 37H428.7zm224 0l-19.1-86.7c-.8-3.7-4.1-6.3-7.8-6.3H398.2c-3.8 0-7 2.6-7.8 6.3L371.3 816H151l42.3-149h638.2l42.3 149H652.7z"
-                      />
-                    </svg>
-                  </span>
+                    <path
+                      d="M956.9 845.1L896.4 632V168c0-17.7-14.3-32-32-32h-704c-17.7 0-32 14.3-32 32v464L67.9 845.1C60.4 866 75.8 888 98 888h828.8c22.2 0 37.6-22 30.1-42.9zM200.4 208h624v395h-624V208zm228.3 608l8.1-37h150.3l8.1 37H428.7zm224 0l-19.1-86.7c-.8-3.7-4.1-6.3-7.8-6.3H398.2c-3.8 0-7 2.6-7.8 6.3L371.3 816H151l42.3-149h638.2l42.3 149H652.7z"
+                    />
+                  </svg>
+                </span>
+                <span>
                   subnav 2
                 </span>
                 <i
@@ -1745,27 +1718,27 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
                 role="button"
                 style="padding-left:24px"
               >
-                <span>
-                  <span
-                    aria-label="notification"
-                    class="anticon anticon-notification"
-                    role="img"
+                <span
+                  aria-label="notification"
+                  class="anticon anticon-notification"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class=""
+                    data-icon="notification"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class=""
-                      data-icon="notification"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.7c-3.7 11.6-5.7 23.9-5.7 36.4 0 65.9 53.8 119.5 120 119.5 55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3 16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112zM344 762.3c-26.5 0-48-21.4-48-47.8 0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1zm496 58.4L318.8 611.3l-12.9-5.2H184V417.9h121.9l12.9-5.2L840 203.3v617.4z"
-                      />
-                    </svg>
-                  </span>
+                    <path
+                      d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.7c-3.7 11.6-5.7 23.9-5.7 36.4 0 65.9 53.8 119.5 120 119.5 55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3 16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112zM344 762.3c-26.5 0-48-21.4-48-47.8 0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1zm496 58.4L318.8 611.3l-12.9-5.2H184V417.9h121.9l12.9-5.2L840 203.3v617.4z"
+                    />
+                  </svg>
+                </span>
+                <span>
                   subnav 3
                 </span>
                 <i
@@ -1931,27 +1904,27 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
               role="button"
               style="padding-left:24px"
             >
-              <span>
-                <span
-                  aria-label="user"
-                  class="anticon anticon-user"
-                  role="img"
+              <span
+                aria-label="user"
+                class="anticon anticon-user"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  class=""
+                  data-icon="user"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class=""
-                    data-icon="user"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
-                    />
-                  </svg>
-                </span>
+                  <path
+                    d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+                  />
+                </svg>
+              </span>
+              <span>
                 subnav 1
               </span>
               <i
@@ -2004,27 +1977,27 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
               role="button"
               style="padding-left:24px"
             >
-              <span>
-                <span
-                  aria-label="laptop"
-                  class="anticon anticon-laptop"
-                  role="img"
+              <span
+                aria-label="laptop"
+                class="anticon anticon-laptop"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  class=""
+                  data-icon="laptop"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class=""
-                    data-icon="laptop"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M956.9 845.1L896.4 632V168c0-17.7-14.3-32-32-32h-704c-17.7 0-32 14.3-32 32v464L67.9 845.1C60.4 866 75.8 888 98 888h828.8c22.2 0 37.6-22 30.1-42.9zM200.4 208h624v395h-624V208zm228.3 608l8.1-37h150.3l8.1 37H428.7zm224 0l-19.1-86.7c-.8-3.7-4.1-6.3-7.8-6.3H398.2c-3.8 0-7 2.6-7.8 6.3L371.3 816H151l42.3-149h638.2l42.3 149H652.7z"
-                    />
-                  </svg>
-                </span>
+                  <path
+                    d="M956.9 845.1L896.4 632V168c0-17.7-14.3-32-32-32h-704c-17.7 0-32 14.3-32 32v464L67.9 845.1C60.4 866 75.8 888 98 888h828.8c22.2 0 37.6-22 30.1-42.9zM200.4 208h624v395h-624V208zm228.3 608l8.1-37h150.3l8.1 37H428.7zm224 0l-19.1-86.7c-.8-3.7-4.1-6.3-7.8-6.3H398.2c-3.8 0-7 2.6-7.8 6.3L371.3 816H151l42.3-149h638.2l42.3 149H652.7z"
+                  />
+                </svg>
+              </span>
+              <span>
                 subnav 2
               </span>
               <i
@@ -2044,27 +2017,27 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
               role="button"
               style="padding-left:24px"
             >
-              <span>
-                <span
-                  aria-label="notification"
-                  class="anticon anticon-notification"
-                  role="img"
+              <span
+                aria-label="notification"
+                class="anticon anticon-notification"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  class=""
+                  data-icon="notification"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class=""
-                    data-icon="notification"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.7c-3.7 11.6-5.7 23.9-5.7 36.4 0 65.9 53.8 119.5 120 119.5 55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3 16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112zM344 762.3c-26.5 0-48-21.4-48-47.8 0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1zm496 58.4L318.8 611.3l-12.9-5.2H184V417.9h121.9l12.9-5.2L840 203.3v617.4z"
-                    />
-                  </svg>
-                </span>
+                  <path
+                    d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.7c-3.7 11.6-5.7 23.9-5.7 36.4 0 65.9 53.8 119.5 120 119.5 55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3 16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112zM344 762.3c-26.5 0-48-21.4-48-47.8 0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1zm496 58.4L318.8 611.3l-12.9-5.2H184V417.9h121.9l12.9-5.2L840 203.3v617.4z"
+                  />
+                </svg>
+              </span>
+              <span>
                 subnav 3
               </span>
               <i
diff --git a/components/layout/demo/custom-trigger.md b/components/layout/demo/custom-trigger.md
index 7d60b48aaa..9fe3207b62 100644
--- a/components/layout/demo/custom-trigger.md
+++ b/components/layout/demo/custom-trigger.md
@@ -42,17 +42,14 @@ class SiderDemo extends React.Component {
         <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
           <div className="logo" />
           <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
-            <Menu.Item key="1">
-              <UserOutlined />
-              <span>nav 1</span>
+            <Menu.Item key="1" icon={<UserOutlined />}>
+              nav 1
             </Menu.Item>
-            <Menu.Item key="2">
-              <VideoCameraOutlined />
-              <span>nav 2</span>
+            <Menu.Item key="2" icon={<VideoCameraOutlined />}>
+              nav 2
             </Menu.Item>
-            <Menu.Item key="3">
-              <UploadOutlined />
-              <span>nav 3</span>
+            <Menu.Item key="3" icon={<UploadOutlined />}>
+              nav 3
             </Menu.Item>
           </Menu>
         </Sider>
diff --git a/components/layout/demo/fixed-sider.md b/components/layout/demo/fixed-sider.md
index a83a6bb57d..b562df93ea 100644
--- a/components/layout/demo/fixed-sider.md
+++ b/components/layout/demo/fixed-sider.md
@@ -41,37 +41,29 @@ ReactDOM.render(
     >
       <div className="logo" />
       <Menu theme="dark" mode="inline" defaultSelectedKeys={['4']}>
-        <Menu.Item key="1">
-          <UserOutlined />
-          <span className="nav-text">nav 1</span>
+        <Menu.Item key="1" icon={<UserOutlined />}>
+          nav 1
         </Menu.Item>
-        <Menu.Item key="2">
-          <VideoCameraOutlined />
-          <span className="nav-text">nav 2</span>
+        <Menu.Item key="2" icon={<VideoCameraOutlined />}>
+          nav 2
         </Menu.Item>
-        <Menu.Item key="3">
-          <UploadOutlined />
-          <span className="nav-text">nav 3</span>
+        <Menu.Item key="3" icon={<UploadOutlined />}>
+          nav 3
         </Menu.Item>
-        <Menu.Item key="4">
-          <BarChartOutlined />
-          <span className="nav-text">nav 4</span>
+        <Menu.Item key="4" icon={<BarChartOutlined />}>
+          nav 4
         </Menu.Item>
-        <Menu.Item key="5">
-          <CloudOutlined />
-          <span className="nav-text">nav 5</span>
+        <Menu.Item key="5" icon={<CloudOutlined />}>
+          nav 5
         </Menu.Item>
-        <Menu.Item key="6">
-          <AppstoreOutlined />
-          <span className="nav-text">nav 6</span>
+        <Menu.Item key="6" icon={<AppstoreOutlined />}>
+          nav 6
         </Menu.Item>
-        <Menu.Item key="7">
-          <TeamOutlined />
-          <span className="nav-text">nav 7</span>
+        <Menu.Item key="7" icon={<TeamOutlined />}>
+          nav 7
         </Menu.Item>
-        <Menu.Item key="8">
-          <ShopOutlined />
-          <span className="nav-text">nav 8</span>
+        <Menu.Item key="8" icon={<ShopOutlined />}>
+          nav 8
         </Menu.Item>
       </Menu>
     </Sider>
diff --git a/components/layout/demo/responsive.md b/components/layout/demo/responsive.md
index 6b34156c5e..ed20c06993 100644
--- a/components/layout/demo/responsive.md
+++ b/components/layout/demo/responsive.md
@@ -37,21 +37,17 @@ ReactDOM.render(
     >
       <div className="logo" />
       <Menu theme="dark" mode="inline" defaultSelectedKeys={['4']}>
-        <Menu.Item key="1">
-          <UserOutlined />
-          <span className="nav-text">nav 1</span>
+        <Menu.Item key="1" icon={<UserOutlined />}>
+          nav 1
         </Menu.Item>
-        <Menu.Item key="2">
-          <VideoCameraOutlined />
-          <span className="nav-text">nav 2</span>
+        <Menu.Item key="2" icon={<VideoCameraOutlined />}>
+          nav 2
         </Menu.Item>
-        <Menu.Item key="3">
-          <UploadOutlined />
-          <span className="nav-text">nav 3</span>
+        <Menu.Item key="3" icon={<UploadOutlined />}>
+          nav 3
         </Menu.Item>
-        <Menu.Item key="4">
-          <UserOutlined />
-          <span className="nav-text">nav 4</span>
+        <Menu.Item key="4" icon={<UserOutlined />}>
+          nav 4
         </Menu.Item>
       </Menu>
     </Sider>
diff --git a/components/layout/demo/side.md b/components/layout/demo/side.md
index 80f02e72f4..0cad975d10 100644
--- a/components/layout/demo/side.md
+++ b/components/layout/demo/side.md
@@ -49,42 +49,22 @@ class SiderDemo extends React.Component {
         <Sider collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse}>
           <div className="logo" />
           <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
-            <Menu.Item key="1">
-              <PieChartOutlined />
-              <span>Option 1</span>
+            <Menu.Item key="1" icon={<PieChartOutlined />}>
+              Option 1
             </Menu.Item>
-            <Menu.Item key="2">
-              <DesktopOutlined />
-              <span>Option 2</span>
+            <Menu.Item key="2" icon={<DesktopOutlined />}>
+              Option 2
             </Menu.Item>
-            <SubMenu
-              key="sub1"
-              title={
-                <span>
-                  <UserOutlined />
-                  <span>User</span>
-                </span>
-              }
-            >
+            <SubMenu key="sub1" icon={<UserOutlined />} title="User">
               <Menu.Item key="3">Tom</Menu.Item>
               <Menu.Item key="4">Bill</Menu.Item>
               <Menu.Item key="5">Alex</Menu.Item>
             </SubMenu>
-            <SubMenu
-              key="sub2"
-              title={
-                <span>
-                  <TeamOutlined />
-                  <span>Team</span>
-                </span>
-              }
-            >
+            <SubMenu key="sub2" icon={<TeamOutlined />} title="Team">
               <Menu.Item key="6">Team 1</Menu.Item>
               <Menu.Item key="8">Team 2</Menu.Item>
             </SubMenu>
-            <Menu.Item key="9">
-              <FileOutlined />
-            </Menu.Item>
+            <Menu.Item key="9" icon={<FileOutlined />} />
           </Menu>
         </Sider>
         <Layout className="site-layout">
diff --git a/components/layout/demo/top-side-2.md b/components/layout/demo/top-side-2.md
index b719f9e1df..f4afc4cb46 100644
--- a/components/layout/demo/top-side-2.md
+++ b/components/layout/demo/top-side-2.md
@@ -38,43 +38,19 @@ ReactDOM.render(
           defaultOpenKeys={['sub1']}
           style={{ height: '100%', borderRight: 0 }}
         >
-          <SubMenu
-            key="sub1"
-            title={
-              <span>
-                <UserOutlined />
-                subnav 1
-              </span>
-            }
-          >
+          <SubMenu key="sub1" icon={<UserOutlined />} title="subnav 1">
             <Menu.Item key="1">option1</Menu.Item>
             <Menu.Item key="2">option2</Menu.Item>
             <Menu.Item key="3">option3</Menu.Item>
             <Menu.Item key="4">option4</Menu.Item>
           </SubMenu>
-          <SubMenu
-            key="sub2"
-            title={
-              <span>
-                <LaptopOutlined />
-                subnav 2
-              </span>
-            }
-          >
+          <SubMenu key="sub2" icon={<LaptopOutlined />} title="subnav 2">
             <Menu.Item key="5">option5</Menu.Item>
             <Menu.Item key="6">option6</Menu.Item>
             <Menu.Item key="7">option7</Menu.Item>
             <Menu.Item key="8">option8</Menu.Item>
           </SubMenu>
-          <SubMenu
-            key="sub3"
-            title={
-              <span>
-                <NotificationOutlined />
-                subnav 3
-              </span>
-            }
-          >
+          <SubMenu key="sub3" icon={<NotificationOutlined />} title="subnav 3">
             <Menu.Item key="9">option9</Menu.Item>
             <Menu.Item key="10">option10</Menu.Item>
             <Menu.Item key="11">option11</Menu.Item>
diff --git a/components/layout/demo/top-side.md b/components/layout/demo/top-side.md
index 3cc82dc2b3..817458e112 100644
--- a/components/layout/demo/top-side.md
+++ b/components/layout/demo/top-side.md
@@ -44,43 +44,19 @@ ReactDOM.render(
             defaultOpenKeys={['sub1']}
             style={{ height: '100%' }}
           >
-            <SubMenu
-              key="sub1"
-              title={
-                <span>
-                  <UserOutlined />
-                  subnav 1
-                </span>
-              }
-            >
+            <SubMenu key="sub1" icon={<UserOutlined />} title="subnav 1">
               <Menu.Item key="1">option1</Menu.Item>
               <Menu.Item key="2">option2</Menu.Item>
               <Menu.Item key="3">option3</Menu.Item>
               <Menu.Item key="4">option4</Menu.Item>
             </SubMenu>
-            <SubMenu
-              key="sub2"
-              title={
-                <span>
-                  <LaptopOutlined />
-                  subnav 2
-                </span>
-              }
-            >
+            <SubMenu key="sub2" icon={<LaptopOutlined />} title="subnav 2">
               <Menu.Item key="5">option5</Menu.Item>
               <Menu.Item key="6">option6</Menu.Item>
               <Menu.Item key="7">option7</Menu.Item>
               <Menu.Item key="8">option8</Menu.Item>
             </SubMenu>
-            <SubMenu
-              key="sub3"
-              title={
-                <span>
-                  <NotificationOutlined />
-                  subnav 3
-                </span>
-              }
-            >
+            <SubMenu key="sub3" icon={<NotificationOutlined />} title="subnav 3">
               <Menu.Item key="9">option9</Menu.Item>
               <Menu.Item key="10">option10</Menu.Item>
               <Menu.Item key="11">option11</Menu.Item>