Reduce bundle size after the fontawesome icons changes (#707)

* Use our own AwesomeIcon component instead of FontAwesomeIcon, this reduces minified build by 66 kB

* Remove @fortawesome/react-fontawesome dependency

* Replace classNames dependency by clsx

package.json

@@ -25,9 +25,8 @@
   "license": "MIT",
   "dependencies": {
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
-    "@fortawesome/react-fontawesome": "^0.2.0",
-    "classnames": "^2.3.2",
     "clipboard-copy": "^4.0.1",
+    "clsx": "^2.1.0",
     "lodash.debounce": "^4.0.8",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",

src/components/AwesomeIcon.js

@@ -0,0 +1,53 @@
+/*
+  Use <AwesomeIcon icon={faEye} /> instead of <FontAwesomeIcon icon={faEye} /> from @fortawesome/react-fontawesome
+  Using FontAwesomeIcon component adds 66 kB minified to the bundle.
+  Our AwesomeIcon does the same but less than 2 kB minified.
+  svg-inline--fa class has been added to lib.styl
+*/
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function asIcon(icon) {
+  const width = icon[0];
+  const height = icon[1];
+  const vectorData = icon[4];
+  let element;
+
+  if (Array.isArray(vectorData)) {
+    element = (
+      <g>
+        {vectorData.map((pathData, index) => (
+          <path key={index} fill="currentColor" d={pathData} />
+        ))}
+      </g>
+    );
+  } else {
+    element = <path fill="currentColor" d={vectorData} />;
+  }
+
+  return {
+    width: width,
+    height: height,
+    icon: element
+  };
+}
+
+export class AwesomeIcon extends React.Component {
+  static propTypes = {
+    icon: PropTypes.object.isRequired
+  };
+
+  render() {
+    const { width, height, icon } = asIcon(this.props.icon.icon);
+    return (
+      <svg
+        role="img"
+        className={`svg-inline--fa fa-${this.props.icon.iconName}`}
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox={`0 0 ${width} ${height}`}
+      >
+        {icon}
+      </svg>
+    );
+  }
+}

src/components/Collapsible.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 export default class Collapsible extends React.Component {
   static propTypes = {
@@ -37,9 +37,9 @@ export default class Collapsible extends React.Component {
     if (this.props.className) {
       rootClassNames[this.props.className] = true;
     }
-    const rootClasses = classNames(rootClassNames);
+    const rootClasses = clsx(rootClassNames);
 
-    const contentClasses = classNames({
+    const contentClasses = clsx({
       content: true,
       hide: this.state.collapsed
     });

src/components/EntityRepresentation.js

@@ -6,13 +6,29 @@ import {
   faFont,
   faLightbulb
 } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { AwesomeIcon } from './AwesomeIcon';
 
 const ICONS = {
-  camera: <FontAwesomeIcon icon={faCamera} title="camera" />,
-  mesh: <FontAwesomeIcon icon={faCube} title="mesh" />,
-  light: <FontAwesomeIcon icon={faLightbulb} title="light" />,
-  text: <FontAwesomeIcon icon={faFont} title="text" />
+  camera: (
+    <i title="camera">
+      <AwesomeIcon icon={faCamera} />
+    </i>
+  ),
+  mesh: (
+    <i title="mesh">
+      <AwesomeIcon icon={faCube} />
+    </i>
+  ),
+  light: (
+    <i title="light">
+      <AwesomeIcon icon={faLightbulb} />
+    </i>
+  ),
+  text: (
+    <i title="text">
+      <AwesomeIcon icon={faFont} />
+    </i>
+  )
 };
 
 export default class EntityRepresentation extends React.Component {

src/components/Main.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { faPlus } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { AwesomeIcon } from './AwesomeIcon';
 import Events from '../lib/Events';
 import ComponentsSidebar from './components/Sidebar';
 import ModalTextures from './modals/ModalTextures';
@@ -122,7 +122,7 @@ export default class Main extends React.Component {
           }}
           title="Show components"
         >
-          <FontAwesomeIcon icon={faPlus} />
+          <AwesomeIcon icon={faPlus} />
         </a>
       </div>
     );
@@ -140,7 +140,7 @@ export default class Main extends React.Component {
           }}
           title="Show scenegraph"
         >
-          <FontAwesomeIcon icon={faPlus} />
+          <AwesomeIcon icon={faPlus} />
         </a>
       </div>
     );

src/components/components/CommonComponents.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { faClipboard } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { AwesomeIcon } from '../AwesomeIcon';
 import { InputWidget } from '../widgets';
 import DEFAULT_COMPONENTS from './DefaultComponents';
 import PropertyRow from './PropertyRow';
@@ -115,7 +115,7 @@ export default class CommonComponents extends React.Component {
             copy(getEntityClipboardRepresentation(this.props.entity));
           }}
         >
-          <FontAwesomeIcon icon={faClipboard} />
+          <AwesomeIcon icon={faClipboard} />
         </a>
       </div>
     );

src/components/components/Component.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { faClipboard, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { AwesomeIcon } from '../AwesomeIcon';
 import PropertyRow from './PropertyRow';
 import Collapsible from '../Collapsible';
 import copy from 'clipboard-copy';
@@ -133,14 +133,14 @@ export default class Component extends React.Component {
                 );
               }}
             >
-              <FontAwesomeIcon icon={faClipboard} />
+              <AwesomeIcon icon={faClipboard} />
             </a>
             <a
               title="Remove component"
               className="button"
               onClick={this.removeComponent}
             >
-              <FontAwesomeIcon icon={faTrashAlt} />
+              <AwesomeIcon icon={faTrashAlt} />
             </a>
           </div>
         </div>

src/components/components/PropertyRow.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-prototype-builtins */
 import React from 'react';
-import classNames from 'classnames';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 
 import BooleanWidget from '../widgets/BooleanWidget';
 import ColorWidget from '../widgets/ColorWidget';
@@ -119,7 +119,7 @@ export default class PropertyRow extends React.Component {
     const title =
       props.name + '\n - type: ' + props.schema.type + '\n - value: ' + value;
 
-    const className = classNames({
+    const className = clsx({
       propertyRow: true,
       propertyRowDefined: props.isSingle
         ? !!props.entity.getDOMAttribute(props.componentname)

src/components/modals/ModalTextures.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { faSearch } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { AwesomeIcon } from '../AwesomeIcon';
 import Events from '../../lib/Events';
 import Modal from './Modal';
 import { insertNewAsset } from '../../lib/assetsUtils';
@@ -327,7 +327,7 @@ export default class ModalTextures extends React.Component {
                       value={this.state.filterText}
                       onChange={this.onChangeFilter}
                     />
-                    <FontAwesomeIcon icon={faSearch} />
+                    <AwesomeIcon icon={faSearch} />
                   </div>
                   <ul ref={this.registryGallery} className="gallery">
                     {this.renderRegistryImages()}