react-icons

This commit is contained in:
Nathan Bierema 2020-08-08 19:47:01 -04:00
parent 6a2b2a8c7a
commit 4717c16b20
20 changed files with 58 additions and 63 deletions

View File

@ -64,7 +64,7 @@
"codemirror": "^5.56.0", "codemirror": "^5.56.0",
"color": "^3.1.2", "color": "^3.1.2",
"prop-types": "^15.7.2", "prop-types": "^15.7.2",
"react-icons": "^2.2.7", "react-icons": "^3.10.0",
"react-jsonschema-form": "^1.8.1", "react-jsonschema-form": "^1.8.1",
"react-select": "^1.3.0", "react-select": "^1.3.0",
"redux-devtools-themes": "^1.0.0", "redux-devtools-themes": "^1.0.0",

View File

@ -3,7 +3,7 @@ import styled from 'styled-components';
import { storiesOf } from '@storybook/react'; import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions'; import { action } from '@storybook/addon-actions';
import { withKnobs, text, boolean, select } from '@storybook/addon-knobs'; 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 '../'; import Button from '../';
export const Container = styled.div` export const Container = styled.div`

View File

@ -1,9 +1,9 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import CloseIcon from 'react-icons/lib/md/close'; import { MdClose } from 'react-icons/md';
import WarningIcon from 'react-icons/lib/md/warning'; import { MdWarning } from 'react-icons/md';
import ErrorIcon from 'react-icons/lib/md/error'; import { MdError } from 'react-icons/md';
import SuccessIcon from 'react-icons/lib/md/check-circle'; import { MdCheckCircle } from 'react-icons/md';
import createStyledComponent from '../utils/createStyledComponent'; import createStyledComponent from '../utils/createStyledComponent';
import styles from './styles'; import styles from './styles';
@ -20,11 +20,11 @@ export default class Notification extends Component {
getIcon = () => { getIcon = () => {
switch (this.props.type) { switch (this.props.type) {
case 'warning': case 'warning':
return <WarningIcon />; return <MdWarning />;
case 'error': case 'error':
return <ErrorIcon />; return <MdError />;
case 'success': case 'success':
return <SuccessIcon />; return <MdCheckCircle />;
default: default:
return null; return null;
} }
@ -37,7 +37,7 @@ export default class Notification extends Component {
<span>{this.props.children}</span> <span>{this.props.children}</span>
{this.props.onClose && ( {this.props.onClose && (
<button onClick={this.props.onClose}> <button onClick={this.props.onClose}>
<CloseIcon /> <MdClose />
</button> </button>
)} )}
</NotificationWrapper> </NotificationWrapper>

View File

@ -1,7 +1,7 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import observeResize from 'simple-element-resize-detector'; 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 ContextMenu from '../ContextMenu';
import createStyledComponent from '../utils/createStyledComponent'; import createStyledComponent from '../utils/createStyledComponent';
import * as styles from './styles'; import * as styles from './styles';
@ -186,7 +186,7 @@ export default class TabsHeader extends Component {
{this.props.collapsible && {this.props.collapsible &&
visibleTabs.length < this.props.items.length && ( visibleTabs.length < this.props.items.length && (
<button onClick={this.expandMenu} value="expandIcon"> <button onClick={this.expandMenu} value="expandIcon">
<CollapseIcon /> <FaAngleDoubleRight />
</button> </button>
)} )}
</div> </div>

View File

@ -9,10 +9,10 @@ import {
boolean, boolean,
select, select,
} from '@storybook/addon-knobs'; } from '@storybook/addon-knobs';
import PlayIcon from 'react-icons/lib/md/play-arrow'; import { MdPlayArrow } from 'react-icons/md';
import RecordIcon from 'react-icons/lib/md/fiber-manual-record'; import { MdFiberManualRecord } from 'react-icons/md';
import LeftIcon from 'react-icons/lib/md/keyboard-arrow-left'; import { MdKeyboardArrowLeft } from 'react-icons/md';
import RightIcon from 'react-icons/lib/md/keyboard-arrow-right'; import { MdKeyboardArrowRight } from 'react-icons/md';
import { import {
Toolbar, Toolbar,
Divider, Divider,
@ -77,7 +77,7 @@ storiesOf('Toolbar', module)
disabled={boolean('Disabled', false)} disabled={boolean('Disabled', false)}
onClick={action('button clicked')} onClick={action('button clicked')}
> >
<RecordIcon /> <MdFiberManualRecord />
</Button> </Button>
<Divider /> <Divider />
<Spacer /> <Spacer />
@ -151,7 +151,7 @@ storiesOf('Toolbar', module)
])} ])}
onClick={action('button clicked')} onClick={action('button clicked')}
> >
<PlayIcon /> <MdPlayArrow />
</Button> </Button>
<Slider <Slider
value={number('value', 80)} value={number('value', 80)}
@ -176,7 +176,7 @@ storiesOf('Toolbar', module)
disabled disabled
onClick={action('previous state clicked')} onClick={action('previous state clicked')}
> >
<LeftIcon /> <MdKeyboardArrowLeft />
</Button> </Button>
<Button <Button
title="Next state" title="Next state"
@ -192,7 +192,7 @@ storiesOf('Toolbar', module)
])} ])}
onClick={action('next state clicked')} onClick={action('next state clicked')}
> >
<RightIcon /> <MdKeyboardArrowRight />
</Button> </Button>
<SegmentedControl <SegmentedControl
values={['live', '1x']} values={['live', '1x']}

