react-icons

2025-10-31 16:07:45 +03:00 · 2020-08-08 19:47:01 -04:00 · 2020-08-08 19:47:01 -04:00 · 4717c16b20
commit 4717c16b20
parent 6a2b2a8c7a
20 changed files with 58 additions and 63 deletions
--- a/packages/devui/package.json
+++ b/packages/devui/package.json
@ -64,7 +64,7 @@
    "codemirror": "^5.56.0",
    "color": "^3.1.2",
    "prop-types": "^15.7.2",
-    "react-icons": "^2.2.7",
+    "react-icons": "^3.10.0",
    "react-jsonschema-form": "^1.8.1",
    "react-select": "^1.3.0",
    "redux-devtools-themes": "^1.0.0",
--- a/packages/devui/src/Button/stories/index.js
+++ b/packages/devui/src/Button/stories/index.js
@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { withKnobs, text, boolean, select } from '@storybook/addon-knobs';
-import MdFiberManualRecord from 'react-icons/lib/md/fiber-manual-record';
+import { MdFiberManualRecord } from 'react-icons/md';
 import Button from '../';

 export const Container = styled.div`
--- a/packages/devui/src/Notification/Notification.js
+++ b/packages/devui/src/Notification/Notification.js
@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import CloseIcon from 'react-icons/lib/md/close';
-import WarningIcon from 'react-icons/lib/md/warning';
-import ErrorIcon from 'react-icons/lib/md/error';
-import SuccessIcon from 'react-icons/lib/md/check-circle';
+import { MdClose } from 'react-icons/md';
+import { MdWarning } from 'react-icons/md';
+import { MdError } from 'react-icons/md';
+import { MdCheckCircle } from 'react-icons/md';
 import createStyledComponent from '../utils/createStyledComponent';
 import styles from './styles';

@ -20,11 +20,11 @@ export default class Notification extends Component {
  getIcon = () => {
    switch (this.props.type) {
      case 'warning':
-        return <WarningIcon />;
+        return <MdWarning />;
      case 'error':
-        return <ErrorIcon />;
+        return <MdError />;
      case 'success':
-        return <SuccessIcon />;
+        return <MdCheckCircle />;
      default:
        return null;
    }
@ -37,7 +37,7 @@ export default class Notification extends Component {
        <span>{this.props.children}</span>
        {this.props.onClose && (
          <button onClick={this.props.onClose}>
-            <CloseIcon />
+            <MdClose />
          </button>
        )}
      </NotificationWrapper>
--- a/packages/devui/src/Tabs/TabsHeader.js
+++ b/packages/devui/src/Tabs/TabsHeader.js
@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import observeResize from 'simple-element-resize-detector';
-import CollapseIcon from 'react-icons/lib/fa/angle-double-right';
+import { FaAngleDoubleRight } from 'react-icons/fa';
 import ContextMenu from '../ContextMenu';
 import createStyledComponent from '../utils/createStyledComponent';
 import * as styles from './styles';
@ -186,7 +186,7 @@ export default class TabsHeader extends Component {
          {this.props.collapsible &&
            visibleTabs.length < this.props.items.length && (
              <button onClick={this.expandMenu} value="expandIcon">
-                <CollapseIcon />
+                <FaAngleDoubleRight />
              </button>
            )}
        </div>
--- a/packages/devui/src/Toolbar/stories/index.js
+++ b/packages/devui/src/Toolbar/stories/index.js
@ -9,10 +9,10 @@ import {
  boolean,
  select,
 } from '@storybook/addon-knobs';
-import PlayIcon from 'react-icons/lib/md/play-arrow';
-import RecordIcon from 'react-icons/lib/md/fiber-manual-record';
-import LeftIcon from 'react-icons/lib/md/keyboard-arrow-left';
-import RightIcon from 'react-icons/lib/md/keyboard-arrow-right';
+import { MdPlayArrow } from 'react-icons/md';
+import { MdFiberManualRecord } from 'react-icons/md';
+import { MdKeyboardArrowLeft } from 'react-icons/md';
+import { MdKeyboardArrowRight } from 'react-icons/md';
 import {
  Toolbar,
  Divider,
@ -77,7 +77,7 @@ storiesOf('Toolbar', module)
          disabled={boolean('Disabled', false)}
          onClick={action('button clicked')}
        >
-          <RecordIcon />
+          <MdFiberManualRecord />
        </Button>
        <Divider />
        <Spacer />
@ -151,7 +151,7 @@ storiesOf('Toolbar', module)
            ])}
            onClick={action('button clicked')}
          >
-            <PlayIcon />
+            <MdPlayArrow />
          </Button>
          <Slider
            value={number('value', 80)}
@ -176,7 +176,7 @@ storiesOf('Toolbar', module)
            disabled
            onClick={action('previous state clicked')}
          >
-            <LeftIcon />
+            <MdKeyboardArrowLeft />
          </Button>
          <Button
            title="Next state"
@ -192,7 +192,7 @@ storiesOf('Toolbar', module)
            ])}
            onClick={action('next state clicked')}
          >
-            <RightIcon />
+            <MdKeyboardArrowRight />
          </Button>
          <SegmentedControl
            values={['live', '1x']}
--- a/packages/redux-devtools-core/package.json
+++ b/packages/redux-devtools-core/package.json
@ -74,7 +74,7 @@
    "lodash": "^4.17.19",
    "nanoid": "^3.1.12",
    "prop-types": "^15.7.2",
-    "react-icons": "^2.2.7",
+    "react-icons": "^3.10.0",
    "react-redux": "^6.0.1",
    "redux": "^4.0.5",
    "redux-devtools": "^3.6.0",
--- a/packages/redux-devtools-core/src/app/components/BottomButtons.js
+++ b/packages/redux-devtools-core/src/app/components/BottomButtons.js
@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Button, Toolbar, Divider } from 'devui';
-import SaveIcon from 'react-icons/lib/md/save';
+import { MdSave } from 'react-icons/md';
 import ExportButton from './buttons/ExportButton';
 import ImportButton from './buttons/ImportButton';
 import PrintButton from './buttons/PrintButton';
@ -30,7 +30,7 @@ export default class BottomButtons extends Component {
      <Toolbar borderPosition="top">
        {features.export && (
          <Button title="Save a report" tooltipPosition="top-right">
-            <SaveIcon />
+            <MdSave />
          </Button>
        )}
        {features.export && <ExportButton />}
--- a/packages/redux-devtools-core/src/app/components/Header.js
+++ b/packages/redux-devtools-core/src/app/components/Header.js
@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
 import { Tabs, Toolbar, Button, Divider } from 'devui';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import DocsIcon from 'react-icons/lib/go/book';
-import FeedBackIcon from 'react-icons/lib/io/android-textsms';
-import TwitterIcon from 'react-icons/lib/ti/social-twitter';
-import SupportIcon from 'react-icons/lib/ti/heart-full-outline';
+import { GoBook } from 'react-icons/go';
+import { IoMdText } from 'react-icons/io';
+import { TiSocialTwitter } from 'react-icons/ti';
+import { TiHeartFullOutline } from 'react-icons/ti';
 import { changeSection } from '../actions';

 const tabs = [{ name: 'Actions' }, { name: 'Reports' }, { name: 'Settings' }];
@ -37,7 +37,7 @@ class Header extends Component {
          tooltipPosition="bottom"
          onClick={this.openLink('http://extension.remotedev.io')}
        >
-          <DocsIcon />
+          <GoBook />
        </Button>
        <Button
          title="Feedback"
@ -46,14 +46,14 @@ class Header extends Component {
            'http://extension.remotedev.io/docs/Feedback.html'
          )}
        >
-          <FeedBackIcon />
+          <IoMdText />
        </Button>
        <Button
          title="Follow us"
          tooltipPosition="bottom"
          onClick={this.openLink('https://twitter.com/ReduxDevTools')}
        >
-          <TwitterIcon />
+          <TiSocialTwitter />
        </Button>
        <Button
          title="Support us"
@ -62,7 +62,7 @@ class Header extends Component {
            'https://opencollective.com/redux-devtools-extension'
          )}
        >
-          <SupportIcon />
+          <TiHeartFullOutline />
        </Button>
      </Toolbar>
    );
--- a/packages/redux-devtools-core/src/app/components/buttons/DispatcherButton.js
+++ b/packages/redux-devtools-core/src/app/components/buttons/DispatcherButton.js
@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { Button } from 'devui';
-import DispatchIcon from 'react-icons/lib/fa/terminal';
+import { FaTerminal } from 'react-icons/fa';
 import { toggleDispatcher } from '../../actions';

 class DispatcherButton extends Component {
@ -26,7 +26,7 @@ class DispatcherButton extends Component {
        onClick={this.props.toggleDispatcher}
        tooltipPosition="top-left"
      >
-        <DispatchIcon />
+        <FaTerminal />
      </Button>
    );
  }
--- a/packages/redux-devtools-core/src/app/components/buttons/ExportButton.js
+++ b/packages/redux-devtools-core/src/app/components/buttons/ExportButton.js
@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { Button } from 'devui';
-import DownloadIcon from 'react-icons/lib/ti/download';
+import { TiDownload } from 'react-icons/ti';
 import { exportState } from '../../actions';

 class ExportButton extends Component {
@ -18,7 +18,7 @@ class ExportButton extends Component {
  render() {
    return (
      <Button title="Export to a file" onClick={this.props.exportState}>
-        <DownloadIcon />
+        <TiDownload />
      </Button>
    );
  }
--- a/packages/redux-devtools-core/src/app/components/buttons/ImportButton.js
+++ b/packages/redux-devtools-core/src/app/components/buttons/ImportButton.js
@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { Button } from 'devui';
-import UploadIcon from 'react-icons/lib/ti/upload';
+import { TiUpload } from 'react-icons/ti';
 import { importState } from '../../actions';

 class ImportButton extends Component {
@ -43,7 +43,7 @@ class ImportButton extends Component {
  render() {
    return (
      <Button title="Import from a file" onClick={this.handleImport}>
-        <UploadIcon />
+        <TiUpload />
        <input
          type="file"
          ref={this.mapRef}
--- a/packages/redux-devtools-core/src/app/components/buttons/LockButton.js
+++ b/packages/redux-devtools-core/src/app/components/buttons/LockButton.js
@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { Button } from 'devui';
-import LockIcon from 'react-icons/lib/io/ios-locked';
+import { IoIosLock } from 'react-icons/io';
 import { lockChanges } from '../../actions';

 class LockButton extends Component {
--- a/packages/redux-devtools-core/src/app/components/buttons/PersistButton.js
+++ b/packages/redux-devtools-core/src/app/components/buttons/PersistButton.js
@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { Button } from 'devui';
-import PersistIcon from 'react-icons/lib/fa/thumb-tack';
+import { FaThumbtack } from 'react-icons/fa';
 import { togglePersist } from '../../actions';

 class LockButton extends Component {
@ -31,7 +31,7 @@ class LockButton extends Component {
        }
        onClick={this.props.onClick}
      >
-        <PersistIcon />
+        <FaThumbtack />
      </Button>
    );
  }
--- a/packages/redux-devtools-core/src/app/components/buttons/PrintButton.js
+++ b/packages/redux-devtools-core/src/app/components/buttons/PrintButton.js
@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { Button } from 'devui';
-import PrintIcon from 'react-icons/lib/md/print';
+import { MdPrint } from 'react-icons/md';

 export default class PrintButton extends Component {
  shouldComponentUpdate() {
@ -37,7 +37,7 @@ export default class PrintButton extends Component {
  render() {
    return (
      <Button title="Print" onClick={this.handlePrint}>
-        <PrintIcon />
+        <MdPrint />
      </Button>
    );
  }
--- a/packages/redux-devtools-core/src/app/components/buttons/RecordButton.js
+++ b/packages/redux-devtools-core/src/app/components/buttons/RecordButton.js
@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { Button } from 'devui';
-import RecordIcon from 'react-icons/lib/md/fiber-manual-record';
+import { MdFiberManualRecord } from 'react-icons/md';
 import { pauseRecording } from '../../actions';

 class RecordButton extends Component {
@ -23,7 +23,7 @@ class RecordButton extends Component {
        title={this.props.paused ? 'Start recording' : 'Pause recording'}
        onClick={this.props.pauseRecording}
      >
-        <RecordIcon />
+        <MdFiberManualRecord />
      </Button>
    );
  }
--- a/packages/redux-devtools-core/src/app/components/buttons/SliderButton.js
+++ b/packages/redux-devtools-core/src/app/components/buttons/SliderButton.js
@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { Button } from 'devui';
-import HistoryIcon from 'react-icons/lib/md/av-timer';
+import { MdAvTimer } from 'react-icons/md';
 import { toggleSlider } from '../../actions';

 class SliderButton extends Component {
@ -24,7 +24,7 @@ class SliderButton extends Component {
        tooltipPosition="top-left"
        onClick={this.props.toggleSlider}
      >
-        <HistoryIcon />
+        <MdAvTimer />
      </Button>
    );
  }
--- a/packages/redux-devtools-core/src/app/components/buttons/SyncButton.js
+++ b/packages/redux-devtools-core/src/app/components/buttons/SyncButton.js
@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { Button } from 'devui';
-import SyncIcon from 'react-icons/lib/ti/arrow-sync';
+import { TiArrowSync } from 'react-icons/ti';
 import { toggleSync } from '../../actions';

 class SyncButton extends Component {
@ -24,7 +24,7 @@ class SyncButton extends Component {
        onClick={this.props.onClick}
        mark={this.props.sync && 'base0B'}
      >
-        <SyncIcon />
+        <TiArrowSync />
      </Button>
    );
  }
--- a/packages/redux-devtools-test-generator/package.json
+++ b/packages/redux-devtools-test-generator/package.json
@ -76,7 +76,7 @@
    "object-path": "^0.11.4",
    "prop-types": "^15.7.2",
    "react": "^16.13.1",
-    "react-icons": "^2.2.7",
+    "react-icons": "^3.10.0",
    "simple-diff": "^1.6.0"
  },
  "jest": {
--- a/packages/redux-devtools-test-generator/src/index.js
+++ b/packages/redux-devtools-test-generator/src/index.js
@ -9,8 +9,8 @@ import {
  Dialog,
 } from 'devui';
 import { formSchema, uiSchema, defaultFormData } from './templateForm';
-import AddIcon from 'react-icons/lib/md/add';
-import EditIcon from 'react-icons/lib/md/edit';
+import { MdAdd } from 'react-icons/md';
+import { MdEdit } from 'react-icons/md';
 import TestGenerator from './TestGenerator';
 import jestTemplate from './redux/jest/template';
 import mochaTemplate from './redux/mocha/template';
@ -119,10 +119,10 @@ export default class TestTab extends Component {
            onChange={this.handleSelectTemplate}
          />
          <Button onClick={this.editTemplate}>
-            <EditIcon />
+            <MdEdit />
          </Button>
          <Button onClick={this.addTemplate}>
-            <AddIcon />
+            <MdAdd />
          </Button>
        </Toolbar>
        {!assertion ? (
--- a/yarn.lock
+++ b/yarn.lock
@ -13249,17 +13249,12 @@ react-hot-loader@^3.1.3:
    redbox-react "^1.3.6"
    source-map "^0.6.1"

-react-icon-base@2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/react-icon-base/-/react-icon-base-2.1.0.tgz#a196e33fdf1e7aaa1fda3aefbb68bdad9e82a79d"
-  integrity sha1-oZbjP98eeqof2jrvu2i9rZ6Cp50=
-
-react-icons@^2.2.7:
-  version "2.2.7"
-  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-2.2.7.tgz#d7860826b258557510dac10680abea5ca23cf650"
-  integrity sha512-0n4lcGqzJFcIQLoQytLdJCE0DKSA9dkwEZRYoGrIDJZFvIT6Hbajx5mv9geqhqFiNjUgtxg8kPyDfjlhymbGFg==
+react-icons@^3.10.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-3.10.0.tgz#6c217a2dde2e8fa8d293210023914b123f317297"
+  integrity sha512-WsQ5n1JToG9VixWilSo1bHv842Cj5aZqTGiS3Ud47myF6aK7S/IUY2+dHcBdmkQcCFRuHsJ9OMUI0kTDfjyZXQ==
  dependencies:
-    react-icon-base "2.1.0"
+    camelcase "^5.0.0"

 react-input-autosize@^2.1.2:
  version "2.2.2"