Replace svg path based icons with overridable components

addon/components/ecn-icon-close.js

@@ -0,0 +1,8 @@
+/* eslint-disable ember/no-classic-components */
+import Component from '@ember/component';
+import layout from '../templates/components/ecn-icon-close';
+
+export default class EmberCliNotificationsIconCloseComponent extends Component {
+  layout = layout;
+  tagName = '';
+}

addon/components/ecn-icon-error.js

@@ -0,0 +1,8 @@
+/* eslint-disable ember/no-classic-components */
+import Component from '@ember/component';
+import layout from '../templates/components/ecn-icon-error';
+
+export default class EmberCliNotificationsIconErrorComponent extends Component {
+  layout = layout;
+  tagName = '';
+}

addon/components/ecn-icon-info.js

@@ -0,0 +1,8 @@
+/* eslint-disable ember/no-classic-components */
+import Component from '@ember/component';
+import layout from '../templates/components/ecn-icon-info';
+
+export default class EmberCliNotificationsIconInfoComponent extends Component {
+  layout = layout;
+  tagName = '';
+}

addon/components/ecn-icon-success.js

@@ -0,0 +1,8 @@
+/* eslint-disable ember/no-classic-components */
+import Component from '@ember/component';
+import layout from '../templates/components/ecn-icon-success';
+
+export default class EmberCliNotificationsIconSuccessComponent extends Component {
+  layout = layout;
+  tagName = '';
+}

addon/components/ecn-icon-warning.js

@@ -0,0 +1,8 @@
+/* eslint-disable ember/no-classic-components */
+import Component from '@ember/component';
+import layout from '../templates/components/ecn-icon-warning';
+
+export default class EmberCliNotificationsIconWarningComponent extends Component {
+  layout = layout;
+  tagName = '';
+}

addon/components/notification-message.js

@@ -6,6 +6,8 @@ import { inject as service } from '@ember/service';
 
 import layout from '../templates/components/notification-message';
 
