add iconfont & fix header & finish trouble UI

client/components/CommonComponent/HeaderComponent/HeaderComponent.jsx

 import React from 'react';
 import React from 'react';
 require('./index.css')
 require('./index.css')
+const headerStatus = {
+    1 : 'home',
+    2 : 'other'
+}
 export default class HeaderComponent extends React.Component{
 export default class HeaderComponent extends React.Component{
     constructor(props){
     constructor(props){
         super(props);
         super(props);
+        this.getHomeHeader = this.getHomeHeader.bind(this);
+        this.getOtherHeader = this.getOtherHeader.bind(this);
+        this.state = {
+            showHeader : headerStatus[2]
+        }
     }
     }
 
 
-    render(){
-        return <div className={"headerComponent clearfix"}>
+    getHeader(){
+        let pages = null;
+        switch (this.state.showHeader){
+            case headerStatus[1]:
+                pages = this.getHomeHeader();
+                break;
+            case headerStatus[2]:
+                pages = this.getOtherHeader();
+                break;
+
+        }
+        return pages;
+    }
+
+    getHomeHeader(){
+        return <div className={"homeHeader clearfix"}>
             <div className={"headerContent leftContent fl"}>
             <div className={"headerContent leftContent fl"}>
                 <div className={"headerlogo"}>
                 <div className={"headerlogo"}>
                     <img className={"logoImg"} src={UTILPATH.localImg.headlogo} alt=""/>
                     <img className={"logoImg"} src={UTILPATH.localImg.headlogo} alt=""/>
@@ -29,4 +52,27 @@ export default class HeaderComponent extends React.Component{
             </div>
             </div>
         </div>
         </div>
     }
     }
+
+    getOtherHeader(){
+        return <div className={"otherHeader font32 clearfix"}>
+            <div className={"fl colfff"}>
+                <i className={"iconfont middle icon font60 icon-circle-left circleIcon"}></i>
+                <span className={"middle"}>检查编辑结果</span>
+            </div>
+            <div className={"fr col999"}>
+                <i className={"iconfont middle icon font60 icon-save saveIcon"}></i>
+                <span className={"middle"}>保存</span>
+            </div>
+        </div>
+    }
+
+
+
+
+    render(){
+        let pages = this.getHeader.bind(this)();
+        return <div className={"headerComponent"}>
+            {pages}
+        </div>
+    }
 }
 }
\ No newline at end of file

client/components/CommonComponent/HeaderComponent/index.css

@@ -3,20 +3,26 @@
     width: 100%;
     width: 100%;
     position: relative;
     position: relative;
     background-color: #34343e;
     background-color: #34343e;
+    overflow: hidden;
 
 
 }
 }
-.headerComponent .headerContent{
+.headerComponent .homeHeader{
+    height: 100%;
+    width: 100%;
+    position: relative;
+}
+.headerComponent .homeHeader .headerContent{
     height: 100%;
     height: 100%;
     width: auto;
     width: auto;
     display: flex;
     display: flex;
 }
 }
-.headerComponent .headerlogo{
+.headerComponent .homeHeader .headerlogo{
     width: 440px;
     width: 440px;
     height: 100%;
     height: 100%;
-    background-color: #fff;
+    background-color: #ff7860;
     position: relative;
     position: relative;
 }
 }
-.headerComponent .headerlogo:after{
+.headerComponent .homeHeader .headerlogo:after{
     content : '';
     content : '';
     position: absolute;
     position: absolute;
     width: 0;
     width: 0;
@@ -29,37 +35,62 @@
     top: 0;
     top: 0;
     right: 0;
     right: 0;
 }
 }
-.headerComponent .headerlogo .logoImg{
+.headerComponent .homeHeader .headerlogo .logoImg{
     position: absolute;
     position: absolute;
     top: 50%;
     top: 50%;
     left: 40%;
     left: 40%;
     transform: translate(-50%,-50%);
     transform: translate(-50%,-50%);
 }
 }
-.headerComponent .locationInfo{
+.headerComponent .homeHeader .locationInfo{
     position: relative;
     position: relative;
     padding-top: 16px;
     padding-top: 16px;
 }
 }
