Add new icon helper and the first icon: warning

ui/app/helpers/x-icon.js

@@ -0,0 +1,21 @@
+import Ember from 'ember';
+import { inlineSvg } from 'ember-inline-svg/helpers/inline-svg';
+
+// Generated at compile-time by ember-inline-svg
+import SVGs from '../svgs';
+
+/**
+ * Icon Helper
+ *
+ * Usage: {{x-icon name}}
+ *
+ * Renders an inline svg element by looking it up at `/public/images/icons/${name}.svg`
+ */
+export function xIcon(params, options) {
+  const name = params[0];
+  const classes = [options.class, 'icon', `icon-is-${name}`].compact().join(' ');
+
+  return inlineSvg(SVGs, name, { class: classes });
+}
+
+export default Ember.Helper.helper(xIcon);

ui/app/styles/core/icon.scss

@@ -0,0 +1,37 @@
+$icon-dimensions: 1.25rem;
+$icon-dimensions-small: 1rem;
+$icon-dimensions-medium: 1.5rem;
+$icon-dimensions-large: 2rem;
+
+.icon {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+  vertical-align: text-top;
+  height: $icon-dimensions;
+  width: $icon-dimensions;
+  fill: lighten($text, 25%);
+
+  &.is-small {
+    height: $icon-dimensions-small;
+    width: $icon-dimensions-small;
+  }
+
+  &.is-medium {
+    height: $icon-dimensions-medium;
+    width: $icon-dimensions-medium;
+  }
+
+  &.is-large {
+    height: $icon-dimensions-large;
+    width: $icon-dimensions-large;
+  }
+
+  @each $name, $pair in $colors {
+    $color: nth($pair, 1);
+
+    &.is-#{$name} {
+      fill: $color;
+    }
+  }
+}

ui/ember-cli-build.js

@@ -9,6 +9,9 @@ module.exports = function(defaults) {
     addons: {
       blacklist: isProd ? ['ember-freestyle'] : [],
     },
+    svg: {
+      paths: ['public/images/icons'],
+    },
   });
 
   // Use `app.import` to add additional libraries to the generated

ui/public/images/icons/warning.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
+  <path d="M3.09 0c-.06 0-.1.04-.13.09l-2.94 6.81c-.02.05-.03.13-.03.19v.81c0 .05.04.09.09.09h6.81c.05 0 .09-.04.09-.09v-.81c0-.05-.01-.14-.03-.19l-2.94-6.81c-.02-.05-.07-.09-.13-.09h-.81zm-.09 3h1v2h-1v-2zm0 3h1v1h-1v-1z" />
+</svg>