+const availableTypes = ['info', 'success', 'warning', 'error'];
+
 export default class NotificationMessage extends Component {
   layout = layout;
   tagName = '';
@@ -24,29 +26,34 @@ export default class NotificationMessage extends Component {
   }
 
   @computed('notification.type')
-  get notificationSVGPath() {
-    switch (this.notification.type) {
-      case 'error':
-      case 'info':
-        return 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z';
-      case 'success':
-        return 'M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z';
-      case 'warning':
-        return 'M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z';
+  get validType() {
+    let type = this.notification.type;
+
+    if (!type || availableTypes.indexOf(type) === -1) {
+      return '';
     }
 
-    return '';
+    return type;
   }
 
-  @computed('notification.type')
-  get processedType() {
-    let type = this.notification.type;
+  @computed('validType')
+  get isInfo() {
+    return this.validType === 'info';
+  }
 
-    if (type && ['info', 'success', 'warning', 'error'].indexOf(type) !== -1) {
-      return `c-notification--${this.notification.type}`;
-    }
+  @computed('validType')
+  get isSuccess() {
+    return this.validType === 'success';
+  }
+
+  @computed('validType')
+  get isWarning() {
+    return this.validType === 'warning';
+  }
 
-    return '';
+  @computed('validType')
+  get isError() {
+    return this.validType === 'error';
   }
 
   // Apply the clear animation duration rule inline

addon/templates/components/ecn-icon-close.hbs

@@ -0,0 +1 @@
+<svg ...attributes aria-hidden="true" focusable="false" role="img" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.29 12.783l-1.51 1.508a.708.708 0 01-1.005 0L8 10.518l-3.773 3.773a.712.712 0 01-1.008 0l-1.51-1.508a.712.712 0 010-1.007L5.482 8 1.709 4.227a.717.717 0 010-1.007l1.51-1.51a.712.712 0 011.008 0L8 5.484l3.775-3.776a.708.708 0 011.005 0l1.51 1.508c.279.279.28.73.003 1.01L10.518 8l3.772 3.776a.712.712 0 010 1.007z" fill="currentColor" fill-rule="nonzero"/></svg>

addon/templates/components/ecn-icon-error.hbs

@@ -0,0 +1 @@
+<svg ...attributes aria-hidden="true" focusable="false" role="img" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M13.714 0H2.286A2.286 2.286 0 000 2.286v11.428A2.286 2.286 0 002.286 16h11.428A2.286 2.286 0 0016 13.714V2.286A2.287 2.287 0 0013.714 0zM7 4.086c0-.472.529-.857 1-.857s1 .383 1 .857v4.571c0 .473-.527.857-1 .857s-1-.382-1-.857V4.086zm1 8.934a1.3 1.3 0 110-2.6 1.3 1.3 0 010 2.6z" fill="currentColor" fill-rule="nonzero"/></svg>

addon/templates/components/ecn-icon-info.hbs

@@ -0,0 +1 @@
+<svg ...attributes aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="currentColor" d="M7.75 0a7.751 7.751 0 000 15.5 7.75 7.75 0 100-15.5zm0 3.438a1.312 1.312 0 110 2.624 1.312 1.312 0 010-2.625zm1.248 7.937a.375.375 0 01-.375.375H6.928a.375.375 0 01-.375-.375v-.75-3.254c0-.207.168-.375.375-.375h1.695c.207 0 .375.168.375.375v4.004z"></path></svg>

addon/templates/components/ecn-icon-success.hbs

@@ -0,0 +1 @@
+<svg ...attributes aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="16" height="16"><path fill="currentColor" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg>

addon/templates/components/ecn-icon-warning.hbs

@@ -0,0 +1 @@
+<svg ...attributes aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" width="16" height="16"><path fill="currentColor" d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"></path></svg>

addon/templates/components/notification-message.hbs

@@ -1,15 +1,25 @@
 {{! template-lint-disable no-invalid-interactive no-triple-curlies }}
 <div
-  class="c-notification {{this.dismissClass}} {{this.clickableClass}} {{this.processedType}} {{@notification.cssClasses}}"
+  class="c-notification
+    {{this.dismissClass}}
+    {{this.clickableClass}}
+    {{if this.validType (concat "c-notification--" this.validType) ""}}
+    {{@notification.cssClasses}}"
   data-test-notification-message={{@notification.type}}
   {{on "mouseenter" this.handleMouseEnter}}
   {{on "mouseleave" this.handleMouseLeave}}
 >
   <div class="c-notification__icon">
-    {{#if this.notificationSVGPath}}
-      <svg class="c-notification__svg" fill="#FFFFFF" viewBox="0 0 24 24" height="48" width="48" xmlns="http://www.w3.org/2000/svg">
-        <path d={{this.notificationSVGPath}}></path>
-      </svg>
+    {{#if this.validType}}
+      {{#if this.isInfo}}
+        <EcnIconInfo class="c-notification__svg" />
+      {{else if this.isSuccess}}
+        <EcnIconSuccess class="c-notification__svg" />
+      {{else if this.isWarning}}
+        <EcnIconWarning class="c-notification__svg" />
+      {{else if this.isError}}
+        <EcnIconError class="c-notification__svg" />
+      {{/if}}
     {{/if}}
   </div>
   <div class="c-notification__content" {{on "click" this.handleOnClick}}>
@@ -18,12 +28,19 @@
     {{else}}
       {{@notification.message}}
     {{/if}}
-    <div class="c-notification__close" {{on "click" this.removeNotification}} title="Dismiss this notification">
-      <svg class="c-notification__svg" name="close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" width="1024" height="1024" fill="#FFF"><path d="M21.734 19.64l-2.097 2.094a.983.983 0 0 1-1.395 0L13 16.496l-5.238 5.238a.988.988 0 0 1-1.399 0l-2.097-2.093a.988.988 0 0 1 0-1.399L9.504 13 4.266 7.762a.995.995 0 0 1 0-1.399l2.097-2.097a.988.988 0 0 1 1.399 0L13 9.508l5.242-5.242a.983.983 0 0 1 1.395 0l2.097 2.093a.996.996 0 0 1 .004 1.403L16.496 13l5.238 5.242a.988.988 0 0 1 0 1.399z"/></svg>
+    <div
+      class="c-notification__close"
+      {{on "click" this.removeNotification}}
+      title="Dismiss this notification"
+    >
+      <EcnIconClose class="c-notification__svg" />
     </div>
   </div>
 
   {{#if @notification.autoClear}}
-    <div class="c-notification__countdown" style={{this.notificationClearDuration}}></div>
+    <div
+      class="c-notification__countdown"
+      style={{this.notificationClearDuration}}
+    ></div>
   {{/if}}
 </div>

app/components/ecn-icon-close.js

@@ -0,0 +1 @@
+export { default } from 'ember-cli-notifications/components/ecn-icon-close';

app/components/ecn-icon-error.js

@@ -0,0 +1 @@
+export { default } from 'ember-cli-notifications/components/ecn-icon-error';

app/components/ecn-icon-info.js

@@ -0,0 +1 @@
+export { default } from 'ember-cli-notifications/components/ecn-icon-info';

app/components/ecn-icon-success.js

@@ -0,0 +1 @@
+export { default } from 'ember-cli-notifications/components/ecn-icon-success';

app/components/ecn-icon-warning.js

@@ -0,0 +1 @@
+export { default } from 'ember-cli-notifications/components/ecn-icon-warning';

app/components/notification-message.js

@@ -1,19 +1 @@
-/* eslint-disable ember/require-tagless-components */
-import NotificationMessage from 'ember-cli-notifications/components/notification-message';
-
-import config from 'ember-get-config';
-
-const globals = config['ember-cli-notifications'] || {}; // Import app config object
-
-export default NotificationMessage.extend({
-  init() {
-    this._super(...arguments);
-    this.icons = globals.icons || 'svg';
-    this.svgs = {
-      success: 'success',
-      warning: 'warning',
-      info: 'info',
-      error: 'error',
-    };
-  },
-});
+export { default } from 'ember-cli-notifications/components/notification-message';

package.json

@@ -32,7 +32,8 @@
     "start": "ember serve",
     "test": "npm-run-all lint test:*",
     "test:ember": "ember test",
-    "ember-compatibility-test": "ember try:each"
+    "ember-compatibility-test": "ember try:each",
+    "ember": "ember"
   },
   "dependencies": {
     "broccoli-funnel": "^3.0.2",