Updated react-icons

package-lock.json

@@ -10788,19 +10788,9 @@
       "integrity": "sha1-oXEB2tnBGSZSNWCWhgqatDoHZsc="
     },
     "react-icons": {
-      "version": "2.2.7",
+      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-2.2.7.tgz",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-3.1.0.tgz",
-      "integrity": "sha512-0n4lcGqzJFcIQLoQytLdJCE0DKSA9dkwEZRYoGrIDJZFvIT6Hbajx5mv9geqhqFiNjUgtxg8kPyDfjlhymbGFg==",
+      "integrity": "sha512-kz0Dg1pEY+Ln0zcHYmBfx75pWz4U1kvCGku+QdwZkaIrCK+UQhPd69oLwik0KW5KpNhWHed0aMtAx6DnBhfIxQ=="
-      "requires": {
-        "react-icon-base": "2.1.0"
-      },
-      "dependencies": {
-        "react-icon-base": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/react-icon-base/-/react-icon-base-2.1.0.tgz",
-          "integrity": "sha1-oZbjP98eeqof2jrvu2i9rZ6Cp50="
-        }
-      }
     },
     "react-motion": {
       "version": "0.5.2",

package.json

@@ -49,7 +49,7 @@
     "react-dom": "^16.5.2",
     "react-file-reader-input": "^2.0.0",
     "react-icon-base": "^2.1.2",
-    "react-icons": "^2.2.7",
+    "react-icons": "^3.1.0",
     "react-motion": "^0.5.2",
     "react-sortable-hoc": "^0.8.3",
     "reconnecting-websocket": "^3.2.2",

src/components/Toolbar.jsx

@@ -2,13 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
-import MdFileDownload from 'react-icons/lib/md/file-download'
+import {MdFileDownload, MdOpenInBrowser, MdSettings, MdLayers, MdHelpOutline, MdFindInPage, MdAssignmentTurnedIn} from 'react-icons/md'
-import OpenIcon from 'react-icons/lib/md/open-in-browser'
-import SettingsIcon from 'react-icons/lib/md/settings'
-import SourcesIcon from 'react-icons/lib/md/layers'
-import HelpIcon from 'react-icons/lib/md/help-outline'
-import InspectionIcon from 'react-icons/lib/md/find-in-page'
-import SurveyIcon from 'react-icons/lib/md/assignment-turned-in'
 
 import logoImage from 'maputnik-design/logos/logo-color.svg'
 import pkgJson from '../../package.json'
@@ -132,7 +126,7 @@ export default class Toolbar extends React.Component {
         </div>
         <div className="maputnik-toolbar__actions">
           <ToolbarAction wdKey="nav:open" onClick={this.props.onToggleModal.bind(this, 'open')}>
-            <OpenIcon />
+            <MdOpenInBrowser />
             <IconText>Open</IconText>
           </ToolbarAction>
           <ToolbarAction wdKey="nav:export" onClick={this.props.onToggleModal.bind(this, 'export')}>
@@ -140,26 +134,26 @@ export default class Toolbar extends React.Component {
             <IconText>Export</IconText>
           </ToolbarAction>
           <ToolbarAction wdKey="nav:sources" onClick={this.props.onToggleModal.bind(this, 'sources')}>
-            <SourcesIcon />
+            <MdLayers />
             <IconText>Data Sources</IconText>
           </ToolbarAction>
           <ToolbarAction wdKey="nav:settings" onClick={this.props.onToggleModal.bind(this, 'settings')}>
-            <SettingsIcon />
+            <MdSettings />
             <IconText>Style Settings</IconText>
           </ToolbarAction>
           <ToolbarAction wdKey="nav:inspect" onClick={this.props.onInspectModeToggle}>
-            <InspectionIcon />
+            <MdFindInPage />
             <IconText>
               { this.props.inspectModeEnabled && <span>Map Mode</span> }
               { !this.props.inspectModeEnabled && <span>Inspect Mode</span> }
             </IconText>
           </ToolbarAction>
           <ToolbarLink href={"https://github.com/maputnik/editor/wiki"}>
-            <HelpIcon />
+            <MdHelpOutline />
             <IconText>Help</IconText>
           </ToolbarLink>
           <ToolbarLinkHighlighted href={"https://gregorywolanski.typeform.com/to/cPgaSY"}>
-            <SurveyIcon />
+            <MdAssignmentTurnedIn />
             <IconText>Take the Maputnik Survey</IconText>
           </ToolbarLinkHighlighted>
         </div>

src/components/fields/_DeleteStopButton.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 
 import DocLabel from './DocLabel'
 import Button from '../Button'
-import DeleteIcon from 'react-icons/lib/md/delete'
+import {MdDelete} from 'react-icons/md'
 
 
 export default class DeleteStopButton extends React.Component {
@@ -17,7 +17,7 @@ export default class DeleteStopButton extends React.Component {
       onClick={this.props.onClick}
     >
       <DocLabel
-        label={<DeleteIcon />}
+        label={<MdDelete />}
         doc={"Remove zoom level stop."}
       />
     </Button>

src/components/fields/_FunctionButtons.jsx

@@ -3,8 +3,7 @@ import PropTypes from 'prop-types'
 
 import DocLabel from './DocLabel'
 import Button from '../Button'
-import FunctionIcon from 'react-icons/lib/md/functions'
+import {MdFunctions, MdInsertChart} from 'react-icons/md'
-import MdInsertChart from 'react-icons/lib/md/insert-chart'
 
 
 export default class FunctionButtons extends React.Component {
@@ -22,7 +21,7 @@ export default class FunctionButtons extends React.Component {
         onClick={this.props.onZoomClick}
       >
         <DocLabel
-          label={<FunctionIcon />}
+          label={<MdFunctions />}
           cursorTargetStyle={{ cursor: 'pointer' }}
           doc={"Turn property into a zoom function to enable a map feature to change with map's zoom level."}
         />

src/components/filter/FilterEditorBlock.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import Button from '../Button'
-import DeleteIcon from 'react-icons/lib/md/delete'
+import {MdDelete} from 'react-icons/md'
 
 class FilterEditorBlock extends React.Component {
   static propTypes = {
@@ -16,7 +16,7 @@ class FilterEditorBlock extends React.Component {
           className="maputnik-delete-filter"
           onClick={this.props.onDelete}
         >
-          <DeleteIcon />
+          <MdDelete />
         </Button>
       </div>
       <div className="maputnik-filter-editor-block-content">

src/components/inputs/DynamicArrayInput.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import StringInput from './StringInput'
 import NumberInput from './NumberInput'
 import Button from '../Button'
-import DeleteIcon from 'react-icons/lib/md/delete'
+import {MdDelete} from 'react-icons/md'
 import DocLabel from '../fields/DocLabel'
 
 
@@ -95,7 +95,7 @@ class DeleteValueButton extends React.Component {
       onClick={this.props.onClick}
     >
       <DocLabel
-        label={<DeleteIcon />}
+        label={<MdDelete />}
         doc={"Remove array entry."}
       />
     </Button>

src/components/layers/Collapser.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import CollapseOpenIcon from 'react-icons/lib/md/arrow-drop-down'
+import {MdArrowDropDown, MdArrowDropUp} from 'react-icons/md'
-import CollapseCloseIcon from 'react-icons/lib/md/arrow-drop-up'
 
 export default class Collapser extends React.Component {
   static propTypes = {
@@ -15,7 +14,7 @@ export default class Collapser extends React.Component {
       height: 20,
       ...this.props.style,
     }
-    return this.props.isCollapsed ? <CollapseCloseIcon style={iconStyle}/> : <CollapseOpenIcon style={iconStyle} />
+    return this.props.isCollapsed ? <MdArrowDropUp style={iconStyle}/> : <MdArrowDropDown style={iconStyle} />
   }
 }
 

src/components/layers/LayerEditor.jsx

@@ -14,7 +14,7 @@ import CommentBlock from './CommentBlock'
 import LayerSourceBlock from './LayerSourceBlock'
 import LayerSourceLayerBlock from './LayerSourceLayerBlock'
 
-import MoreVertIcon from 'react-icons/lib/md/more-vert'
+import {MdMoreVert} from 'react-icons/md'
 
 import { changeType, changeProperty } from '../../libs/layer'
 import layout from '../../config/layout.json'
@@ -254,7 +254,7 @@ export default class LayerEditor extends React.Component {
               closeOnSelection={false}
             >
               <Button className='more-menu__button'>
-                <MoreVertIcon className="more-menu__button__svg" />
+                <MdMoreVert className="more-menu__button__svg" />
               </Button>
               <Menu>
                 <ul className="more-menu__menu">

src/components/layers/LayerListItem.jsx

@@ -2,10 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
-import CopyIcon from 'react-icons/lib/md/content-copy'
+import {MdContentCopy, MdVisibility, MdVisibilityOff, MdDelete} from 'react-icons/md'
-import VisibilityIcon from 'react-icons/lib/md/visibility'
-import VisibilityOffIcon from 'react-icons/lib/md/visibility-off'
-import DeleteIcon from 'react-icons/lib/md/delete'
 
 import LayerIcon from '../icons/LayerIcon'
 import {SortableElement, SortableHandle} from 'react-sortable-hoc'
@@ -38,10 +35,10 @@ class IconAction extends React.Component {
 
   renderIcon() {
     switch(this.props.action) {
-      case 'duplicate': return <CopyIcon />
+      case 'duplicate': return <MdContentCopy />
-      case 'show': return <VisibilityIcon />
+      case 'show': return <MdVisibility />
-      case 'hide': return <VisibilityOffIcon />
+      case 'hide': return <MdVisibilityOff />
-      case 'delete': return <DeleteIcon />
+      case 'delete': return <MdDelete />
     }
   }
 

src/components/modals/ExportModal.jsx

@@ -8,8 +8,7 @@ import StringInput from '../inputs/StringInput'
 import CheckboxInput from '../inputs/CheckboxInput'
 import Button from '../Button'
 import Modal from './Modal'
-import MdFileDownload from 'react-icons/lib/md/file-download'
+import {MdFileDownload} from 'react-icons/md'
-import TiClipboard from 'react-icons/lib/ti/clipboard'
 import style from '../../libs/style'
 
 

src/components/modals/Modal.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import CloseIcon from 'react-icons/lib/md/close'
+import {MdClose} from 'react-icons/md'
 import AriaModal from 'react-aria-modal'
 
 
@@ -44,7 +44,7 @@ class Modal extends React.Component {
               onClick={() => this.props.onOpenToggle(false)}
               data-wd-key={this.props["data-wd-key"]+".close-modal"}
             >
-              <CloseIcon />
+              <MdClose />
             </button>
           </header>
           <div className="maputnik-modal-scroller">

src/components/modals/OpenModal.jsx

@@ -5,8 +5,8 @@ import Modal from './Modal'
 import Button from '../Button'
 import FileReaderInput from 'react-file-reader-input'
 
-import FileUploadIcon from 'react-icons/lib/md/file-upload'
+import {MdFileUpload} from 'react-icons/md'
-import AddIcon from 'react-icons/lib/md/add-circle-outline'
+import {MdAddCircleOutline} from 'react-icons/md'
 
 import style from '../../libs/style.js'
 import publicStyles from '../../config/styles.json'
@@ -29,7 +29,7 @@ class PublicStyle extends React.Component {
         <header className="maputnik-public-style-header">
           <h4>{this.props.title}</h4>
           <span className="maputnik-space" />
-          <AddIcon />
+          <MdAddCircleOutline />
         </header>
         <div
           className="maputnik-public-style-thumbnail"
@@ -200,7 +200,7 @@ class OpenModal extends React.Component {
             <h2>Upload Style</h2>
             <p>Upload a JSON style from your computer.</p>
             <FileReaderInput onChange={this.onUpload} tabIndex="-1">
-              <Button className="maputnik-upload-button"><FileUploadIcon /> Upload</Button>
+              <Button className="maputnik-upload-button"><MdFileUpload /> Upload</Button>
             </FileReaderInput>
           </section>
 

src/components/modals/SourcesModal.jsx

@@ -12,8 +12,7 @@ import style from '../../libs/style'
 import { deleteSource, addSource, changeSource } from '../../libs/source'
 import publicSources from '../../config/tilesets.json'
 
-import AddIcon from 'react-icons/lib/md/add-circle-outline'
+import {MdAddCircleOutline, MdDelete} from 'react-icons/md'
-import DeleteIcon from 'react-icons/lib/md/delete'
 
 class PublicSource extends React.Component {
   static propTypes = {
@@ -34,7 +33,7 @@ class PublicSource extends React.Component {
 					<p className="maputnik-public-source-id">#{this.props.id}</p>
 				</div>
 				<span className="maputnik-space" />
-				<AddIcon />
+				<MdAddCircleOutline />
 			</Button>
     </div>
   }
@@ -76,7 +75,7 @@ class ActiveSourceTypeEditor extends React.Component {
           onClick={()=> this.props.onDelete(this.props.sourceId)}
           style={{backgroundColor: 'transparent'}}
         >
-          <DeleteIcon />
+          <MdDelete />
         </Button>
       </div>
       <div className="maputnik-active-source-type-editor-content">