add button icon

src/Icon.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+export enum ActionType {
+  zoomIn = 1,
+  zoomOut = 2,
+  prev = 3,
+  next = 4,
+  rotateLeft = 5,
+  rotateRight = 6,
+  reset = 7,
+  close = 8,
+}
+
+export interface IconProps {
+  type: ActionType;
+}
+
+export default class Icon extends React.Component<IconProps, any> {
+  render() {
+    let prefixCls = 'react-viewer-icon';
+
+    return (
+      <i className={`${prefixCls} ${prefixCls}-${ActionType[this.props.type]}`}></i>
+    );
+  }
+}

src/ViewerCore.tsx

@@ -2,8 +2,9 @@ import * as React from 'react';
 import './style/index.less';
 import ViewerCavans from './ViewerCavans';
 import ViewerNav from './ViewerNav';
-import ViewerToolbar, { ActionType } from './ViewerToolbar';
+import ViewerToolbar from './ViewerToolbar';
 import ViewerProps, { ImageDecorator } from './ViewerProps';
+import Icon, { ActionType } from './Icon';
 
 function noop() {}
 
@@ -130,6 +131,9 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
       case ActionType.rotateRight:
         this.handleRotate(true);
         break;
+      case ActionType.reset:
+        this.loadImg(this.state.activeIndex);
+        break;
       default:
         break;
     }
