feat: optimize the display of the button icon

Author: tangjinzhou

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

@@ -13,9 +13,7 @@ exports[`renders ./components/button/demo/button-group.md correctly 1`] = `
   <h4>With Icon</h4>
   <div class="ant-btn-group"><button type="button" class="ant-btn ant-btn-primary"><i class="anticon anticon-left"><svg viewBox="64 64 896 896" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
           <path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path>
-        </svg></i>Go back
-    </button><button type="button" class="ant-btn ant-btn-primary">
-      Go forward<i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+        </svg></i><span>Go back</span></button><button type="button" class="ant-btn ant-btn-primary"><span>Go forward</span><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
           <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
         </svg></i></button></div>
   <div class="ant-btn-group"><button type="button" class="ant-btn ant-btn-primary"><i class="anticon anticon-cloud"><svg viewBox="64 64 896 896" data-icon="cloud" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
@@ -70,8 +68,7 @@ exports[`renders ./components/button/demo/loading.md correctly 1`] = `
 `;
 
 exports[`renders ./components/button/demo/multiple.md correctly 1`] = `
-<div><button type="button" class="ant-btn ant-btn-primary"><span>Primary</span></button> <button type="button" class="ant-btn ant-btn-default"><span>secondary</span></button> <button type="button" class="ant-btn ant-btn-default ant-dropdown-trigger">
-    Actions <i class="anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+<div><button type="button" class="ant-btn ant-btn-primary"><span>Primary</span></button> <button type="button" class="ant-btn ant-btn-default"><span>secondary</span></button> <button type="button" class="ant-btn ant-btn-default ant-dropdown-trigger"><span>Actions</span><i class="anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
         <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></i></button></div>
 `;
@@ -85,9 +82,7 @@ exports[`renders ./components/button/demo/size.md correctly 1`] = `
       </svg></i><span>Download</span></button> <br>
   <div class="ant-btn-group ant-btn-group-lg"><button type="button" class="ant-btn ant-btn-primary"><i class="anticon anticon-left"><svg viewBox="64 64 896 896" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
           <path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path>
-        </svg></i>Backward
-    </button><button type="button" class="ant-btn ant-btn-primary">
-      Forward<i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+        </svg></i><span>Backward</span></button><button type="button" class="ant-btn ant-btn-primary"><span>Forward</span><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
           <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
         </svg></i></button></div>
 </div>

components/button/__tests__/__snapshots__/index.test.js.snap

@@ -15,7 +15,7 @@ exports[`Button renders Chinese characters correctly 1`] = `
 exports[`Button renders Chinese characters correctly 2`] = `
 <button type="button" class="ant-btn ant-btn-default"><i class="anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
       <path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path>
-    </svg></i>按钮</button>
+    </svg></i><span>按钮</span></button>
 `;
 
 exports[`Button renders Chinese characters correctly 3`] = `

components/button/button.jsx

@@ -120,7 +120,8 @@ export default {
     }
     const iconType = sLoading ? 'loading' : icon
     const iconNode = iconType ? <Icon type={iconType} /> : null
-    const kids = $slots.default && $slots.default.length === 1 ? this.insertSpace($slots.default[0], this.isNeedInserted()) : $slots.default
+    const children = filterEmpty($slots.default)
+    const kids = children.map(child => this.insertSpace(child, this.isNeedInserted()))
 
     if ($attrs.href !== undefined) {
       return (

components/button/style/index.less

@@ -92,6 +92,14 @@
 
   .@{iconfont-css-prefix} {
     transition: margin-left 0.3s @ease-in-out;
+    // Follow icon blur under windows. Change the render.
+    // https://github.com/ant-design/ant-design/issues/13924
+    &.@{iconfont-css-prefix}-plus,
+    &.@{iconfont-css-prefix}-minus {
+      > svg {
+        shape-rendering: optimizeSpeed;
+      }
+    }
   }
 
   &&-loading:before {

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

@@ -9,8 +9,7 @@ exports[`renders ./components/drawer/demo/basic-right.md correctly 1`] = `
 exports[`renders ./components/drawer/demo/form-in-drawer.md correctly 1`] = `
 <div><button type="button" class="ant-btn ant-btn-primary"><i class="anticon anticon-plus"><svg viewBox="64 64 896 896" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
         <path d="M848 474H550V152h-76v322H176c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h298v322h76V550h298c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path>
-      </svg></i> New account
-  </button>
+      </svg></i><span>New account</span></button>
   <!---->
 </div>
 `;

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

@@ -16,8 +16,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
         </svg></i></button></div>
   <div class="ant-btn-group ant-dropdown-button" style="margin-left: 8px;"><button disabled="disabled" type="button" class="ant-btn ant-btn-default"><span>Dropdown</span></button><button type="button" class="ant-btn ant-btn-default ant-dropdown-trigger"><i class="anticon anticon-ellipsis"><svg viewBox="64 64 896 896" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
           <path d="M176 511a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm280 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm280 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0z"></path>
-        </svg></i></button></div> <button type="button" class="ant-btn ant-btn-default ant-dropdown-trigger" style="margin-left: 8px;">
-    Button <i class="anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+        </svg></i></button></div> <button type="button" class="ant-btn ant-btn-default ant-dropdown-trigger" style="margin-left: 8px;"><span>Button</span><i class="anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
         <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></i></button>
 </div>

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

@@ -169,8 +169,7 @@ exports[`renders ./components/form/demo/dynamic-form-item.vue correctly 1`] = `
 <form class="ant-form ant-form-horizontal">
   <div class="ant-row ant-form-item">
     <div class="ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-20 ant-col-sm-offset-4 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><button type="button" class="ant-btn ant-btn-dashed" style="width: 60%;"><i class="anticon anticon-plus"><svg viewBox="64 64 896 896" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M848 474H550V152h-76v322H176c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h298v322h76V550h298c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path></svg></i> Add field
-    </button></span>
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><button type="button" class="ant-btn ant-btn-dashed" style="width: 60%;"><i class="anticon anticon-plus"><svg viewBox="64 64 896 896" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M848 474H550V152h-76v322H176c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h298v322h76V550h298c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path></svg></i><span>Add field</span></button></span>
         <!---->
       </div>
     </div>

package.json

@@ -184,4 +184,4 @@
         "vue-ref": "^1.0.3",
         "warning": "^3.0.0"
     }
-}
+}