wip added svg icons into description strings

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>