wip added svg icons into description strings

client/assets/styles/instance.less

@@ -55,6 +55,11 @@
     text-transform: uppercase;
 }
 
+.instance .info svg {
+    display: inline;
+    height: 1.25em;
+}
+
 .instance .constructs {
     grid-area: constructs;
 }

client/package.json

@@ -28,6 +28,7 @@
     "preact-compat": "^3.19.0",
     "preact-context": "^1.1.3",
     "preact-redux": "^2.1.0",
+    "react-string-replace": "^0.4.4",
     "react-stripe-elements": "^3.0.0",
     "redux": "^4.0.0"
   },

client/src/components/info.component.jsx

@@ -1,5 +1,6 @@
 const preact = require('preact');
 const range = require('lodash/range');
+const reactStringReplace = require('react-string-replace');
 
 const { INFO } = require('./../constants');
 const { convertItem } = require('../utils');
@@ -24,10 +25,15 @@ function InfoComponent(args) {
         const isSpec = fullInfo.spec;
 
         if (isSkill) {
+            const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat)/;
+            const infoDescription = reactStringReplace(fullInfo.description, regEx, match => {
+                return shapes[match]();
+            });
+
             return (
                 <div class="info-skill">
                     <h2>{fullInfo.item}</h2>
-                    <div>{fullInfo.description}</div>
+                    <div> {infoDescription} </div>
                 </div>
             );
         }
@@ -103,11 +109,15 @@ function InfoComponent(args) {
                     </div>
                 );
             });
+            const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat)/;
+            const infoDescription = reactStringReplace(fullInfo.description, regEx, match => {
+                return shapes[match]();
+            });
 
             return (
                 <div class="info-spec">
                     <h2>{info}</h2>
-                    <div>{fullInfo.description}</div>
+                    <div>{infoDescription}</div>
                     <div class="thresholds">
                         {thresholds}
                     </div>