Skip to content

Commit 8bf4008

Browse files
catarakcatarak
committed
Migrate from React-InlineSVG to SVGR
1 parent 504cdc3 commit 8bf4008

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+1345
-352
lines changed

‎client/components/AddRemoveButton.jsx

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import InlineSVG from 'react-inlinesvg';
43

5-
const addIcon = require('../images/plus.svg');
6-
const removeIcon = require('../images/minus.svg');
4+
import AddIcon from '../images/plus.svg';
5+
import RemoveIcon from '../images/minus.svg';
76

87
const AddRemoveButton = ({ type, onClick }) => {
9-
const alt = type === 'add' ? 'add to collection' : 'remove from collection';
10-
const icon = type === 'add' ? addIcon : removeIcon;
8+
const alt = type === 'add' ? 'Add to collection' : 'Remove from collection';
9+
const Icon = type === 'add' ? AddIcon : RemoveIcon;
1110

1211
return (
13-
<button className="overlay__close-button" onClick={onClick}>
14-
<InlineSVG src={icon} alt={alt} />
12+
<button
13+
className="overlay__close-button"
14+
onClick={onClick}
15+
aria-label={alt}
16+
>
17+
<Icon focusable="false" aria-hidden="true" />
1518
</button>
1619
);
1720
};

‎client/components/Nav.jsx

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import React from 'react';
33
import { connect } from 'react-redux';
44
import { withRouter } from 'react-router';
55
import { Link } from 'react-router';
6-
import InlineSVG from 'react-inlinesvg';
76
import classNames from 'classnames';
87
import * as IDEActions from '../modules/IDE/actions/ide';
98
import * as toastActions from '../modules/IDE/actions/toast';
@@ -12,10 +11,10 @@ import { setAllAccessibleOutput } from '../modules/IDE/actions/preferences';
1211
import { logoutUser } from '../modules/User/actions';
1312

1413
import { metaKeyName, } from '../utils/metaKey';
15-
import caretLeft from '../images/left-arrow.svg';
1614

17-
const triangleUrl = require('../images/down-filled-triangle.svg');
18-
const logoUrl = require('../images/p5js-logo-small.svg');
15+
import CaretLeftIcon from '../images/left-arrow.svg';
16+
import TriangleIcon from '../images/down-filled-triangle.svg';
17+
import LogoIcon from '../images/p5js-logo-small.svg';
1918

2019
const __process = (typeof global !== 'undefined' ? global : window).process;
2120

@@ -229,11 +228,11 @@ class Nav extends React.PureComponent {
229228
return (
230229
<ul className="nav__items-left">
231230
<li className="nav__item-logo">
232-
<InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
231+
<LogoIcon title="p5.js Logo" className="svg__logo" />
233232
</li>
234233
<li className="nav__item nav__item--no-icon">
235234
<Link to="/" className="nav__back-link">
236-
<InlineSVG src={caretLeft} className="nav__back-icon" />
235+
<CaretLeftIcon className="nav__back-icon" />
237236
<span className="nav__item-header">
238237
Back to Editor
239238
</span>
@@ -247,7 +246,7 @@ class Nav extends React.PureComponent {
247246
return (
248247
<ul className="nav__items-left">
249248
<li className="nav__item-logo">
250-
<InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
249+
<LogoIcon title="p5.js Logo" className="svg__logo" />
251250
</li>
252251
<li className={navDropdownState.file}>
253252
<button
@@ -261,7 +260,7 @@ class Nav extends React.PureComponent {
261260
}}
262261
>
263262
<span className="nav__item-header">File</span>
264-
<InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
263+
<TriangleIcon className="nav__item-header-triangle" />
265264
</button>
266265
<ul className="nav__dropdown">
267266
<li className="nav__dropdown-item">
@@ -363,7 +362,7 @@ class Nav extends React.PureComponent {
363362
}}
364363
>
365364
<span className="nav__item-header">Edit</span>
366-
<InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
365+
<TriangleIcon className="nav__item-header-triangle" />
367366
</button>
368367
<ul className="nav__dropdown" >
369368
<li className="nav__dropdown-item">
@@ -423,7 +422,7 @@ class Nav extends React.PureComponent {
423422
}}
424423
>
425424
<span className="nav__item-header">Sketch</span>
426-
<InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
425+
<TriangleIcon className="nav__item-header-triangle" />
427426
</button>
428427
<ul className="nav__dropdown">
429428
<li className="nav__dropdown-item">
@@ -498,7 +497,7 @@ class Nav extends React.PureComponent {
498497
}}
499498
>
500499
<span className="nav__item-header">Help</span>
501-
<InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
500+
<TriangleIcon className="nav__item-header-triangle" />
502501
</button>
503502
<ul className="nav__dropdown">
504503
<li className="nav__dropdown-item">
@@ -575,7 +574,7 @@ class Nav extends React.PureComponent {
575574
}}
576575
>
577576
My Account
578-
<InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
577+
<TriangleIcon className="nav__item-header-triangle" />
579578
</button>
580579
<ul className="nav__dropdown">
581580
<li className="nav__dropdown-item">

