icon 改用 svg

scss/_variables.scss

@@ -1211,7 +1211,7 @@ $Combo--vertical-itemToolbar-positionTop: -$Combo--vertical-itemToolbar-height !
 $Combo--vertical-itemToolbar-positionRight: px2rem(5px) !default;
 
 $Combo--horizontal-item-gap: px2rem(5px);
-$Combo--horizontal-dragger-top: px2rem(8px) !default;
+$Combo--horizontal-dragger-top: px2rem(10px) !default;
 
 // Sub Form
 $SubForm--addBtn-bg: $Button--info-bg !default;

scss/components/_button.scss

@@ -276,6 +276,12 @@ fieldset:disabled a.#{$ns}Button {
   min-width: $Button-height * $Button--iconOnly-minWidthRate;
 
   &:not(.#{$ns}Button--link) {
+    > svg {
+      width: px2rem(14px);
+      height: px2rem(14px);
+      top: px2rem(2px);
+    }
+
     > .fa,
     > .iconfont {
       font-size: $fontSizeMd;

scss/components/form/_combo.scss

@@ -70,9 +70,17 @@
   &-itemDrager {
     cursor: move;
 
+    > a {
+      color: $icon-color;
+
+      &:hover {
+        color: $icon-onHover-color;
+      }
+    }
+
     svg {
-      width: px2rem(20px);
-      height: px2rem(20px);
+      width: px2rem(16px);
+      height: px2rem(16px);
       top: $Combo--horizontal-dragger-top;
     }
   }

src/components/ResultList.tsx

@@ -144,10 +144,7 @@ export class ResultList extends React.Component<ResultListProps> {
                 key={index}
               >
                 {sortable && !disabled && value.length > 1 ? (
-                  <Icon
-                    className={cx('Selections-dragbar')}
-                    icon="combo-dragger"
-                  />
+                  <Icon className={cx('Selections-dragbar')} icon="drag-bar" />
                 ) : null}
 
                 <label>{itemRender(option)}</label>

src/components/icons.tsx

@@ -64,11 +64,17 @@ import InfoIcon from '../icons/info.svg';
 import LocationIcon from '../icons/location.svg';
 
 // @ts-ignore
-import ComboDraggerIcon from '../icons/combo-dragger.svg';
+import DragBarIcon from '../icons/drag-bar.svg';
 
 // @ts-ignore
 import ReloadIcon from '../icons/reload.svg';
 
+// @ts-ignore
+import ExchangeIcon from '../icons/exchange.svg';
+
+// @ts-ignore
+import ColmunsIcon from '../icons/columns.svg';
+
 // 兼容原来的用法，后续不直接试用。
 // @ts-ignore
 export const closeIcon = <CloseIcon />;
@@ -131,8 +137,10 @@ registerIcon('back', BackIcon);
 registerIcon('move', MoveIcon);
 registerIcon('info', InfoIcon);
 registerIcon('location', LocationIcon);
-registerIcon('combo-dragger', ComboDraggerIcon);
+registerIcon('drag-bar', DragBarIcon);
 registerIcon('reload', ReloadIcon);
+registerIcon('exchange', ExchangeIcon);
+registerIcon('columns', ColmunsIcon);
 
 export function Icon({
   icon,

src/icons/combo-dragger.svg

@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1586501480188" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1509" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M469.333333 256a85.333333 85.333333 0 1 1-85.333333-85.333333 85.333333 85.333333 0 0 1 85.333333 85.333333z m-85.333333 170.666667a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m256-341.333334a85.333333 85.333333 0 1 0-85.333333-85.333333 85.333333 85.333333 0 0 0 85.333333 85.333333z m0 85.333334a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z" p-id="1510" data-spm-anchor-id="a313x.7781069.0.i6" class="selected" fill="#999999"></path></svg>

src/icons/drag-bar.svg

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 428 684" version="1.1" 
+    xmlns="http://www.w3.org/2000/svg" 
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="drag-bar" fill="currentColor" fill-rule="nonzero">
+        <path d="M171.333333,86 C171.333333,133.128298 133.128298,171.333333 86,171.333333 C38.8717015,171.333333 0.666667,133.128298 0.666667,86 C0.666667,38.8717015 38.8717015,0.666667 86,0.666667 C133.128298,0.666667 171.333333,38.8717015 171.333333,86 L171.333333,86 Z M86,256.666667 C38.8717015,256.666667 0.666667,294.871702 0.666667,342 C0.666667,389.128298 38.8717015,427.333333 86,427.333333 C133.128298,427.333333 171.333333,389.128298 171.333333,342 C171.333333,294.871702 133.128298,256.666667 86,256.666667 L86,256.666667 Z M86,512.666667 C38.8717015,512.666667 0.666667,550.871702 0.666667,598 C0.666667,645.128298 38.8717015,683.333333 86,683.333333 C133.128298,683.333333 171.333333,645.128298 171.333333,598 C171.333333,550.871702 133.128298,512.666667 86,512.666667 L86,512.666667 Z M342,171.333333 C389.128298,171.333333 427.333333,133.128298 427.333333,86 C427.333333,38.8717015 389.128298,0.666667 342,0.666667 C294.871702,0.666667 256.666667,38.8717015 256.666667,86 C256.666667,133.128298 294.871702,171.333333 342,171.333333 L342,171.333333 Z M342,256.666667 C294.871702,256.666667 256.666667,294.871702 256.666667,342 C256.666667,389.128298 294.871702,427.333333 342,427.333333 C389.128298,427.333333 427.333333,389.128298 427.333333,342 C427.333333,294.871702 389.128298,256.666667 342,256.666667 L342,256.666667 Z M342,512.666667 C294.871702,512.666667 256.666667,550.871702 256.666667,598 C256.666667,645.128298 294.871702,683.333333 342,683.333333 C389.128298,683.333333 427.333333,645.128298 427.333333,598 C427.333333,575.368193 418.342883,553.663326 402.339778,537.660222 C386.336674,521.657117 364.631807,512.666667 342,512.666667 L342,512.666667 Z" id="形状"></path>
+    </g>
+</svg>

src/icons/exchange.svg

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 175 201" version="1.1" 
+	xmlns="http://www.w3.org/2000/svg" 
+	xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+		<path d="M-1.01710969,84.1828903 L176.48289,84.1828903 C182.68289,84.1828903 187.78289,79.0828903 187.78289,72.8828903 C187.78289,69.4828903 186.28289,66.3828903 183.68289,64.1828903 C183.08289,63.3828903 182.28289,62.6828903 181.48289,62.0828903 L115.18289,15.5828903 C110.08289,11.9828903 103.08289,13.1828903 99.4828903,18.2828903 C95.8828903,23.3828903 97.1828903,30.3828903 102.28289,33.9828903 L141.58289,61.5828903 L-1.01710969,61.5828903 C-7.21710969,61.6828903 -12.3171097,66.7828903 -12.3171097,72.9828903 C-12.3171097,79.1828903 -7.21710969,84.1828903 -1.01710969,84.1828903 Z M-1.01710969,117.38289 C-7.21710969,117.38289 -12.3171097,122.48289 -12.3171097,128.68289 C-12.3171097,132.08289 -10.8171097,135.18289 -8.21710969,137.38289 C-7.51710969,138.18289 -6.81710969,138.88289 -6.01710969,139.48289 L60.2828903,185.98289 C62.1828903,187.28289 64.3828903,187.98289 66.7828903,187.98289 C70.4828903,187.98289 73.8828903,186.18289 75.9828903,183.18289 C77.6828903,180.68289 78.3828903,177.78289 77.8828903,174.78289 C77.3828903,171.78289 75.6828903,169.28289 73.2828903,167.48289 L33.9828903,139.88289 L176.48289,139.88289 C182.68289,139.88289 187.78289,134.78289 187.78289,128.58289 C187.68289,122.38289 182.58289,117.38289 176.38289,117.38289 L-1.01710969,117.38289 Z" fill="currentColor" fill-rule="nonzero" transform="translate(87.732890, 100.745312) rotate(-270.000000) translate(-87.732890, -100.745312) "></path>
+	</g>
+</svg>

src/renderers/Form/Combo.tsx

@@ -493,7 +493,7 @@ export default class ComboControl extends React.Component<ComboProps> {
     if (minLength && (!Array.isArray(value) || value.length < minLength)) {
       return __(
         (messages && messages.minLengthValidateFailed) ||
-          '组合表单成员数量不够，低于设定的最小{{minLenth}}个，请添加更多的成员。',
+          '组合表单成员数量不够，低于设定的最小{{minLength}}个，请添加更多的成员。',
         {minLength}
       );
     } else if (maxLength && Array.isArray(value) && value.length > maxLength) {
@@ -1050,7 +1050,7 @@ export default class ComboControl extends React.Component<ComboProps> {
                         {dragIcon ? (
                           <i className={dragIcon} />
                         ) : (
-                          <Icon icon="combo-dragger" />
+                          <Icon icon="drag-bar" />
                         )}
                       </a>
                     </div>

src/renderers/Form/Table.tsx

@@ -107,7 +107,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
 
     if (minLength && (!Array.isArray(value) || value.length < minLength)) {
       return __(
-        '组合表单成员数量不够，低于设定的最小{{minLenth}}个，请添加更多的成员。',
+        '组合表单成员数量不够，低于设定的最小{{minLength}}个，请添加更多的成员。',
         {minLength}
       );
     } else if (maxLength && Array.isArray(value) && value.length > maxLength) {

src/renderers/List.tsx

@@ -22,6 +22,7 @@ import PopOver from './PopOver';
 import Sortable from 'sortablejs';
 import {TableCell} from './Table';
 import Copyable from './Copyable';
+import {Icon} from '../components/icons';
 
 export interface Column {
   type: string;
@@ -893,7 +894,7 @@ export class ListItem extends React.Component<ListItemProps> {
     if (dragging) {
       return (
         <div className={cx('ListItem-dragBtn')}>
-          <i className="glyphicon glyphicon-sort" />
+          <Icon icon="drag-bar" />
         </div>
       );
     } else if (selectable && !hideCheckToggler) {

src/renderers/Table.tsx

@@ -36,6 +36,7 @@ import {resizeSensor} from '../utils/resize-sensor';
 import find from 'lodash/find';
 import Overlay from '../components/Overlay';
 import PopOverable from './PopOver';
+import {Icon} from '../components/icons';
 
 export interface Column {
   type: string;
@@ -158,8 +159,7 @@ export default class Table extends React.Component<TableProps, object> {
     primaryField: 'id',
     itemCheckableOn: '',
     itemDraggableOn: '',
-    hideCheckToggler: false,
-    dragIcon: 'glyphicon glyphicon-sort'
+    hideCheckToggler: false
   };
 
   table?: HTMLTableElement;
@@ -1237,7 +1237,7 @@ export default class Table extends React.Component<TableProps, object> {
     } else if (column.type === '__dragme') {
       return (
         <td key={props.key} className={cx(column.pristine.className)}>
-          {item.draggable ? <i className="glyphicon glyphicon-sort" /> : null}
+          {item.draggable ? <Icon icon="drag-bar" className="icon" /> : null}
         </td>
       );
     } else if (column.type === '__expandme') {
@@ -1281,7 +1281,7 @@ export default class Table extends React.Component<TableProps, object> {
           onDragStart={this.handleDragStart}
           className={cx('Table-dragBtn')}
         >
-          <i className="glyphicon glyphicon-sort" />
+          <Icon icon="drag-bar" className="icon" />
         </a>
       );
     }
@@ -1487,15 +1487,15 @@ export default class Table extends React.Component<TableProps, object> {
         classPrefix={ns}
         key="columns-toggable"
         size="sm"
-        label={<i className="glyphicon glyphicon-th icon-th" />}
+        label={<Icon icon="columns" className="icon" />}
       >
         {store.toggableColumns.map(column => (
-          <li className={cx('DropDown-menuItem')} key={column.index}>
-            <Checkbox
-              classPrefix={ns}
-              checked={column.toggled}
-              onChange={column.toggleToggle}
-            >
+          <li
+            className={cx('DropDown-menuItem')}
+            key={column.index}
+            onClick={column.toggleToggle}
+          >
+            <Checkbox size="sm" classPrefix={ns} checked={column.toggled}>
               {column.label ? render('tpl', column.label) : null}
             </Checkbox>
           </li>
@@ -1505,14 +1505,7 @@ export default class Table extends React.Component<TableProps, object> {
   }
 
   renderDragToggler() {
-    const {
-      store,
-      env,
-      draggable,
-      classPrefix: ns,
-      dragIcon,
-      translate: __
-    } = this.props;
+    const {store, env, draggable, classPrefix: ns, translate: __} = this.props;
 
     if (!draggable || store.isNested) {
       return null;
@@ -1536,7 +1529,7 @@ export default class Table extends React.Component<TableProps, object> {
         }}
         iconOnly
       >
-        <i className={dragIcon} />
+        <Icon icon="exchange" className="icon" />
       </Button>
     );
   }

src/theme.tsx

@@ -108,6 +108,7 @@ export function getTheme(theme: string): ThemeInstance {
 }
 
 export interface ThemeProps {
+  className?: string;
   classPrefix: string;
   classnames: ClassNamesFn;
 }