move from emoji to icons

priv/frontend/package.json

@@ -3,8 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.0-14",
+    "@fortawesome/free-solid-svg-icons": "^5.1.0-11",
+    "@fortawesome/react-fontawesome": "0.1.0-11",
     "@nivo/line": "^0.42.1",
+    "i": "^0.3.6",
     "ms": "^2.1.1",
+    "npm": "^6.1.0",
     "react": "^16.4.0",
     "react-dom": "^16.4.0",
     "react-placeholder": "^3.0.1",

priv/frontend/src/Service.js

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
 import Graph from './Graph.js';
 import './Service.css';
 
@@ -7,7 +9,10 @@ const Service = ({ graph, name, status, latency, description }) => (
   <div className="service">
     <header>
       <div className="emoji">
-        {status ? '✅' : '🚫'}
+        <FontAwesomeIcon
+          icon={`${status ? 'check' : 'exclamation'}-circle`}
+          style={{ color: status ? '#2ECC40' : '#FF4136' }}
+        />
       </div>
       <h2 className="title">
         {name} {latency ? (

priv/frontend/src/icons.js

@@ -0,0 +1,12 @@
+import { library } from '@fortawesome/fontawesome-svg-core';
+import {
+  faCheckCircle,
+  faExclamationCircle,
+} from '@fortawesome/free-solid-svg-icons';
+
+export default function register() {
+  library.add(
+    faCheckCircle,
+    faExclamationCircle,
+  );
+}

priv/frontend/src/index.js

@@ -1,9 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
+import register from './icons.js';
 import './index.css';
 import App from './App';
 
+register();
+
 ReactDOM.render(
   <App />,
   document.getElementById('root'),