Merge pull request #109 from rileyhilliard/108-only-include-used-icon…

…s-in-prod-build Only import the expand icon
uber · Feb 26, 2019 · 8e60f76 · 8e60f76
2 parents 1701f9f + 3be106a
commit 8e60f76
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 12 deletions.
diff --git a/__mocks__/icon.mock.js b/__mocks__/icon.mock.js
diff --git a/flow-typed/react-icons_v2.x.x.js b/flow-typed/react-icons_v2.x.x.js
diff --git a/package.json b/package.json
@@ -31,16 +31,18 @@
   "dependencies": {
     "d3": "^5.7.0",
     "dagre": "^0.8.2",
+    "html-react-parser": "^0.6.1",
     "kld-affine": "^2.0.4",
     "kld-intersections": "^0.4.3",
     "line-intersect": "^2.1.1",
     "svg-intersections": "^0.4.0"
   },
   "devDependencies": {
+    "@fortawesome/fontawesome-free": "^5.7.2",
     "babel-cli": "^6.6.5",
     "babel-core": "^6.26.0",
-    "babel-eslint": "^8.2.6",
-    "babel-jest": "^23.4.0",
+    "babel-eslint": "^10.0.1",
+    "babel-jest": "^23.6.0",
     "babel-loader": "^7.1.5",
     "babel-plugin-react": "^1.0.0",
     "babel-plugin-transform-es2015-destructuring": "^6.23.0",
@@ -78,12 +80,12 @@
     "react": "^16.4.2",
     "react-ace": "^6.1.4",
     "react-dom": "^16.4.2",
-    "react-icons": "^3.2.2",
     "react-router-dom": "^4.3.1",
     "rimraf": "^2.6.2",
     "sass-loader": "^7.0.3",
     "source-map-loader": "^0.2.3",
-    "style-loader": "^0.21.0",
+    "style-loader": "^0.23.1",
+    "svg-inline-loader": "^0.8.0",
     "uglifyjs-webpack-plugin": "^2.0.1",
     "webpack": "^4.26.1",
     "webpack-bundle-analyzer": "3.0.4",
@@ -109,6 +111,7 @@
     "prepublish": "npm run package",
     "serve": "npm run live-serve",
     "test": "jest",
+    "test:debug": "node --inspect node_modules/.bin/jest --watch --runInBand",
     "view-cover": "npm run cover -- --report=html && opn ./coverage/index.html",
     "package": "npm-run-all clean lint test build build:prod",
     "analyze-bundle": "babel-node ./tools/analyzeBundle.js"
@@ -144,7 +147,8 @@
     ],
     "setupTestFrameworkScriptFile": "<rootDir>/jest-setup.js",
     "moduleNameMapper": {
-      "\\.(scss)$": "<rootDir>/__mocks__/styles.mock.js"
+      "\\.(scss)$": "<rootDir>/__mocks__/styles.mock.js",
+      "@fortawesome/fontawesome-free/svgs/solid/expand.svg": "<rootDir>/__mocks__/icon.mock.js"
     }
   }
 }
diff --git a/src/components/graph-controls.js b/src/components/graph-controls.js
@@ -20,9 +20,12 @@
 */
 
 import React from 'react';
-import { FaExpand } from 'react-icons/fa';
+import Parse from 'html-react-parser';
+import faExpand from '@fortawesome/fontawesome-free/svgs/solid/expand.svg';
 
 const steps = 100; // Slider steps
+const parsedIcon = Parse(faExpand); //  parse SVG once
+const ExpandIcon = () => parsedIcon; // convert SVG to react component
 
 type IGraphControlProps = {
   maxZoom?: number;
@@ -82,8 +85,12 @@ class GraphControls extends React.Component<IGraphControlProps> {
           />
           <span>+</span>
         </div>
-        <button type="button" className="slider-button" onMouseDown={this.props.zoomToFit}>
-          <FaExpand />
+        <button
+          type="button"
+          className="slider-button"
+          onMouseDown={this.props.zoomToFit}
+        >
+          <ExpandIcon />
         </button>
       </div>
     );

diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -149,7 +149,7 @@ $background-color: #f9f9f9;
 
     > .slider-button {
       background-color: white;
-      color: $primary-color;
+      fill: $primary-color;
       border: solid 1px lightgray;
       outline: none;
       width: 31px;

diff --git a/webpack.config.js b/webpack.config.js
@@ -104,6 +104,10 @@ module.exports = {
             loader: 'sass-loader' // compiles Sass to CSS
           }
         ]
+      },
+      {
+        test: /\.svg$/,
+        loader: 'svg-inline-loader'
       }
     ]
   },

diff --git a/webpack.prod.js b/webpack.prod.js
@@ -72,6 +72,10 @@ module.exports = {
             loader: 'sass-loader' // compiles Sass to CSS
           }
         ]
+      },
+      {
+        test: /\.svg$/,
+        loader: 'svg-inline-loader'
       }
     ]
   },
-Original file line number
+Diff line change
@@ Expand Up / @@ -104,6 +104,10 @@ module.exports = { @@
                 loader: 'sass-loader' // compiles Sass to CSS
               }
             ]
+          },
+          {
+            test: /\.svg$/,
+            loader: 'svg-inline-loader'
           }
         ]
       },
@@ Expand Down @@