View File

@ -74,7 +74,7 @@
"lodash": "^4.17.19", "lodash": "^4.17.19",
"nanoid": "^3.1.12", "nanoid": "^3.1.12",
"prop-types": "^15.7.2", "prop-types": "^15.7.2",
"react-icons": "^2.2.7", "react-icons": "^3.10.0",
"react-redux": "^6.0.1", "react-redux": "^6.0.1",
"redux": "^4.0.5", "redux": "^4.0.5",
"redux-devtools": "^3.6.0", "redux-devtools": "^3.6.0",

View File

@ -1,7 +1,7 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Button, Toolbar, Divider } from 'devui'; 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 ExportButton from './buttons/ExportButton';
import ImportButton from './buttons/ImportButton'; import ImportButton from './buttons/ImportButton';
import PrintButton from './buttons/PrintButton'; import PrintButton from './buttons/PrintButton';
@ -30,7 +30,7 @@ export default class BottomButtons extends Component {
<Toolbar borderPosition="top"> <Toolbar borderPosition="top">
{features.export && ( {features.export && (
<Button title="Save a report" tooltipPosition="top-right"> <Button title="Save a report" tooltipPosition="top-right">
<SaveIcon /> <MdSave />
</Button> </Button>
)} )}
{features.export && <ExportButton />} {features.export && <ExportButton />}

View File

@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
import { Tabs, Toolbar, Button, Divider } from 'devui'; import { Tabs, Toolbar, Button, Divider } from 'devui';
import { bindActionCreators } from 'redux'; import { bindActionCreators } from 'redux';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import DocsIcon from 'react-icons/lib/go/book'; import { GoBook } from 'react-icons/go';
import FeedBackIcon from 'react-icons/lib/io/android-textsms'; import { IoMdText } from 'react-icons/io';
import TwitterIcon from 'react-icons/lib/ti/social-twitter'; import { TiSocialTwitter } from 'react-icons/ti';
import SupportIcon from 'react-icons/lib/ti/heart-full-outline'; import { TiHeartFullOutline } from 'react-icons/ti';
import { changeSection } from '../actions'; import { changeSection } from '../actions';
const tabs = [{ name: 'Actions' }, { name: 'Reports' }, { name: 'Settings' }]; const tabs = [{ name: 'Actions' }, { name: 'Reports' }, { name: 'Settings' }];
@ -37,7 +37,7 @@ class Header extends Component {
tooltipPosition="bottom" tooltipPosition="bottom"
onClick={this.openLink('http://extension.remotedev.io')} onClick={this.openLink('http://extension.remotedev.io')}
> >
<DocsIcon /> <GoBook />
</Button> </Button>
<Button <Button
title="Feedback" title="Feedback"
@ -46,14 +46,14 @@ class Header extends Component {
'http://extension.remotedev.io/docs/Feedback.html' 'http://extension.remotedev.io/docs/Feedback.html'
)} )}
> >
<FeedBackIcon /> <IoMdText />
</Button> </Button>
<Button <Button
title="Follow us" title="Follow us"
tooltipPosition="bottom" tooltipPosition="bottom"
onClick={this.openLink('https://twitter.com/ReduxDevTools')} onClick={this.openLink('https://twitter.com/ReduxDevTools')}
> >
<TwitterIcon /> <TiSocialTwitter />
</Button> </Button>
<Button <Button
title="Support us" title="Support us"
@ -62,7 +62,7 @@ class Header extends Component {
'https://opencollective.com/redux-devtools-extension' 'https://opencollective.com/redux-devtools-extension'
)} )}
> >
<SupportIcon /> <TiHeartFullOutline />
</Button> </Button>
</Toolbar> </Toolbar>
); );

