补充 svg icon

examples/components/CRUD/Table.jsx

@@ -179,13 +179,7 @@ export default {
         name: 'platform',
         label: 'Platform(s)',
         popOver: {
-          body: {
+          body: 'Popover 内容：${platform}'
-            type: 'tpl',
-            tpl: '偏了一点的popover'
-          },
-          offset: {
-            y: 100
-          }
         },
         sortable: true,
         type: 'text',

scss/components/_popoverable.scss

@@ -5,6 +5,7 @@
   display: inline-block;
   cursor: pointer;
   opacity: 0.6;
+  vertical-align: middle;
 
   &:hover {
     color: $PopOverAble-onHover-iconColor;

src/components/icons.tsx

@@ -90,6 +90,11 @@ import CaretIcon from '../icons/caret.svg';
 // @ts-ignore
 import ColumnFilterIcon from '../icons/column-filter.svg';
 
+// @ts-ignore
+import ZoomInIcon from '../icons/zoom-in.svg';
+// @ts-ignore
+import ZoomOutIcon from '../icons/zoom-out.svg';
+
 // 兼容原来的用法，后续不直接试用。
 // @ts-ignore
 export const closeIcon = <CloseIcon />;
@@ -161,6 +166,8 @@ registerIcon('copy', CopyIcon);
 registerIcon('filter', FilterIcon);
 registerIcon('column-filter', ColumnFilterIcon);
 registerIcon('caret', CaretIcon);
+registerIcon('zoom-in', ZoomInIcon);
+registerIcon('zoom-out', ZoomOutIcon);
 
 export function Icon({
   icon,

src/icons/zoom-in.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 201 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g id="Zoom-In-(1)" transform="translate(-0.195312, 0.000000)" fill="currentColor" fill-rule="nonzero">
+		<path d="M200.969037,185.426237 L186.577193,199.885458 L132.526927,145.673486 C118.265005,157.063662 100.555788,163.269253 82.3037053,163.2725 C44.3450876,163.501364 11.2373309,137.535745 2.41322763,100.616316 C-6.41087568,63.6968867 11.3773428,25.5666334 45.3369837,8.60633202 C79.2966246,-8.35396931 120.465786,0.331480961 144.679988,29.5647067 C168.894189,58.7979325 169.763336,100.864327 146.777278,131.072772 L200.969037,185.426237 Z M82.3037053,18.6663447 C56.751881,18.5686211 33.6615322,33.8854576 23.8157876,57.4644032 C13.970043,81.0433489 19.3114596,108.232298 37.3456107,126.334087 C55.3797618,144.435876 82.5485248,149.879037 106.164163,140.121629 C129.779801,130.364221 145.182969,107.331373 145.180448,81.7793602 C145.206592,47.004448 117.078472,18.7708318 82.3037053,18.6663447 L82.3037053,18.6663447 Z M91.4198871,118.452958 L73.1605725,118.452958 L73.1605725,90.9427063 L45.7783383,90.9427063 L45.7783383,72.6092764 L73.1605725,72.6092764 L73.1605725,45.1192381 L91.4198871,45.1192381 L91.4198871,72.6092764 L118.822334,72.6092764 L118.822334,90.9427063 L91.4198871,90.9427063 L91.4198871,118.452958 Z" id="形状">
+		</path>
+	</g>
+</svg>

src/icons/zoom-out.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 187 187" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g id="Zoom-In" fill="currentColor" fill-rule="nonzero">
+		<path d="M45.4545455,90.9090908 L118.181818,90.9090908 L118.181818,72.7272727 L45.4545455,72.7272727 L45.4545455,90.9090908 Z M145.709091,132.854546 C157.32865,118.383803 163.653932,100.376636 163.636364,81.8181818 C163.636364,36.6272727 127.009091,0 81.8181818,0 C36.6272727,0 0,36.6272727 0,81.8181818 C0,127.009091 36.6272727,163.636364 81.8181818,163.636364 C101.136364,163.636364 118.854546,156.909091 132.854546,145.709091 L173.827273,186.681818 L186.681818,173.827273 L145.709091,132.854546 Z M81.8181818,145.454546 C46.6727886,145.454546 18.1818182,116.963575 18.1818182,81.8181818 C18.1818182,46.6727886 46.6727886,18.1818182 81.8181818,18.1818182 C116.963575,18.1818182 145.454546,46.6727886 145.454546,81.8181818 C145.454546,116.963575 116.963575,145.454546 81.8181818,145.454546 L81.8181818,145.454546 Z" id="形状">
+		</path>
+	</g>
+</svg>

src/renderers/PopOver.tsx

@@ -11,6 +11,7 @@ import hoistNonReactStatic from 'hoist-non-react-statics';
 import {RootCloseWrapper} from 'react-overlays';
 import PopOver, {Offset} from '../components/PopOver';
 import Overlay from '../components/Overlay';
+import {Icon} from '../components/icons';
 
 export interface PopOverConfig {
   saveImmediately?: boolean;
@@ -212,11 +213,13 @@ export const HocPopOver = (config: Partial<PopOverConfig> = {}) => (
             noHoc
             ref={this.targetRef}
           />
-          <i
+          <span
             key="popover-btn"
-            className={cx('Field-popOverBtn fa fa-search-plus')}
+            className={cx('Field-popOverBtn')}
             onClick={this.openPopOver}
-          />
+          >
+            <Icon icon="zoom-in" className="icon" />
+          </span>
           {this.state.isOpened ? this.renderPopOver() : null}
         </Component>
       );