减少对fontawesome 的依赖

scss/components/_dropdown.scss

@@ -4,6 +4,9 @@
 
   &-caret {
     margin-left: $DropDown-caret-marginLeft;
+    display: inline-block;
+    vertical-align: top;
+    transition: transform 0.2s ease;
 
     > svg {
       width: px2rem(10px);
@@ -12,6 +15,10 @@
     }
   }
 
+  &.is-opened &-caret {
+    transform: rotate(180deg);
+  }
+
   &--block {
     display: block;
 

scss/components/_table.scss

@@ -693,25 +693,16 @@
     line-height: 1;
     height: 16px;
 
-    > i {
+    > svg {
       display: inline-block;
       text-align: center;
       cursor: pointer;
-      font-style: normal;
       transition: transform ease-in-out 0.2s, top ease-in-out 0.2s;
       position: relative;
-      left: 1px;
       transform-origin: 50% 50%;
-
-      &:before {
-        line-height: 1;
-        font-size: $Table-expandBtn-fontSize;
-        font-family: $Table-expandBtn-vendor;
-        content: $Table-expandBtn-icon;
-      }
     }
 
-    &.is-active > i {
+    &.is-active > svg {
       transform: rotate(90deg);
     }
 
@@ -725,6 +716,12 @@
     display: inline-block;
     visibility: hidden;
     cursor: move;
+    color: $icon-color;
+
+    &:hover {
+      text-decoration: none;
+      color: $icon-onHover-color;
+    }
   }
 
   &-table > tbody > tr:hover .#{$ns}Table-dragBtn,

scss/components/form/_checks.scss

@@ -213,6 +213,7 @@
       width: $Checkbox--sm-size;
       height: $Checkbox--sm-size;
       margin-left: -$Checkbox--sm-size;
+      margin-top: 0;
 
       + span {
         margin-left: $gap-xs;

src/components/TreeCheckboxes.tsx

@@ -7,6 +7,7 @@ import {Option} from './Select';
 import {autobind, eachTree, everyTree} from '../utils/helper';
 import Spinner from './Spinner';
 import {localeable} from '../locale';
+import {Icon} from './icons';
 
 export interface TreeCheckboxesProps extends BaseCheckboxesProps {
   expand?: 'all' | 'first' | 'root' | 'none';
@@ -219,7 +220,7 @@ export class TreeCheckboxes extends BaseCheckboxes<
               }}
               className={cx('Table-expandBtn', expaned ? 'is-active' : '')}
             >
-              <i />
+              <Icon icon="right-arrow-bold" className="icon" />
             </a>
           ) : null}
 

src/components/TreeRadios.tsx

@@ -7,6 +7,7 @@ import {autobind, eachTree, everyTree} from '../utils/helper';
 import Spinner from './Spinner';
 import {BaseRadiosProps, BaseRadios} from './ListRadios';
 import {localeable} from '../locale';
+import {Icon} from './icons';
 
 export interface TreeRadiosProps extends BaseRadiosProps {
   expand: 'all' | 'first' | 'root' | 'none';
@@ -132,7 +133,7 @@ export class TreeRadios extends BaseRadios<TreeRadiosProps, TreeRadiosState> {
               }}
               className={cx('Table-expandBtn', expaned ? 'is-active' : '')}
             >
-              <i />
+              <Icon icon="right-arrow-bold" className="icon" />
             </a>
           ) : null}
 

src/components/icons.tsx

@@ -87,6 +87,9 @@ import FilterIcon from '../icons/filter.svg';
 // @ts-ignore
 import CaretIcon from '../icons/caret.svg';
 
+// @ts-ignore
+import RightArrowBoldIcon from '../icons/right-arrow-bold.svg';
+
 // @ts-ignore
 import ColumnFilterIcon from '../icons/column-filter.svg';
 
@@ -173,6 +176,7 @@ registerIcon('copy', CopyIcon);
 registerIcon('filter', FilterIcon);
 registerIcon('column-filter', ColumnFilterIcon);
 registerIcon('caret', CaretIcon);
+registerIcon('right-arrow-bold', RightArrowBoldIcon);
 registerIcon('zoom-in', ZoomInIcon);
 registerIcon('zoom-out', ZoomOutIcon);
 registerIcon('question', QuestionIcon);

src/icons/caret.svg

@@ -1,7 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg viewBox="0 0 150 87" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-	<g id="caret-down" transform="translate(0.390625, -0.109375)" fill="currentColor" fill-rule="nonzero">
-		<path d="M145.321875,21.578125 L83.453125,83.446875 C78.5718769,88.3266492 70.6593731,88.3266492 65.778125,83.446875 L3.903125,21.578125 C0.653667694,18.4396941 -0.649532465,13.7921513 0.494410543,9.42178345 C1.63835355,5.05141555 5.05141555,1.63835355 9.42178345,0.494410543 C13.7921513,-0.649532465 18.4396941,0.653667694 21.578125,3.903125 L74.609375,56.934375 L127.640625,3.903125 C132.521441,-0.979417366 140.436208,-0.980816477 145.31875,3.9 C150.201292,8.78081648 150.202691,16.6955826 145.321875,21.578125 Z" id="路径">
-		</path>
+<svg viewBox="0 0 12 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g id="组件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+		<g id="04下拉/24px/默认禁用" transform="translate(-115.000000, -8.000000)">
+			<polygon id="Shape" fill="currentColor" fill-rule="nonzero" points="125.472727 8 121 12.8 116.527273 8 115 9.6 121 16 127 9.6">
+			</polygon>
+		</g>
 	</g>
 </svg>

src/icons/right-arrow-bold.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 99 176" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g id="Right-arrow" transform="translate(-0.132812, 0.304688)" fill="currentColor" fill-rule="nonzero">
+		<path d="M95.6353697,79.4031346 C95.3433678,79.1111326 95.037575,78.8417152 94.7219891,78.5906854 L19.819373,3.29993262 C15.6492004,-0.870040234 8.88818437,-0.870040234 4.71821172,3.29993262 C0.548238867,7.47010527 0.548238867,14.2309215 4.71821172,18.4010939 L72.9329621,87.0041811 L3.25320488,156.617783 C-0.916767969,160.787956 -0.916767969,167.548772 3.25320488,171.719144 C7.42317773,175.889117 14.1841937,175.889117 18.3543662,171.719144 L94.7211895,95.4180764 C95.0369754,95.1668467 95.342968,94.8976293 95.6351697,94.6054273 C97.7329475,92.5076496 98.7744412,89.7539166 98.7615739,87.0043809 C98.7746414,84.2544453 97.7331475,81.5009123 95.6353697,79.4031346 Z" id="路径">
+		</path>
+	</g>
+</svg>

src/renderers/Table.tsx

@@ -1075,7 +1075,7 @@ export default class Table extends React.Component<TableProps, object> {
               // data-position="top"
               onClick={store.toggleExpandAll}
             >
-              <i />
+              <Icon icon="right-arrow-bold" className="icon" />
             </a>
           )}
         </th>
@@ -1259,7 +1259,7 @@ export default class Table extends React.Component<TableProps, object> {
               // data-position="top"
               onClick={item.toggleExpanded}
             >
-              <i />
+              <Icon icon="right-arrow-bold" className="icon" />
             </a>
           ) : null}
         </td>
@@ -1481,7 +1481,6 @@ export default class Table extends React.Component<TableProps, object> {
     return (
       <DropDownButton
         {...rest}
-        iconOnly
         align={config ? config.align : 'left'}
         classnames={cx}
         classPrefix={ns}