Embedding icons into markup

src/js/regexper.js

@@ -184,7 +184,7 @@ export default class Regexper {
   // - __warnings__ - Array of warning messages to display.
   displayWarnings(warnings) {
     this.warnings.innerHTML = _.map(warnings, warning => {
-      return `<li class="inline-icon"><img alt="" src="/images/open-iconic/warning.svg">${warning}</li>`;
+      return `<li class="inline-icon">${util.icon("#warning")}${warning}</li>`;
     }).join('');
   }
 

src/js/util.js

@@ -124,6 +124,10 @@ function exposeError(error) {
   }, 0);
 }
 
+function icon(selector) {
+  return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 8 8"><use xlink:href="${selector}" /></svg>`;
+}
+
 export default {
   customEvent,
   normalizeBBox,
@@ -131,5 +135,6 @@ export default {
   spaceVertically,
   wait,
   tick,
-  exposeError
+  exposeError,
+  icon
 };