@@ -177,7 +181,9 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
     return (
       <div className={this.prefixCls} style={{display: this.props.visible ? 'block' : 'none'}}>
         <div className={`${this.prefixCls}-mask`}></div>
-        <div className={`${this.prefixCls}-close`} onClick={this.handleClose.bind(this)}></div>
+        <div className={`${this.prefixCls}-close ${this.prefixCls}-btn`} onClick={this.handleClose.bind(this)}>
+          <Icon type={ActionType.close}/>
+        </div>
         <ViewerCavans
         prefixCls={this.prefixCls}
         imgSrc={activeImg.src}

src/ViewerToolbar.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import Icon, { ActionType } from './Icon';
 
 export interface ViewerToolbarProps {
   prefixCls: string;
@@ -8,15 +9,6 @@ export interface ViewerToolbarProps {
   height: number;
 }
 
-export enum ActionType {
-  zoomIn = 1,
-  zoomOut = 2,
-  prev = 3,
-  next = 4,
-  rotateLeft = 5,
-  rotateRight = 6,
-}
-
 export default class ViewerToolbar extends React.Component<ViewerToolbarProps, any> {
 
   constructor() {
@@ -34,24 +26,26 @@ export default class ViewerToolbar extends React.Component<ViewerToolbarProps, a
           {`${this.props.alt}(${this.props.width} x ${this.props.height})`}
         </p>
         <ul className={`${this.props.prefixCls}-toolbar`}>
-          <li onClick={() => {this.handleAction(ActionType.zoomIn);}}>
-            <i className={`${this.props.prefixCls}-zoom-in`}></i>
+          <li className={`${this.props.prefixCls}-btn`} onClick={() => {this.handleAction(ActionType.zoomIn);}}>
+            <Icon type={ActionType.zoomIn}/>
           </li>
-          <li onClick={() => {this.handleAction(ActionType.zoomOut);}}>
-            <i className={`${this.props.prefixCls}-zoom-out`}></i>
+          <li className={`${this.props.prefixCls}-btn`} onClick={() => {this.handleAction(ActionType.zoomOut);}}>
+            <Icon type={ActionType.zoomOut}/>
           </li>
-          <li onClick={() => {this.handleAction(ActionType.prev);}}>
-            <i className={`${this.props.prefixCls}-prev`}></i>
+          <li className={`${this.props.prefixCls}-btn`} onClick={() => {this.handleAction(ActionType.prev);}}>
+            <Icon type={ActionType.prev}/>
           </li>
-          <li className="empty"></li>
-          <li onClick={() => {this.handleAction(ActionType.next);}}>
-            <i className={`${this.props.prefixCls}-next`}></i>
+          <li className={`${this.props.prefixCls}-btn`} onClick={() => {this.handleAction(ActionType.reset);}}>
+            <Icon type={ActionType.reset}/>
           </li>
-          <li onClick={() => {this.handleAction(ActionType.rotateLeft);}}>
-            <i className={`${this.props.prefixCls}-rotate-left`}></i>
+          <li className={`${this.props.prefixCls}-btn`} onClick={() => {this.handleAction(ActionType.next);}}>
+            <Icon type={ActionType.next}/>
           </li>
-          <li onClick={() => {this.handleAction(ActionType.rotateRight);}}>
-            <i className={`${this.props.prefixCls}-rotate-right`}></i>
+          <li className={`${this.props.prefixCls}-btn`} onClick={() => {this.handleAction(ActionType.rotateLeft);}}>
+            <Icon type={ActionType.rotateLeft}/>
+          </li>
+          <li className={`${this.props.prefixCls}-btn`} onClick={() => {this.handleAction(ActionType.rotateRight);}}>
+            <Icon type={ActionType.rotateRight}/>
           </li>
         </ul>
       </div>

src/style/fonts/icomoon.svg

@@ -0,0 +1,18 @@
+<?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 xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="icomoon" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#xe967;" glyph-name="rotate-left" d="M761.862-64c113.726 206.032 132.888 520.306-313.862 509.824v-253.824l-384 384 384 384v-248.372c534.962 13.942 594.57-472.214 313.862-775.628z" />
+<glyph unicode="&#xe968;" glyph-name="rotate-right" d="M576 711.628v248.372l384-384-384-384v253.824c-446.75 10.482-427.588-303.792-313.86-509.824-280.712 303.414-221.1 789.57 313.86 775.628z" />
+<glyph unicode="&#xe984;" glyph-name="reset" d="M1024 576h-384l143.53 143.53c-72.53 72.526-168.96 112.47-271.53 112.47s-199-39.944-271.53-112.47c-72.526-72.53-112.47-168.96-112.47-271.53s39.944-199 112.47-271.53c72.53-72.526 168.96-112.47 271.53-112.47s199 39.944 271.528 112.472c6.056 6.054 11.86 12.292 17.456 18.668l96.32-84.282c-93.846-107.166-231.664-174.858-385.304-174.858-282.77 0-512 229.23-512 512s229.23 512 512 512c141.386 0 269.368-57.326 362.016-149.984l149.984 149.984v-384z" />
+<glyph unicode="&#xea0a;" glyph-name="zoom-in" d="M992 576h-352v352c0 17.672-14.328 32-32 32h-192c-17.672 0-32-14.328-32-32v-352h-352c-17.672 0-32-14.328-32-32v-192c0-17.672 14.328-32 32-32h352v-352c0-17.672 14.328-32 32-32h192c17.672 0 32 14.328 32 32v352h352c17.672 0 32 14.328 32 32v192c0 17.672-14.328 32-32 32z" />
+<glyph unicode="&#xea0b;" glyph-name="zoom-out" d="M0 544v-192c0-17.672 14.328-32 32-32h960c17.672 0 32 14.328 32 32v192c0 17.672-14.328 32-32 32h-960c-17.672 0-32-14.328-32-32z" />
+<glyph unicode="&#xea0f;" glyph-name="close" d="M1014.662 137.34c-0.004 0.004-0.008 0.008-0.012 0.010l-310.644 310.65 310.644 310.65c0.004 0.004 0.008 0.006 0.012 0.010 3.344 3.346 5.762 7.254 7.312 11.416 4.246 11.376 1.824 24.682-7.324 33.83l-146.746 146.746c-9.148 9.146-22.45 11.566-33.828 7.32-4.16-1.55-8.070-3.968-11.418-7.31 0-0.004-0.004-0.006-0.008-0.010l-310.648-310.652-310.648 310.65c-0.004 0.004-0.006 0.006-0.010 0.010-3.346 3.342-7.254 5.76-11.414 7.31-11.38 4.248-24.682 1.826-33.83-7.32l-146.748-146.748c-9.148-9.148-11.568-22.452-7.322-33.828 1.552-4.16 3.97-8.072 7.312-11.416 0.004-0.002 0.006-0.006 0.010-0.010l310.65-310.648-310.65-310.652c-0.002-0.004-0.006-0.006-0.008-0.010-3.342-3.346-5.76-7.254-7.314-11.414-4.248-11.376-1.826-24.682 7.322-33.83l146.748-146.746c9.15-9.148 22.452-11.568 33.83-7.322 4.16 1.552 8.070 3.97 11.416 7.312 0.002 0.004 0.006 0.006 0.010 0.010l310.648 310.65 310.648-310.65c0.004-0.002 0.008-0.006 0.012-0.008 3.348-3.344 7.254-5.762 11.414-7.314 11.378-4.246 24.684-1.826 33.828 7.322l146.746 146.748c9.148 9.148 11.57 22.454 7.324 33.83-1.552 4.16-3.97 8.068-7.314 11.414z" />
+<glyph unicode="&#xea34;" glyph-name="next" d="M992 448l-480 480v-288h-512v-384h512v-288z" />
+<glyph unicode="&#xea38;" glyph-name="prev" d="M32 448l480-480v288h512v384h-512v288z" />
+</font></defs></svg>

src/style/index.less

@@ -1,9 +1,23 @@
 @viewer-prefix-cls: react-viewer;
 
+@font-face {
+  font-family: 'icomoon';
+  src:url('fonts/icomoon.eot');
+  src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
+      url('fonts/icomoon.ttf') format('truetype'),
+      url('fonts/icomoon.woff') format('woff'),
+      url('fonts/icomoon.svg') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
 .@{viewer-prefix-cls} {
 
   @zIndex: 1050;
 
+  @btn-background-color: rgba(0, 0, 0, .5);
+  @btn-hover-background-color: rgba(0, 0, 0, .8);
+
   & ul {
     margin: 0;
     padding: 0;
@@ -25,6 +39,14 @@
     filter: alpha(opacity=50);
   }
 
+  &-btn {
+    background-color: @btn-background-color;
+  }
+
+  &-btn:hover{
+    background-color: @btn-hover-background-color;
+  }
+
   &-close {
     position: absolute;
     top: 0px;
@@ -34,10 +56,15 @@
     height: 40px;
     border-radius: 0 0 0 40px;   
     cursor: pointer;
-    background-color: rgba(0, 0, 0, .5);
     z-index: @zIndex;
   }
 
+  &-close > i {
+    position: relative;
+    top: 8px;
+    left: 18px;
+  }
+
   &-cavans {
     position: absolute;
     top: 0;
@@ -86,9 +113,13 @@
     width: @toolbarHeight;
     height: @toolbarHeight;
     border-radius: @toolbarHeight;
-    background-color: rgba(0, 0, 0, .5);
     margin-right: 3px;
     cursor: pointer;
+    line-height: 29px;
+  }
+
+  &-toolbar li:hover {
+    background-color: rgba(0, 0, 0, .8);
   }
 
   li.empty {
@@ -98,7 +129,7 @@
 
   &-navbar {
     overflow: hidden;
-    background-color: rgba(0, 0, 0, .5);
+    background-color: @btn-background-color;
   }
 
   @viewer-list-item-width: 30px;
@@ -134,4 +165,56 @@
   &-transition {
     transition: all .3s ease-out;
   }
+}
+
+@icon-prefix-cls: react-viewer-icon;
+
+.@{icon-prefix-cls} {
+  & {
+    font-family: 'icomoon' !important;
+    display: inline-block;
+    font-style: normal;
+    vertical-align: baseline;
+    text-align: center;
+    text-transform: none;
+    text-rendering: auto;
+    line-height: 1;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    color: white;
+    font-size: 13px;    
+  }
+
+  &-zoomIn:before {
+    content: '\ea0a';
+  }
+
+  &-zoomOut:before {
+    content: '\ea0b';
+  }
+
+  &-prev:before {
+    content: '\ea38';
+  } 
+
+  &-next:before {
+    content: '\ea34';
+  } 
+
+  &-close:before {
+    content: '\ea0f';
+  } 
+
+  &-rotateLeft:before {
+    content: '\e967';
+  }  
+
+  &-rotateRight:before {
+    content: '\e968';
+  } 
+
+  &-reset:before {
+    content: '\e984';
+  }
 }