改成 svg icon

scss/components/_spinner.scss

@@ -58,6 +58,13 @@
   }
 
   transition: ease-out all 0.3s;
+
+  &--icon {
+    background: transparent;
+    animation: spin 2s linear infinite;
+    width: auto;
+    height: auto;
+  }
 }
 
 // 当启用 overlay 的时候，应该是居中模式。

scss/components/_status.scss

@@ -34,6 +34,11 @@
     }
   }
 
+  svg.#{$ns}Status-icon {
+    width: 16px;
+    height: 16px;
+  }
+
   .#{$ns}Status-icon {
     &--danger,
     &--primary,

scss/components/_table.scss

@@ -741,4 +741,9 @@
   > .#{$ns}Button--disabled-wrap > .#{$ns}Button {
     margin: px2rem(3px);
   }
+
+  > .#{$ns}Button--link {
+    padding: 0;
+    margin-right: px2rem(10px);
+  }
 }

src/components/Select.tsx

@@ -24,6 +24,7 @@ import Checkbox from './Checkbox';
 import Input from './Input';
 import {Api} from '../types';
 import {LocaleProps, localeable} from '../locale';
+import Spinner from './Spinner';
 
 export interface Option {
   label?: string;
@@ -330,7 +331,6 @@ export class Select extends React.Component<SelectProps, SelectState> {
     placeholder: '请选择',
     valueField: 'value',
     labelField: 'label',
-    spinnerClassName: 'fa fa-spinner fa-spin fa-1x fa-fw',
     inline: false,
     disabled: false,
     checkAll: false,
@@ -871,7 +871,6 @@ export class Select extends React.Component<SelectProps, SelectState> {
       className,
       value,
       loading,
-      spinnerClassName,
       clearable,
       labelField,
       disabled,
@@ -927,9 +926,11 @@ export class Select extends React.Component<SelectProps, SelectState> {
                 </a>
               ) : null}
               {loading ? (
-                <span className={cx('Select-spinner')}>
+                <Spinner
-                  <i className={spinnerClassName} />
+                  show
-                </span>
+                  icon="reload"
+                  spinnerClassName={cx('Select-spinner')}
+                />
               ) : null}
 
               <span className={cx('Select-arrow')} />

src/components/Spinner.tsx

@@ -6,8 +6,9 @@
  */
 
 import React from 'react';
-import {ClassNamesFn, themeable} from '../theme';
+import {themeable, ThemeProps} from '../theme';
 import Transition, {ENTERED, ENTERING} from 'react-transition-group/Transition';
+import {Icon} from './icons';
 
 const fadeStyles: {
   [propName: string]: string;
@@ -16,25 +17,21 @@ const fadeStyles: {
   [ENTERED]: 'in'
 };
 
-interface SpinnerProps {
+interface SpinnerProps extends ThemeProps {
   overlay: boolean;
   spinnerClassName: string;
   mode: string;
   size: 'sm' | 'lg' | '';
-  classPrefix: string;
-  classnames: ClassNamesFn;
   show: boolean;
+  icon?: string;
 }
 
 export class Spinner extends React.Component<SpinnerProps, object> {
-  static defaultProps: Pick<
+  static defaultProps = {
-    SpinnerProps,
-    'overlay' | 'spinnerClassName' | 'size' | 'mode' | 'show'
-  > = {
     overlay: false,
     spinnerClassName: '',
     mode: '',
-    size: '',
+    size: '' as '',
     show: true
   };
 
@@ -48,7 +45,8 @@ export class Spinner extends React.Component<SpinnerProps, object> {
       spinnerClassName,
       mode,
       size,
-      overlay
+      overlay,
+      icon
     } = this.props;
     return (
       <Transition mountOnEnter unmountOnExit in={show} timeout={350}>
@@ -75,9 +73,12 @@ export class Spinner extends React.Component<SpinnerProps, object> {
                 className={cx(`Spinner`, spinnerClassName, fadeStyles[status], {
                   [`Spinner--${mode}`]: mode,
                   [`Spinner--overlay`]: overlay,
-                  [`Spinner--${size}`]: size
+                  [`Spinner--${size}`]: size,
+                  [`Spinner--icon`]: icon
                 })}
-              />
+              >
+                {icon ? <Icon icon={icon} className="icon" /> : null}
+              </div>
             </>
           );
         }}

src/components/icons.tsx

@@ -143,6 +143,7 @@ registerIcon('prev', LeftArrowIcon);
 registerIcon('next', RightArrowIcon);
 registerIcon('check', CheckIcon);
 registerIcon('plus', PlusIcon);
+registerIcon('add', PlusIcon);
 registerIcon('minus', MinusIcon);
 registerIcon('pencil', PencilIcon);
 registerIcon('view', ViewIcon);

src/icons/pencil.svg

@@ -1,4 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" 
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" version="1.1">
-    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" version="1.1" p-id="1463">
+	<g fill="currentColor" fill-rule="nonzero">
-    <path d="M11.496,1.834 L14.168,4.506 C14.48,4.818 14.48,5.322 14.168,5.634 L11.904,7.898 L5.4,14.402 L1.6,14.402 L1.6,10.602 L8.848,3.354 L8.848,3.354 L10.368,1.834 C10.68,1.522 11.184,1.522 11.496,1.834 Z M8.67,4.663 L2.4,10.9333708 L2.4,13.602 L5.06862915,13.602 L11.338,7.331 L8.67,4.663 Z M10.932,2.40137085 L9.23537085,4.098 L11.904,6.76662915 L13.6006292,5.07 L10.932,2.40137085 Z M8,13.6 L12.8,13.6 L12.8,14.4 L8,14.4 L8,13.6 Z" id="path-1"></path>
+		<path d="M11.496,1.834 L14.168,4.506 C14.48,4.818 14.48,5.322 14.168,5.634 L11.904,7.898 L5.4,14.402 L1.6,14.402 L1.6,10.602 L8.848,3.354 L8.848,3.354 L10.368,1.834 C10.68,1.522 11.184,1.522 11.496,1.834 Z M8.67,4.663 L2.4,10.9333708 L2.4,13.602 L5.06862915,13.602 L11.338,7.331 L8.67,4.663 Z M10.932,2.40137085 L9.23537085,4.098 L11.904,6.76662915 L13.6006292,5.07 L10.932,2.40137085 Z M8,13.6 L12.8,13.6 L12.8,14.4 L8,14.4 L8,13.6 Z">
-</svg>
+		</path>
+	</g>
+</svg>

src/renderers/Chart.tsx

@@ -11,6 +11,7 @@ import {resolveVariableAndFilter, isPureVariable} from '../utils/tpl-builtin';
 import {isApiOutdated, isEffectiveApi} from '../utils/api';
 import {ScopedContext, IScopedContext} from '../Scoped';
 import {createObject} from '../utils/helper';
+import Spinner from '../components/Spinner';
 
 export interface ChartProps extends RendererProps {
   chartRef?: (echart: any) => void;
@@ -238,7 +239,11 @@ export class Chart extends React.Component<ChartProps> {
         placeholder={
           <div className={cx(`${ns}Chart`, className)} style={style}>
             <div className={`${ns}Chart-placeholder`}>
-              <i key="loading" className="fa fa-spinner fa-spin fa-2x fa-fw" />
+              <Spinner
+                show
+                icon="reload"
+                spinnerClassName={cx('Chart-spinner')}
+              />
             </div>
           </div>
         }

src/renderers/Form/Table.tsx

@@ -11,6 +11,7 @@ import {dataMapping} from '../../utils/tpl-builtin';
 import findIndex from 'lodash/findIndex';
 import memoize from 'lodash/memoize';
 import {SimpleMap} from '../../utils/SimpleMap';
+import {Icon} from '../../components/icons';
 
 export interface TableProps extends FormControlProps {
   placeholder?: string;
@@ -48,11 +49,11 @@ export default class FormTable extends React.Component<TableProps, TableState> {
   static defaultProps = {
     placeholder: '空',
     scaffold: {},
-    addBtnIcon: 'fa fa-plus',
+    addBtnIcon: 'plus',
-    updateBtnIcon: 'fa fa-pencil',
+    updateBtnIcon: 'pencil',
-    deleteBtnIcon: 'fa fa-minus',
+    deleteBtnIcon: 'minus',
-    confirmBtnIcon: 'fa fa-check',
+    confirmBtnIcon: 'check',
-    cancelBtnIcon: 'fa fa-times',
+    cancelBtnIcon: 'close',
     valueField: ''
   };
 
@@ -376,7 +377,9 @@ export default class FormTable extends React.Component<TableProps, TableState> {
               onClick={this.addItem.bind(this, rowIndex, undefined)}
             >
               {props.addBtnLabel ? <span>{props.addBtnLabel}</span> : null}
-              {props.addBtnIcon ? <i className={props.addBtnIcon} /> : null}
+              {props.addBtnIcon ? (
+                <Icon icon={props.addBtnIcon} className="icon" />
+              ) : null}
             </Button>
           )
       });
@@ -428,7 +431,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
                 <span>{props.updateBtnLabel}</span>
               ) : null}
               {props.updateBtnIcon ? (
-                <i className={props.updateBtnIcon} />
+                <Icon icon={props.updateBtnIcon} className="icon" />
               ) : null}
             </Button>
           )
@@ -452,7 +455,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
                 <span>{props.confirmBtnLabel}</span>
               ) : null}
               {props.confirmBtnIcon ? (
-                <i className={props.confirmBtnIcon} />
+                <Icon icon={props.confirmBtnIcon} className="icon" />
               ) : null}
             </Button>
           ) : null
@@ -476,7 +479,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
                 <span>{props.cancelBtnLabel}</span>
               ) : null}
               {props.cancelBtnIcon ? (
-                <i className={props.cancelBtnIcon} />
+                <Icon icon={props.cancelBtnIcon} className="icon" />
               ) : null}
             </Button>
           ) : null