-.headerComponent .locationInfo .addIcon{
+.headerComponent .homeHeader .locationInfo .addIcon{
     display:inline-block;
     display:inline-block;
     margin: 0 20px;
     margin: 0 20px;
     vertical-align: middle;
     vertical-align: middle;
 }
 }
-.headerComponent .locationInfo .local {
+.headerComponent .homeHeader .locationInfo .local {
     display: inline-block;
     display: inline-block;
     line-height: 34px;
     line-height: 34px;
     vertical-align: middle;
     vertical-align: middle;
 }
 }
-.headerComponent .rightContent{
+.headerComponent .homeHeader .rightContent{
     padding-right: 59px;
     padding-right: 59px;
 }
 }
-.headerComponent .rightContent  .userheadImg{
+.headerComponent .homeHeader .rightContent  .userheadImg{
     width: 72px;
     width: 72px;
     height: 72px;
     height: 72px;
     border-radius: 50%;
     border-radius: 50%;
     margin-right: 24px;
     margin-right: 24px;
     transform: translate(0,16%);
     transform: translate(0,16%);
 }
 }
-.headerComponent .rightContent  .userinfo{
+.headerComponent .homeHeader .rightContent  .userinfo{
     line-height: 34px;
     line-height: 34px;
     padding-top: 18px;
     padding-top: 18px;
+}
+.otherHeader{
+    /*line-height: 97px;*/
+    padding: 0 30px;
+    line-height: 1.6666667;
+}
+.otherHeader .middle{
+    vertical-align: middle;
+}
+.circleIcon{
+    display: inline-block;
+    margin-right: 30px;
+}
+.iconCircle{
+    display: inline-block;
+    width: 64px;
+    height: 64px;
+    border: 4px solid #fff;
+    border-radius: 50%;
+    line-height: 55px;
+    text-align: center;
+    /* top: 50%; */
+    transform: translateY(-1px);
+    vertical-align: middle ;
+    margin-right: 40px;
 }
 }
\ No newline at end of file

client/components/TroubleComponent/TroubleItemComponent/TroubleItemComponent.jsx