View File

@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux'; import { bindActionCreators } from 'redux';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Button } from 'devui'; import { Button } from 'devui';
import DispatchIcon from 'react-icons/lib/fa/terminal'; import { FaTerminal } from 'react-icons/fa';
import { toggleDispatcher } from '../../actions'; import { toggleDispatcher } from '../../actions';
class DispatcherButton extends Component { class DispatcherButton extends Component {
@ -26,7 +26,7 @@ class DispatcherButton extends Component {
onClick={this.props.toggleDispatcher} onClick={this.props.toggleDispatcher}
tooltipPosition="top-left" tooltipPosition="top-left"
> >
<DispatchIcon /> <FaTerminal />
</Button> </Button>
); );
} }

View File

@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux'; import { bindActionCreators } from 'redux';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Button } from 'devui'; import { Button } from 'devui';
import DownloadIcon from 'react-icons/lib/ti/download'; import { TiDownload } from 'react-icons/ti';
import { exportState } from '../../actions'; import { exportState } from '../../actions';
class ExportButton extends Component { class ExportButton extends Component {
@ -18,7 +18,7 @@ class ExportButton extends Component {
render() { render() {
return ( return (
<Button title="Export to a file" onClick={this.props.exportState}> <Button title="Export to a file" onClick={this.props.exportState}>
<DownloadIcon /> <TiDownload />
</Button> </Button>
); );
} }

View File

@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux'; import { bindActionCreators } from 'redux';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Button } from 'devui'; import { Button } from 'devui';
import UploadIcon from 'react-icons/lib/ti/upload'; import { TiUpload } from 'react-icons/ti';
import { importState } from '../../actions'; import { importState } from '../../actions';
class ImportButton extends Component { class ImportButton extends Component {
@ -43,7 +43,7 @@ class ImportButton extends Component {
render() { render() {
return ( return (
<Button title="Import from a file" onClick={this.handleImport}> <Button title="Import from a file" onClick={this.handleImport}>
<UploadIcon /> <TiUpload />
<input <input
type="file" type="file"
ref={this.mapRef} ref={this.mapRef}

View File

@ -2,7 +2,7 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Button } from 'devui'; import { Button } from 'devui';
import LockIcon from 'react-icons/lib/io/ios-locked'; import { IoIosLock } from 'react-icons/io';
import { lockChanges } from '../../actions'; import { lockChanges } from '../../actions';
class LockButton extends Component { class LockButton extends Component {

View File

@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { bindActionCreators } from 'redux'; import { bindActionCreators } from 'redux';
import { Button } from 'devui'; import { Button } from 'devui';
import PersistIcon from 'react-icons/lib/fa/thumb-tack'; import { FaThumbtack } from 'react-icons/fa';
import { togglePersist } from '../../actions'; import { togglePersist } from '../../actions';
class LockButton extends Component { class LockButton extends Component {
@ -31,7 +31,7 @@ class LockButton extends Component {
} }
onClick={this.props.onClick} onClick={this.props.onClick}
> >
<PersistIcon /> <FaThumbtack />
</Button> </Button>
); );
} }

View File

@ -1,6 +1,6 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Button } from 'devui'; import { Button } from 'devui';
import PrintIcon from 'react-icons/lib/md/print'; import { MdPrint } from 'react-icons/md';
export default class PrintButton extends Component { export default class PrintButton extends Component {
shouldComponentUpdate() { shouldComponentUpdate() {
@ -37,7 +37,7 @@ export default class PrintButton extends Component {
render() { render() {
return ( return (
<Button title="Print" onClick={this.handlePrint}> <Button title="Print" onClick={this.handlePrint}>
<PrintIcon /> <MdPrint />
</Button> </Button>
); );
} }

View File

@ -2,7 +2,7 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Button } from 'devui'; import { Button } from 'devui';
import RecordIcon from 'react-icons/lib/md/fiber-manual-record'; import { MdFiberManualRecord } from 'react-icons/md';
import { pauseRecording } from '../../actions'; import { pauseRecording } from '../../actions';
class RecordButton extends Component { class RecordButton extends Component {
@ -23,7 +23,7 @@ class RecordButton extends Component {
title={this.props.paused ? 'Start recording' : 'Pause recording'} title={this.props.paused ? 'Start recording' : 'Pause recording'}
onClick={this.props.pauseRecording} onClick={this.props.pauseRecording}
> >
<RecordIcon /> <MdFiberManualRecord />
</Button> </Button>
); );
} }

View File

@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux'; import { bindActionCreators } from 'redux';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Button } from 'devui'; import { Button } from 'devui';
import HistoryIcon from 'react-icons/lib/md/av-timer'; import { MdAvTimer } from 'react-icons/md';
import { toggleSlider } from '../../actions'; import { toggleSlider } from '../../actions';
class SliderButton extends Component { class SliderButton extends Component {
@ -24,7 +24,7 @@ class SliderButton extends Component {
tooltipPosition="top-left" tooltipPosition="top-left"
onClick={this.props.toggleSlider} onClick={this.props.toggleSlider}
> >
<HistoryIcon /> <MdAvTimer />
</Button> </Button>
); );
} }

View File

@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux'; import { bindActionCreators } from 'redux';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Button } from 'devui'; import { Button } from 'devui';
import SyncIcon from 'react-icons/lib/ti/arrow-sync'; import { TiArrowSync } from 'react-icons/ti';
import { toggleSync } from '../../actions'; import { toggleSync } from '../../actions';
class SyncButton extends Component { class SyncButton extends Component {
@ -24,7 +24,7 @@ class SyncButton extends Component {
onClick={this.props.onClick} onClick={this.props.onClick}
mark={this.props.sync && 'base0B'} mark={this.props.sync && 'base0B'}
> >
<SyncIcon /> <TiArrowSync />
</Button> </Button>
); );
} }

View File

@ -76,7 +76,7 @@
"object-path": "^0.11.4", "object-path": "^0.11.4",
"prop-types": "^15.7.2", "prop-types": "^15.7.2",
"react": "^16.13.1", "react": "^16.13.1",
"react-icons": "^2.2.7", "react-icons": "^3.10.0",
"simple-diff": "^1.6.0" "simple-diff": "^1.6.0"
}, },
"jest": { "jest": {

View File

@ -9,8 +9,8 @@ import {
Dialog, Dialog,
} from 'devui'; } from 'devui';
import { formSchema, uiSchema, defaultFormData } from './templateForm'; import { formSchema, uiSchema, defaultFormData } from './templateForm';
import AddIcon from 'react-icons/lib/md/add'; import { MdAdd } from 'react-icons/md';
import EditIcon from 'react-icons/lib/md/edit'; import { MdEdit } from 'react-icons/md';
import TestGenerator from './TestGenerator'; import TestGenerator from './TestGenerator';
import jestTemplate from './redux/jest/template'; import jestTemplate from './redux/jest/template';
import mochaTemplate from './redux/mocha/template'; import mochaTemplate from './redux/mocha/template';
@ -119,10 +119,10 @@ export default class TestTab extends Component {
onChange={this.handleSelectTemplate} onChange={this.handleSelectTemplate}
/> />
<Button onClick={this.editTemplate}> <Button onClick={this.editTemplate}>
<EditIcon /> <MdEdit />
</Button> </Button>
<Button onClick={this.addTemplate}> <Button onClick={this.addTemplate}>
<AddIcon /> <MdAdd />
</Button> </Button>
</Toolbar> </Toolbar>
{!assertion ? ( {!assertion ? (

View File

@ -13249,17 +13249,12 @@ react-hot-loader@^3.1.3:
redbox-react "^1.3.6" redbox-react "^1.3.6"
source-map "^0.6.1" source-map "^0.6.1"
react-icon-base@2.1.0: react-icons@^3.10.0:
version "2.1.0" version "3.10.0"
resolved "https://registry.yarnpkg.com/react-icon-base/-/react-icon-base-2.1.0.tgz#a196e33fdf1e7aaa1fda3aefbb68bdad9e82a79d" resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-3.10.0.tgz#6c217a2dde2e8fa8d293210023914b123f317297"
integrity sha1-oZbjP98eeqof2jrvu2i9rZ6Cp50= integrity sha512-WsQ5n1JToG9VixWilSo1bHv842Cj5aZqTGiS3Ud47myF6aK7S/IUY2+dHcBdmkQcCFRuHsJ9OMUI0kTDfjyZXQ==
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==
dependencies: dependencies:
react-icon-base "2.1.0" camelcase "^5.0.0"
react-input-autosize@^2.1.2: react-input-autosize@^2.1.2:
version "2.2.2" version "2.2.2"