@@ -510,7 +513,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
                 <span>{props.deleteBtnLabel}</span>
               ) : null}
               {props.deleteBtnIcon ? (
-                <i className={props.deleteBtnIcon} />
+                <Icon icon={props.deleteBtnIcon} className="icon" />
               ) : null}
             </Button>
           )

src/renderers/Form/Text.tsx

@@ -12,6 +12,7 @@ import {Icon} from '../../components/icons';
 import Input from '../../components/Input';
 import {autobind, createObject, setVariable} from '../../utils/helper';
 import {isEffectiveApi} from '../../utils/api';
+import Spinner from '../../components/Spinner';
 
 // declare function matchSorter(items:Array<any>, input:any, options:any): Array<any>;
 
@@ -74,8 +75,7 @@ export default class TextControl extends React.PureComponent<
     labelField: 'label',
     valueField: 'value',
     placeholder: '',
-    allowInputText: true,
+    allowInputText: true
-    spinnerClassName: 'fa fa-spinner fa-spin fa-1x fa-fw'
   };
 
   componentWillReceiveProps(nextProps: TextProps) {
@@ -415,7 +415,6 @@ export default class TextControl extends React.PureComponent<
       labelField,
       valueField,
       multiple,
-      spinnerClassName,
       translate: __
     } = this.props;
 