+import React from 'react';
+require('./index.css')
+export default class TroubleItemComponent extends React.Component{
+    constructor(props){
+        super(props)
+        this.state = {
+            text: ''
+        }
+    }
+
+    render(){
+        return (
+            <div className={"troubleItemComponent"}>
+                <div className={"finishBox"}>
+                    <div className={"finishText colfff font24"}>已处理</div>
+                </div>
+                <div className={"itemText font32"}>故障问题1：故障ID-00001</div>
+                <div className={"itemWrongInfo font24 col999"}>
+                    <p>2:3 左侧动作故障，取货动作出错</p>
+                </div>
+                <div className={"jugdeQuestion font32 rel"}>
+                    <span className={"colff7860 font32 star"}>*</span>
+                    <span>是否有此问题</span>
+                    <div className={"questionBox border_e5"}>是</div>
+                    <div className={"questionBox border_e5"}>否</div>
+                </div>
+                <div className={"itemTextArea rel font24"}>
+                    <div className={"itemTextEdit font24 colff7860"}>
+                        <span className={"iconfont font24 icon icon-editor-line colff7860"}></span>
+                        <span> 编辑</span>
+                    </div>
+                    <span className={"colff7860 font32 star"}>*</span>
+                    <div className={"itemTextAreaBox col999 border_e5"}>
+                        {
+                            this.state.text ? <textarea readOnly className={"itemTextAreaBoxs col999"} value={this.state.text}></textarea> :
+                                <span className={"itemPlayceHolder"}>编辑检查结果</span>
+                        }
+
+                    </div>
+                </div>
+
+                <div className={"itemControl rel"}>
+                    <div className={"plusImg controlBox "}>
+                        <img src={UTILPATH.localImg.plusIcon} alt=""/>
+                    </div>
+                    <div className={"refreshImg controlBox "}>
+                        <img src={UTILPATH.localImg.refreshIcon} alt=""/>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}
\ No newline at end of file

client/components/TroubleComponent/TroubleItemComponent/index.css

+.troubleItemComponent{
+    width: 1396px;
+    height: 608px;
+    border: 1px solid #e5e5e5;
+    background-color: #ffffff;
+    border-radius: 20px;
+    overflow: hidden;
+    padding: 42px 45px 0 45px;
+    position: relative;
+}
+.troubleItemComponent .border_e5{
+    border: 2px solid #e5e5e5;
+    border-radius: 10px;
+}
+.troubleItemComponent .border_dashed_e5{
+    border: 2px dashed #e5e5e5;
+    border-radius: 10px;
+}
+
+.troubleItemComponent .rel{
+    position: relative;
+    padding-left: 44px;
+}
+.troubleItemComponent .itemText{
+    font-weight: bold;
+}
+.troubleItemComponent .itemWrongInfo{
+    height: 86px;
+    position: relative;
+}
+.troubleItemComponent .itemWrongInfo>p{
+    line-height: 32px;
+    top: 50%;
+    transform: translateY(-50%);
+    position: absolute;
+}
+.troubleItemComponent .star{
+    display: inline-block;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 0;
+}
+.troubleItemComponent .jugdeQuestion{
+    height: 61px;
+    line-height: 61px;
+    margin-bottom: 30px;
+}
+.troubleItemComponent .jugdeQuestion .questionBox{
+    height: 100%;
+    width: 161px;
+    text-align: center;
+    display: inline-block;
+    margin-left: 30px;
+}
+.troubleItemComponent .jugdeQuestion .questionBox.active{
+    border-color: #26ce61;
+}
+.troubleItemComponent .itemTextArea{
+    height: 198px;
+    margin-bottom: 29px;
+}
+.troubleItemComponent .itemTextAreaBox{
+    width: 1250px;
+    height: 100%;
+    display: inline-block;
+    background-color: #f2f2f2;
+    padding: 20px;
+    overflow: hidden;
+}
+.itemTextAreaBoxs{
+    background-color: #f2f2f2;
+    border: none;
+    resize: none;
+    width: 100%;
+    height: 100%;
+    line-height: 40px;
+    text-align: justify;
+}
+.troubleItemComponent .itemTextArea .itemPlayceHolder{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+}
+.troubleItemComponent .itemTextArea .itemTextEdit{
+    text-align: right;
+    position: absolute;
+    line-height: 57px;
+    top: -57px;
+    right: 46px;
+}
+.troubleItemComponent .itemControl .controlBox{
+    width: 90px;
+    height: 90px;
+    position: relative;
+    display: inline-block;
+    margin-right: 30px;
+}
+.troubleItemComponent .itemControl .controlBox>img{
+    position: absolute;
+    width: 90px;
+    height: 90px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+}
+
+.troubleItemComponent .finishBox{
+    display: none;
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 0;
+    height: 0;
+    border-top: 63px solid #26ce61;
+    border-bottom: 63px solid transparent;
+    border-left: 63px solid transparent;
+    border-right: 63px solid #26ce61;
+}
+.troubleItemComponent .finishBox .finishText{
+    position: absolute;
+    text-align: center;
+    width: 178px;
+    height: 178px;
+    line-height: 126px;
+    left: -89px;
+    top: -89px;
+    transform: rotate(45deg);
+}
+.troubleItemComponent.finish{
+    border: 3px solid #26ce61;
+}
+.troubleItemComponent.finish .finishBox{
+    display: block;
+}
+

client/config/swiperContainer.js

 module.exports = {
 module.exports = {
-    bannerSwiperContainer : 'bannerSwiperContainer',
-    categorySwiperContainer : 'categorySwiperContainer',
-    subSwiperContainer : 'subSwiperContainer',
-    skuListSwiperContainer : 'skuListSwiperContainer',
+    troubleSwiperContainer : 'troubleSwiperContainer',
 }
 }
\ No newline at end of file

client/containers/PageContainer/PageContainer.jsx

@@ -9,14 +9,14 @@ import ReportDamagesListContainer from '../ReportDamagesListContainer/ReportDama
 const showPage = {
 const showPage = {
     1 : 'Trouble',
     1 : 'Trouble',
     2 : 'Scan'
     2 : 'Scan'
-}
+};
 
 
 class PageContainer extends React.Component {
 class PageContainer extends React.Component {
     constructor(props) {
     constructor(props) {
         super(props);
         super(props);
         // UTILPATH.socket.getIp();
         // UTILPATH.socket.getIp();
         this.state = {
         this.state = {
-            showPage : showPage[2],
+            showPage : showPage[1],
             page : null
             page : null
         };
         };
         this.getPages = this.getPages.bind(this);
         this.getPages = this.getPages.bind(this);

client/containers/TroubleContainer/TroubleContainer.jsx

 import React from 'react';
 import React from 'react';
+import SwiperComponent from '../../components/CommonComponent/SwiperComponent/SwiperComponent'
+import TroubleItem from '../../components/TroubleComponent/TroubleItemComponent/TroubleItemComponent'
 require('./index.css')
 require('./index.css')
 export default class TroubleContainer extends   React.Component{
 export default class TroubleContainer extends   React.Component{
     constructor(props){
     constructor(props){
@@ -6,28 +8,33 @@ export default class TroubleContainer extends   React.Component{
     }
     }
 
 
     render(){
     render(){
+        let arr = [1,2,3,4];
+        let dom = arr.map((i,k)=>{
+            return <TroubleItem key={k}/>;
+        });
+        let swiperOptions = {
+            width : 1396,
+            spaceBetween: 30,
+            freeMode:true,
+            // slidesPerView: 2.6,
+        };
+        let swiperContainer = CONFIG.swiperContainers.troubleSwiperContainer;
+        let swiperCount = arr.length;
         return <div className={"troubleContainer"}>
         return <div className={"troubleContainer"}>
-            <div className={"troubleText font32"}><span className={"colff7860"}>*</span>必填项</div>
+            <div className={"troubleText font32"}><span className={"colff7860"}>* </span>必填项</div>
             <div className={"troubleBox"}>
             <div className={"troubleBox"}>
-                <div className={"troubleItemComponent"}>
-                    <div className={"itemText font32"}>故障问题1：故障ID-00001</div>
-                    <div className={"itemWrongInfo font24 col999"}>
-                        <p>2:3 左侧动作故障，取货动作出错2:3 左侧动作故障，取货动作出错2:3 左侧动作故障，取货动作出错2:3 左侧动作故障，取货动作出错</p>
-
-                    </div>
-                    <div className={"jugdeQuestion"}>
-                        <span>*</span>是否有此问题
-                        <span>是</span>
-                        <span>否</span>
-                    </div>
-                    <div className={"itemTextArea"}>
-                            <span className={"itemPlayceHolder"}>编辑检查结果</span>
-                    </div>
-                    <div className={"itemControl"}>
-
-                    </div>
+                <SwiperComponent
+                    swiperContainer={swiperContainer} swiperOptions={swiperOptions} swiperCount={swiperCount}
+                >
+                    {dom}
+                </SwiperComponent>
+            </div>
+            <div className={"troubleBtnBox"}>
+                <div className={"troubleBtn colfff font32"}>
+                    处理完毕
                 </div>
                 </div>
             </div>
             </div>
+
         </div>
         </div>
     }
     }
 }
 }
\ No newline at end of file

client/containers/TroubleContainer/index.css

 .troubleContainer{
 .troubleContainer{
     padding-left: 30px;
     padding-left: 30px;
 }
 }
-.troubleText{
+.troubleContainer .troubleText{
     height: 100px;
     height: 100px;
-    /* line-height: 131px; */
     display: table-cell;
     display: table-cell;
     vertical-align: bottom;
     vertical-align: bottom;
 }
 }
-.troubleBox{
-    margin-top: 20px;
+.troubleContainer .troubleBox{
+    margin: 20px 0;
 }
 }
-.troubleItemComponent{
-    width: 1396px;
-    height: 608px;
-    border: 1px solid #e5e5e5;
-    background-color: #ffffff;
-    border-radius: 20px;
-    overflow: hidden;
-    padding: 42px 45px 0 45px;
+.troubleContainer .troubleBtnBox{
+    height: 80px;
+    width: 100%;
+    text-align: right;
+    padding-right: 30px;
 }
 }
-.troubleItemComponent .itemText{
-    font-weight: bold;
-}
-.troubleItemComponent .itemWrongInfo{
-    height: 86px;
-    position: relative;
-}
-.troubleItemComponent .itemWrongInfo>p{
-    line-height: 32px;
-    top: 50%;
-    transform: translateY(-50%);
+.troubleContainer .troubleBtn{
+    width: 413px;
+    height: 100%;
+    display: inline-block;
+    line-height: 80px;
+    text-align: center;
+    background-color: #ff7860;
+    border-radius: 10px;
 }
 }
\ No newline at end of file

client/css/color.css

@@ -20,4 +20,9 @@
 }
 }
 .col999{
 .col999{
     color: #999999!important;
     color: #999999!important;
-}
+}
\ No newline at end of file
+
+
+.border-green{
+    border-color: #26ce61!important;
+}

client/css/font.css

@@ -134,3 +134,14 @@ body{
 [data-dpr="3"] .font44 {
 [data-dpr="3"] .font44 {
     font-size: calc(var(--font3) * font44) !important;
     font-size: calc(var(--font3) * font44) !important;
 }
 }
+.font60 {
+    font-size: font60 !important;
+}
+
+[data-dpr="2"] .font60 {
+    font-size: calc(var(--font2) * font60) !important;
+}
+
+[data-dpr="3"] .font60 {
+    font-size: calc(var(--font3) * font60) !important;
+}
\ No newline at end of file

client/css/iconfont.css

 
 
+@font-face {font-family: "font_family";
+    src: url(../font/iconfont.eot?t=1531483155508); /* IE9*/
+    src: url(../font/iconfont.eot?t=1531483155508#iefix) format('embedded-opentype'), /* IE6-IE8 */
+    url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
+    url(../font/iconfont.ttf?t=1531483155508) format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+    url(../font/iconfont.svg?t=1531483155508#font_family) format('svg'); /* iOS 4.1- */
+}
 
 
+.iconfont {
+    font-family:"font_family" !important;
+    font-size:16px;
+    font-style:normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-editor-line:before { content: "\e684"; }
+
+.icon-circle-left:before { content: "\e613"; }
+
+.icon-arrow-o-l:before { content: "\e789"; }
+
+.icon-speedup:before { content: "\e617"; }
+
+.icon-address:before { content: "\e618"; }
+
+.icon-save:before { content: "\e619"; }
+
+.icon-plus:before { content: "\e61a"; }
+
+.icon-arrow:before { content: "\e61b"; }
+
+.icon-refresh:before { content: "\e61c"; }

client/font/iconfont.svg

+<?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" >
+<!--
+2013-9-30: Created.
+-->
+<svg>
+<metadata>
+Created by iconfont
+</metadata>
+<defs>
+
+<font id="font_family" horiz-adv-x="1024" >
+  <font-face
+    font-family="font_family"
+    font-weight="500"
+    font-stretch="normal"
+    units-per-em="1024"
+    ascent="896"
+    descent="-128"
+  />
+    <missing-glyph />
+    
+    <glyph glyph-name="x" unicode="x" horiz-adv-x="1001"
+d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5
+t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5
+t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" />
+    
+
+    
+    <glyph glyph-name="editor-line" unicode="&#59012;" d="M823.673 584.686l-144.185 144.175 72.122 72.087c23.899 23.867 62.592 23.867 86.487 0l57.665-57.659c23.901-23.901 23.901-62.655 0-86.549l-72.089-72.053zM404.796 165.828l-144.181 144.176 391.976 388.894 144.183-144.176-391.978-388.894zM144.786 47.589l87.723 234.314 142.973-143.006-230.696-91.308zM792.286-1.689c20.182 0 36.52-16.339 36.52-36.521 0-20.153-16.339-36.494-36.52-36.494l-645.8 0c-20.148 0-36.494 16.341-36.494 36.494 0 20.183 16.345 36.521 36.494 36.521l645.8 0zM792.286-1.689z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="circle-left" unicode="&#58899;" d="M19.407 391.476c0-268.009 217.268-485.268 485.276-485.268 268.001 0 485.26 217.258 485.26 485.268 0 268.008-217.258 485.265-485.26 485.268-268.009 0.001-485.276-217.259-485.276-485.266zM929.291 391.476c0-234.511-190.111-424.607-424.607-424.607-234.501 0-424.608 190.098-424.608 424.607 0 234.501 190.109 424.606 424.608 424.606 234.498 0.001 424.607-190.106 424.608-424.606zM367.124 418.118c-7.281-7.264-13.253-17.223-11.601-26.641-1.653-9.419 4.32-19.38 11.601-26.658l232.226-232.226c11.847-11.83 31.045-11.828 42.892 0 11.847 11.847 11.848 31.054 0 42.902l-215.981 215.982 215.981 215.974c11.847 11.845 11.847 31.052 0 42.9-11.845 11.839-31.043 11.839-42.892 0l-232.226-232.23z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="arrow-o-l" unicode="&#59273;" d="M983.7 583.3C957.9 644.3 921 699 874 746S772.3 829.9 711.3 855.7C648.1 882.5 581.1 896 512 896S375.9 882.5 312.7 855.7C251.7 829.9 197 793 150 746S66.1 644.3 40.3 583.3C13.5 520.1 0 453.1 0 384s13.5-136.1 40.3-199.3C66.1 123.70000000000005 103 69 150 22s101.7-83.9 162.7-109.7c63.2-26.7 130.2-40.3 199.3-40.3s136.1 13.5 199.3 40.3C772.3-61.89999999999998 827-25 874 22s83.9 101.7 109.7 162.7c26.7 63.2 40.3 130.2 40.3 199.3s-13.5 136.1-40.3 199.3z m-66.3-370.6c-22.2-52.4-53.9-99.5-94.3-139.9-40.4-40.4-87.5-72.1-139.9-94.3C629-44.39999999999998 571.4-56 512-56s-117 11.6-171.3 34.6c-52.4 22.2-99.5 53.9-139.9 94.3-40.4 40.4-72.1 87.5-94.3 139.9C83.6 267 72 324.6 72 384s11.6 117 34.6 171.3c22.2 52.4 53.9 99.5 94.3 139.9s87.5 72.1 139.9 94.3C395 812.4 452.6 824 512 824s117-11.6 171.3-34.6c52.4-22.2 99.5-53.9 139.9-94.3 40.4-40.4 72.1-87.5 94.3-139.9C940.4 501 952 443.4 952 384s-11.6-117-34.6-171.3zM623.5 641.5c-14.1 14.1-36.9 14.1-50.9 0l-232-232c-14.1-14.1-14.1-36.9 0-50.9l232-232c7-7 16.2-10.5 25.5-10.5s18.4 3.5 25.5 10.5c14.1 14.1 14.1 36.9 0 50.9L416.9 384l206.5 206.5c14.1 14.1 14.1 36.9 0.1 51z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="speedup" unicode="&#58903;" d="M438.807996 553.175878v-331.299177c0-28.210314 32.682681-43.863598 54.528473-26.146145l205.90089 165.649588c16.685369 13.417101 16.685369 38.875189 0 52.29229l-205.90089 165.649589c-21.845792 17.717453-54.528473 2.064169-54.528473-26.146145z m0 70.181757M666.554678 600.9957999999999v-426.767008c0-28.210314 32.682681-43.863598 54.528473-26.146145l265.073745 213.469512c16.685369 13.417101 16.685369 38.875189 0 52.292289l-264.901731 213.297497c-22.017806 17.545439-54.700487 1.892155-54.700487-26.146145z m0 70.009743"  horiz-adv-x="1448" />
+
+    
+    <glyph glyph-name="address" unicode="&#58904;" d="M920.447505 232.025533L734.328238-11.374433c-14.793214-19.093566-38.703175-19.093566-53.496389 0L494.368554 232.025533c-44.895683 52.29229-73.278011 122.646061-73.278011 197.988242 0 163.757433 128.666555 296.552327 287.607592 296.552326 158.769024 0 287.607593-132.794893 287.607593-296.552326 0-77.40635-28.898371-145.179909-75.858223-197.988242zM708.698135 578.633966c-79.642533 0-144.147825-66.569461-144.147824-148.620191s64.505291-148.620192 144.147824-148.620192 144.147825 66.569461 144.147825 148.620192-64.505291 148.620192-144.147825 148.620191z m0 0"  horiz-adv-x="1448" />
+
+    
+    <glyph glyph-name="save" unicode="&#58905;" d="M1026.236183 614.4129009999999c-7.224593 7.396607-17.029397 11.524945-27.350243 11.524945s-19.953637-3.956325-27.350244-11.352931l-249.764488-252.860742-117.313624 118.689736c-7.224593 7.396607-17.029397 11.352931-27.350243 11.352931s-20.125651-4.128339-27.17823-11.352931c-14.965228-15.137242-14.965228-39.563245 0-54.528473l144.491853-146.384008c7.224593-7.396607 17.029397-11.352931 27.350244-11.352931s20.125651 4.128339 27.178229 11.352931l277.114732 280.555014c7.224593 7.396607 11.008903 17.029397 11.008903 27.17823 0.172014 10.320847-3.78431 19.953637-10.836889 27.178229z m0 0M1004.046363 55.36704199999997H444.140433c-27.006215 0-48.679993 21.845792-48.679993 48.679993V663.952965c0 27.006215 21.845792 48.679993 48.679993 48.679993h351.0808c19.953637 0 36.122963-16.169326 36.122963-36.122963s-16.169326-36.122963-36.122963-36.122963H516.38636c-27.006215 0-48.679993-21.845792-48.679993-48.679994v-415.414076c0-27.006215 21.845792-48.679993 48.679993-48.679994h415.414077c27.006215 0 48.679993 21.845792 48.679993 48.679994V363.44431399999996c0 19.953637 16.169326 36.122963 36.122963 36.122963s36.122963-16.169326 36.122963-36.122963v-259.397279c0-26.834201-21.845792-48.679993-48.679993-48.679993z"  horiz-adv-x="1448" />
+
+    
+    <glyph glyph-name="plus" unicode="&#58906;" d="M566.958508 55.19502799999998c-25.974131 0-46.959852 20.985721-46.959852 46.959852V665.84512c0 25.974131 20.985721 46.959852 46.959852 46.959852 25.974131 0 46.959852-20.985721 46.959852-46.959852v-563.69024c0.172014-25.974131-20.813707-46.959852-46.959852-46.959852z m0 0M895.849488 384.086007c0-25.974131-20.985721-46.959852-46.959853-46.959852H285.199395c-25.974131 0-46.959852 20.985721-46.959852 46.959852 0 25.974131 20.985721 46.959852 46.959852 46.959852h563.69024c25.974131 0 46.959852-20.985721 46.959853-46.959852z m0 0"  horiz-adv-x="1046" />
+
+    
+    <glyph glyph-name="arrow" unicode="&#58907;" d="M948.356129 447.421935L605.48129 72.17548399999998c-10.24-11.56129-25.104516-18.498065-40.629677-18.498065-15.525161 0-30.389677 6.606452-40.629678 18.498065L181.347097 447.421935c-16.846452 17.837419-21.80129 43.602581-13.212903 66.394839 8.588387 22.792258 29.39871 38.647742 53.84258 40.96h685.749678c24.443871-1.981935 45.254194-17.837419 54.172903-40.629677 8.588387-23.122581 3.303226-48.887742-13.543226-66.725162z m0 0"  horiz-adv-x="1129" />
+
+    
+    <glyph glyph-name="refresh" unicode="&#58908;" d="M539.350244 66.89198699999997c-178.034604 0-322.698471 144.835881-322.698472 322.698472 0 177.86259 145.351923 323.0425 323.214514 322.698471 67.085503-0.172014 131.41878-20.641693 185.947253-59.344868L690.894675 603.748026c-45.239711 31.994625-98.736099 48.679993-154.468671 48.163951-140.535528-1.548127-255.612968-114.905426-259.225265-255.440954-3.78431-147.760121 115.249454-269.202083 262.321519-269.202083 135.547119 0 247.528305 103.38048 260.945405 235.487317 1.548127 15.309256 14.621199 26.834201 30.10247 26.834202 18.061482 0 31.82261-15.653284 30.102469-33.542752-17.201411-162.209306-154.640685-289.15572-321.322358-289.15572zM539.350244 62.591634c-180.270788 0-326.998824 146.728036-326.998825 326.998825 0 87.03914 34.058794 169.089871 95.983874 231.01495 61.92508 61.92508 143.975811 95.983874 231.014951 95.983874h0.516042c67.945574-0.172014 133.138922-20.813707 188.527465-60.032925l3.440282-2.408197-39.907273-56.248615-3.440283 2.408198c-43.691584 30.96254-95.295817 47.30388-148.964219 47.30388h-2.92424c-66.741475-0.688056-130.042668-27.178229-178.034605-74.482109-47.991937-47.30388-75.34218-110.089031-77.062321-176.830506-1.892155-70.181757 24.25399-136.40719 73.278011-186.807324 49.024022-50.400134 114.733412-78.094406 184.743155-78.094406 64.161263 0 125.742315 23.909961 173.390223 67.085503 47.30388 43.003528 76.890307 101.316311 83.25483 164.445489 1.720141 17.545439 16.513355 30.790526 34.230808 30.790526 9.804804 0 19.093566-4.128339 25.630102-11.352931 6.536536-7.224593 9.804804-17.201411 8.77272-27.006215-8.256677-79.986561-45.927768-153.780615-105.788678-208.137074-60.376953-54.528473-138.299345-84.630942-219.662019-84.630943z m0 645.568957c-84.802956 0-164.617504-33.198723-224.994457-93.575676-60.376953-60.376953-93.575676-140.1915-93.575676-224.994456 0-175.626407 142.943726-318.398119 318.398118-318.398119 79.126491 0 155.156728 29.414413 213.81354 82.566773 58.312783 52.980346 94.951789 124.882244 103.036452 202.632622 0.688056 7.396607-1.548127 14.793214-6.536536 20.297665-4.988409 5.504452-11.69696 8.600706-19.093566 8.600706-13.417101 0-24.426004-9.804804-25.802117-23.049891-6.70855-65.193348-37.155048-125.570301-86.007055-169.949941-49.196036-44.723669-112.841257-69.321687-179.238703-69.321687-72.417941 0-140.1915 28.726356-190.935663 80.674618-50.572148 51.948261-77.578364 120.581891-75.686209 192.999832 1.720141 68.977658 30.102469 133.998992 79.642533 182.678986 49.540064 48.852007 114.905426 76.030237 183.883085 76.890307 55.216529 0.516042 108.36889-15.48127 153.6086-46.44381l29.930456 42.315471c-53.15236 36.639006-115.249454 55.904586-179.92676 56.0766h-0.516042zM749.379473 689.411053l-90.479423-121.78599c-4.644381-6.192508-0.516042-14.965228 7.224593-15.48127l144.491853-10.148832c7.224593-0.516042 12.385016 6.70855 9.63279 13.4171l-54.012431 131.934823c-2.92424 7.052579-12.385016 8.256677-16.857382 2.064169z"  horiz-adv-x="1024" />
+
+    
+
+
+  </font>
+</defs></svg>

webpack.config.js

@@ -15,13 +15,13 @@ let baseConfig = {
     module : {
     module : {
         rules:[
         rules:[
             {
             {
-                test:/\.(ttf|eot|otf|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-                use:["url-loader?limit=5120"]
-            },
-            {
-                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
-                use: ['url-loader?limit=10000&mimetype=image/svg+xml']
+                test:/\.(ttf|eot|otf|woff|woff2|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+                use:["url-loader?limit=10240"]
             },
             },
+            // {
+            //     test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
+            //     use: ['url-loader?limit=10000&mimetype=image/svg+xml']
+            // },
             {
             {
                 test:/\.(jpg|png|jpeg)$/,
                 test:/\.(jpg|png|jpeg)$/,
                 use:["url-loader?limit=512000&name=[name]-[hash:6].[ext]&mimetype=image/png"] //limit 500kb
                 use:["url-loader?limit=512000&name=[name]-[hash:6].[ext]&mimetype=image/png"] //limit 500kb