‎client/components/NavBasic.jsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import PropTypes from 'prop-types';
22
import React from 'react';
3-
import InlineSVG from 'react-inlinesvg';
43

5-
const logoUrl = require('../images/p5js-logo-small.svg');
6-
const arrowUrl = require('../images/triangle-arrow-left.svg');
4+
import LogoIcon from '../images/p5js-logo-small.svg';
5+
import ArrowIcon from '../images/triangle-arrow-left.svg';
76

87
class NavBasic extends React.PureComponent {
98
static defaultProps = {
@@ -15,13 +14,13 @@ class NavBasic extends React.PureComponent {
1514
<nav className="nav" title="main-navigation" ref={(node) => { this.node = node; }}>
1615
<ul className="nav__items-left">
1716
<li className="nav__item-logo">
18-
<InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
17+
<LogoIcon title="p5.js Logo" className="svg__logo" />
1918
</li>
2019
{ this.props.onBack && (
2120
<li className="nav__item">
2221
<button onClick={this.props.onBack}>
2322
<span className="nav__item-header">
24-
<InlineSVG src={arrowUrl} alt="Left arrow" />
23+
<ArrowIcon title="Left arrow" />
2524
</span>
2625
Back to the editor
2726
</button>

‎client/components/PreviewNav.jsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,23 @@
11
import PropTypes from 'prop-types';
22
import React from 'react';
33
import { Link } from 'react-router';
4-
import InlineSVG from 'react-inlinesvg';
54

6-
const logoUrl = require('../images/p5js-logo-small.svg');
7-
const editorUrl = require('../images/code.svg');
5+
import LogoIcon from '../images/p5js-logo-small.svg';
6+
import CodeIcon from '../images/code.svg';
87

98
const PreviewNav = ({ owner, project }) => (
109
<nav className="nav preview-nav">
1110
<div className="nav__items-left">
1211
<div className="nav__item-logo">
13-
<InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
12+
<LogoIcon title="p5.js Logo" className="svg__logo" />
1413
</div>
1514
<Link className="nav__item" to={`/${owner.username}/sketches/${project.id}`}>{project.name}</Link>
1615
<p className="toolbar__project-owner">by</p>
1716
<Link className="nav__item" to={`/${owner.username}/sketches/`}>{owner.username}</Link>
1817
</div>
1918
<div className="nav__items-right">
2019
<Link to={`/${owner.username}/sketches/${project.id}`}>
21-
<InlineSVG className="preview-nav__editor-svg" src={editorUrl} />
20+
<CodeIcon className="preview-nav__editor-svg" />
2221
</Link>
2322
</div>
2423
</nav>

‎client/modules/App/components/Overlay.jsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import PropTypes from 'prop-types';
22
import React from 'react';
3-
import InlineSVG from 'react-inlinesvg';
43
import { browserHistory } from 'react-router';
54

6-
const exitUrl = require('../../../images/exit.svg');
5+
import ExitIcon from '../../../images/exit.svg';
76

87
class Overlay extends React.Component {
98
constructor(props) {
@@ -82,7 +81,7 @@ class Overlay extends React.Component {
8281
<div className="overlay__actions">
8382
{actions}
8483
<button className="overlay__close-button" onClick={this.close} >
85-
<InlineSVG src={exitUrl} alt="close overlay" />
84+
<ExitIcon title="close overlay" />
8685
</button>
8786
</div>
8887
</header>

‎client/modules/IDE/components/About.jsx

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import React from 'react';
2-
import InlineSVG from 'react-inlinesvg';
32
import { Helmet } from 'react-helmet';
43

5-
const squareLogoUrl = require('../../../images/p5js-square-logo.svg');
6-
// const playUrl = require('../../../images/play.svg');
7-
const asteriskUrl = require('../../../images/p5-asterisk.svg');
4+
import SquareLogoIcon from '../../../images/p5js-square-logo.svg';
5+
// import PlayIcon from '../../../images/play.svg';
6+
import AsteriskIcon from '../../../images/p5-asterisk.svg';
87

98
function About(props) {
109
return (
@@ -13,15 +12,15 @@ function About(props) {
1312
<title>p5.js Web Editor | About</title>
1413
</Helmet>
1514
<div className="about__content-column">
16-
<InlineSVG className="about__logo" src={squareLogoUrl} alt="p5js Square Logo" />
15+
<SquareLogoIcon className="about__logo" title="p5.js Square Logo" />
1716
{/* Video button to hello p5 video page */}
1817
{/* <p className="about__play-video">
1918
<a
2019
href="http://hello.p5js.org/"
2120
target="_blank"
2221
rel="noopener noreferrer"
2322
>
24-
<InlineSVG className="about__play-video-button" src={playUrl} alt="Play Hello Video" />
23+
<PlayIcon className="about__play-video-button" title="Play Hello Video" />
2524
Play hello! video</a>
2625
</p> */}
2726
</div>
@@ -33,7 +32,7 @@ function About(props) {
3332
target="_blank"
3433
rel="noopener noreferrer"
3534
>
36-
<InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
35+
<AsteriskIcon className="about__content-column-asterisk" title="p5 asterisk" />
3736
Examples
3837
</a>
3938
</p>
@@ -43,7 +42,7 @@ function About(props) {
4342
target="_blank"
4443
rel="noopener noreferrer"
4544
>
46-
<InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
45+
<AsteriskIcon className="about__content-column-asterisk" title="p5 asterisk" />
4746
Learn
4847
</a>
4948
</p>
@@ -56,7 +55,7 @@ function About(props) {
5655
target="_blank"
5756
rel="noopener noreferrer"
5857
>
59-
<InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
58+
<AsteriskIcon className="about__content-column-asterisk" title="p5 asterisk" />
6059
Libraries
6160
</a>
6261
</p>
@@ -66,7 +65,7 @@ function About(props) {
6665
target="_blank"
6766
rel="noopener noreferrer"
6867
>
69-
<InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
68+
<AsteriskIcon className="about__content-column-asterisk" title="p5 asterisk" />
7069
Reference
7170
</a>
7271
</p>
@@ -76,7 +75,7 @@ function About(props) {
7675
target="_blank"
7776
rel="noopener noreferrer"
7877
>
79-
<InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
78+
<AsteriskIcon className="about__content-column-asterisk" title="p5 asterisk" />
8079
Forum
8180
</a>
8281
</p>

‎client/modules/IDE/components/AssetList.jsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,10 @@ import { bindActionCreators } from 'redux';
55
import { Link } from 'react-router';
66
import { Helmet } from 'react-helmet';
77
import prettyBytes from 'pretty-bytes';
8-
import InlineSVG from 'react-inlinesvg';
98

109
import Loader from '../../App/components/loader';
1110
import * as AssetActions from '../actions/assets';
12-
import downFilledTriangle from '../../../images/down-filled-triangle.svg';
11+
import DownFilledTriangleIcon from '../../../images/down-filled-triangle.svg';
1312

1413
class AssetListRowBase extends React.Component {
1514
constructor(props) {
@@ -87,7 +86,7 @@ class AssetListRowBase extends React.Component {
8786
onBlur={this.onBlurComponent}
8887
onFocus={this.onFocusComponent}
8988
>
90-
<InlineSVG src={downFilledTriangle} alt="Menu" />
89+
<DownFilledTriangleIcon title="Menu" />
9190
</button>
9291
{optionsOpen &&
9392
<ul

‎client/modules/IDE/components/CollectionList/CollectionList.jsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import PropTypes from 'prop-types';
22
import React from 'react';
33
import { Helmet } from 'react-helmet';
4-
import InlineSVG from 'react-inlinesvg';
54
import { connect } from 'react-redux';
65
import { bindActionCreators } from 'redux';
76
import classNames from 'classnames';
@@ -19,8 +18,8 @@ import { SketchSearchbar } from '../Searchbar';
1918

2019
import CollectionListRow from './CollectionListRow';
2120

22-
const arrowUp = require('../../../../images/sort-arrow-up.svg');
23-
const arrowDown = require('../../../../images/sort-arrow-down.svg');
21+
import ArrowUpIcon from '../../../../images/sort-arrow-up.svg';
22+
import ArrowDownIcon from '../../../../images/sort-arrow-down.svg';
2423

2524
class CollectionList extends React.Component {
2625
constructor(props) {
@@ -94,10 +93,10 @@ class CollectionList extends React.Component {
9493
<button className="sketch-list__sort-button" onClick={() => this.props.toggleDirectionForField(fieldName)}>
9594
<span className={headerClass}>{displayName}</span>
9695
{field === fieldName && direction === SortingActions.DIRECTION.ASC &&
97-
<InlineSVG src={arrowUp} />
96+
<ArrowUpIcon />
9897
}
9998
{field === fieldName && direction === SortingActions.DIRECTION.DESC &&
100-
<InlineSVG src={arrowDown} />
99+
<ArrowDownIcon />
101100
}
102101
</button>
103102
</th>

‎client/modules/IDE/components/CollectionList/CollectionListRow.jsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import format from 'date-fns/format';
22
import PropTypes from 'prop-types';
33
import React from 'react';
4-
import InlineSVG from 'react-inlinesvg';
54
import { connect } from 'react-redux';
65
import { Link } from 'react-router';
76
import { bindActionCreators } from 'redux';
@@ -10,7 +9,7 @@ import * as CollectionsActions from '../../actions/collections';
109
import * as IdeActions from '../../actions/ide';
1110
import * as ToastActions from '../../actions/toast';
1211

13-
const downFilledTriangle = require('../../../../images/down-filled-triangle.svg');
12+
import DownFilledTriangleIcon from '../../../../images/down-filled-triangle.svg';
1413

1514
class CollectionListRowBase extends React.Component {
1615
static projectInCollection(project, collection) {
@@ -130,7 +129,7 @@ class CollectionListRowBase extends React.Component {
130129
onBlur={this.onBlurComponent}
131130
onFocus={this.onFocusComponent}
132131
>
133-
<InlineSVG src={downFilledTriangle} alt="Menu" />
132+
<DownFilledTriangleIcon title="Menu" />
134133
</button>
135134
{optionsOpen &&
136135
<ul

0 commit comments

Comments
 (0)