@@ -523,7 +522,11 @@ export default class TextControl extends React.PureComponent<
                 </a>
               ) : null}
               {loading ? (
-                <i className={cx(`TextControl-spinner`, spinnerClassName)} />
+                <Spinner
+                  show
+                  icon="reload"
+                  spinnerClassName={cx('TextControl-spinner')}
+                />
               ) : null}
               {isOpen && filtedOptions.length ? (
                 <div className={cx('TextControl-sugs')}>

src/renderers/Form/TreeSelect.tsx

@@ -12,6 +12,7 @@ import debouce from 'lodash/debounce';
 import find from 'lodash/find';
 import {Api} from '../../types';
 import {isEffectiveApi} from '../../utils/api';
+import Spinner from '../../components/Spinner';
 
 export interface TreeSelectProps extends OptionsControlProps {
   placeholder?: any;
@@ -39,8 +40,7 @@ export default class TreeSelectControl extends React.Component<
     joinValues: true,
     extractValue: false,
     delimiter: ',',
-    resetValue: '',
+    resetValue: ''
-    spinnerClassName: 'fa fa-spinner fa-spin fa-1x fa-fw'
   };
 
   container: React.RefObject<HTMLDivElement>;
@@ -456,7 +456,6 @@ export default class TreeSelectControl extends React.Component<
     const {
       className,
       disabled,
-      spinnerClassName,
       inline,
       loading,
       multiple,
@@ -521,9 +520,11 @@ export default class TreeSelectControl extends React.Component<
             ) : null}
 
             {loading ? (
-              <span className={cx('TreeSelect-spinner')}>
+              <Spinner
-                <i className={spinnerClassName} />
+                show
-              </span>
+                icon="reload"
+                spinnerClassName={cx('TreeSelect-spinner')}
+              />
             ) : null}
             <span className={cx('TreeSelect-arrow')} />
           </div>

src/renderers/Status.tsx

@@ -4,6 +4,7 @@ import {ServiceStore, IServiceStore} from '../store/service';
 import {Api, SchemaNode, PlainObject} from '../types';
 import {filter} from '../utils/tpl';
 import cx from 'classnames';
+import {Icon} from '../components/icons';
 
 export interface StatusProps extends RendererProps {
   className?: string;
@@ -15,8 +16,8 @@ export class StatusField extends React.Component<StatusProps, object> {
   static defaultProps: Partial<StatusProps> = {
     placeholder: '-',
     map: {
-      0: 'fa fa-times text-danger',
+      0: 'svg-success',
-      1: 'fa fa-check text-success'
+      1: 'svg-fail'
     },
     labelMap: {
       // 0: '失败',
@@ -47,10 +48,25 @@ export class StatusField extends React.Component<StatusProps, object> {
       }
 
       wrapClassName = `StatusField--${value}`;
-      viewValue = (
+      let itemClassName = map[value];
-        <i className={cx('StatusField-icon', map[value])} key="icon" />
+      let svgIcon: string = '';
+
+      itemClassName = itemClassName.replace(
+        /\bsvg-(.*)\b/,
+        (_: string, icon: string) => {
+          svgIcon = icon;
+          return 'icon';
+        }
       );
 
+      if (svgIcon) {
+        viewValue = (
+          <Icon icon={svgIcon} className={cx('Status-icon', itemClassName)} />
+        );
+      } else {
+        viewValue = <i className={cx('Status-icon', map[value])} key="icon" />;
+      }
+
       if (labelMap && labelMap[value]) {
         viewValue = [
           viewValue,

src/renderers/Tasks.tsx

@@ -7,6 +7,7 @@ import {Api, ApiObject, Payload} from '../types';
 import update from 'react-addons-update';
 import {isEffectiveApi, isApiOutdated} from '../utils/api';
 import {ScopedContext, IScopedContext} from '../Scoped';
+import Spinner from '../components/Spinner';
 
 export interface TaskProps extends RendererProps {
   className?: string;
@@ -297,7 +298,11 @@ export default class Task extends React.Component<TaskProps, TaskState> {
                   <td>{item.label}</td>
                   <td>
                     {item.status == loadingStatusCode ? (
-                      <i className="fa fa-spinner fa-spin fa-2x fa-fw" />
+                      <Spinner
+                        show
+                        icon="reload"
+                        spinnerClassName={cx('Task-spinner')}
+                      />
                     ) : item.status == canRetryStatusCode ? (
                       <a
                         onClick={() => this.submitTask(item, key, true)}