Inline font-awesome icons (#134)

package.json

@@ -6,9 +6,6 @@
   "keywords": [],
   "main": "src/index.js",
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.26",
-    "@fortawesome/free-solid-svg-icons": "^5.12.0",
-    "@fortawesome/react-fontawesome": "^0.1.8",
     "lodash": "4.17.15",
     "react": "16.12.0",
     "react-dom": "16.12.0",
@@ -30,12 +27,7 @@
     "test": "react-scripts test --env=jsdom --passWithNoTests",
     "eject": "react-scripts eject"
   },
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not ie <= 11",
-    "not op_mini all"
-  ],
+  "browserslist": [">0.2%", "not dead", "not ie <= 11", "not op_mini all"],
   "eslintConfig": {
     "extends": "react-app"
   },
@@ -45,12 +37,7 @@
     }
   },
   "lint-staged": {
-    "*.{js,css,json,md,ts,tsx}": [
-      "prettier --write",
-      "git add"
-    ],
-    "*.{js,ts,tsx}": [
-      "eslint"
-    ]
+    "*.{js,css,json,md,ts,tsx}": ["prettier --write", "git add"],
+    "*.{js,ts,tsx}": ["eslint"]
   }
 }

src/index.tsx

@@ -2,14 +2,6 @@ import React from "react";
 import ReactDOM from "react-dom";
 import rough from "roughjs/bin/wrappers/rough";
 import { RoughCanvas } from "roughjs/bin/canvas";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faMousePointer,
-  faSquare,
-  faCircle,
-  faLongArrowAltRight,
-  faFont
-} from "@fortawesome/free-solid-svg-icons";
 
 import { moveOneLeft, moveAllLeft, moveOneRight, moveAllRight } from "./zindex";
 
@@ -733,25 +725,51 @@ const KEYS = {
   BACKSPACE: "Backspace"
 };
 
+// We inline font-awesome icons in order to save on js size rather than including the font awesome react library
 const SHAPES = [
   {
-    icon: faMousePointer,
+    icon: (
+      // fa-mouse-pointer
+      <svg viewBox="0 0 320 512">
+        <path d="M302.189 329.126H196.105l55.831 135.993c3.889 9.428-.555 19.999-9.444 23.999l-49.165 21.427c-9.165 4-19.443-.571-23.332-9.714l-53.053-129.136-86.664 89.138C18.729 472.71 0 463.554 0 447.977V18.299C0 1.899 19.921-6.096 30.277 5.443l284.412 292.542c11.472 11.179 3.007 31.141-12.5 31.141z" />
+      </svg>
+    ),
     value: "selection"
   },
   {
-    icon: faSquare,
+    icon: (
+      // fa-square
+      <svg viewBox="0 0 448 512">
+        <path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48z" />
+      </svg>
+    ),
     value: "rectangle"
   },
   {
-    icon: faCircle,
+    icon: (
+      // fa-circle
+      <svg viewBox="0 0 512 512">
+        <path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z" />
+      </svg>
+    ),
     value: "ellipse"
   },
   {
-    icon: faLongArrowAltRight,
+    icon: (
+      // fa-long-arrow-alt-right
+      <svg viewBox="0 0 448 512">
+        <path d="M313.941 216H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h301.941v46.059c0 21.382 25.851 32.09 40.971 16.971l86.059-86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971V216z" />
+      </svg>
+    ),
     value: "arrow"
   },
   {
-    icon: faFont,
+    icon: (
+      // fa-font
+      <svg viewBox="0 0 448 512">
+        <path d="M432 416h-23.41L277.88 53.69A32 32 0 0 0 247.58 32h-47.16a32 32 0 0 0-30.3 21.69L39.41 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-19.58l23.3-64h152.56l23.3 64H304a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM176.85 272L224 142.51 271.15 272z" />
+      </svg>
+    ),
     value: "text"
   }
 ];
@@ -989,9 +1007,7 @@ class App extends React.Component<{}, AppState> {
                     this.forceUpdate();
                   }}
                 />
-                <div className="toolIcon">
-                  <FontAwesomeIcon icon={icon} />
-                </div>
+                <div className="toolIcon">{icon}</div>
               </label>
             ))}
           </div>

src/styles.scss

@@ -67,6 +67,10 @@ body {
       align-items: center;
 
       border-radius: 3px;
+
+      svg {
+        height: 1em;
+      }
     }
     &:hover + .toolIcon {
       background-color: #e7e5e5;