Added support for SVG icons

addon/components/notification-message.js

@@ -1,7 +1,8 @@
 import { htmlSafe } from '@ember/string';
 import { A } from '@ember/array';
 import Component from '@ember/component';
-import { computed } from '@ember/object';
+import { computed, get } from '@ember/object';
+import { equal } from '@ember/object/computed';
 import Ember from 'ember';
 import layout from '../templates/components/notification-message';
 import styles from '../styles/components/notification-message';
@@ -33,18 +34,26 @@ export default Component.extend({
     return false;
   }),
 
+  canShowSVG: equal('icons', 'svg'),
+
   closeIcon: computed('icons', function() {
-    if (this.get('icons') === 'bootstrap') return 'glyphicon glyphicon-remove';
+    const icons = this.get('icons');
+    if (icons === 'bootstrap') return 'glyphicon glyphicon-remove';
+
+    if(icons === 'svg') return 'close';
 
     return 'fa fa-times';
   }),
 
   // Set icon depending on notification type
   notificationIcon: computed('notification.type', 'icons', function() {
     const icons = this.get('icons');
+    const notificationType = this.get('notification.type');
+
+    if(icons == 'svg') return get(this.get('svgs'), notificationType);
 
     if (icons === 'bootstrap') {
-      switch (this.get('notification.type')){
+      switch (notificationType){
         case "info":
           return 'glyphicon glyphicon-info-sign';
         case "success":
@@ -55,7 +64,7 @@ export default Component.extend({
       }
     }
 
-    switch (this.get('notification.type')){
+    switch (notificationType){
       case "info":
         return 'fa fa-info-circle';
       case "success":

addon/helpers/equal.js

@@ -0,0 +1,7 @@
+import { helper } from '@ember/component/helper';
+
+export function equal(params) {
+  return params[0] === params[1];
+}
+
+export default helper(equal);

addon/styles/components/notification-message.css

@@ -64,6 +64,12 @@
   color: --icon-color;
 }
 
+.c-notification__svg {
+  width: 16px;
+  height: 16px;
+  vertical-align: text-top;
+}
+
 .c-notification__close {
   margin-left: --spacing-2;
   align-self: flex-start;

addon/templates/components/notification-message.hbs

@@ -1,16 +1,36 @@
-<div local-class="c-notification__icon">
-  <i class="{{notificationIcon}}"></i>
+ <div local-class="c-notification__icon">
+  {{#if canShowSVG}}
+    <svg local-class="c-notification__svg" fill="#FFFFFF" viewBox="0 0 24 24" height="48" width="48" xmlns="http://www.w3.org/2000/svg">
+      {{#if (equal notificationIcon 'success')}}
+        <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
+      {{else if (equal notificationIcon 'warning')}}
+        <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
+      {{else if (equal notificationIcon 'info')}}
+        <path d="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"/>
+      {{else if (equal notificationIcon 'error')}}
+        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
+      {{/if}}
+    </svg>
+  {{else}}
+    <i class="{{notificationIcon}}"></i>
+  {{/if}}
 </div>
+
 <div local-class="c-notification__content">
   {{#if notification.htmlContent}}
     {{{notification.message}}}
   {{else}}
     {{notification.message}}
   {{/if}}
   <div local-class="c-notification__close" {{action "removeNotification"}} title="Dismiss this notification">
-    <i class="{{closeIcon}}"></i>
+    {{#if canShowSVG}}
+      <svg local-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>
+    {{else}}
+      <i class="{{closeIcon}}"></i>
+    {{/if}}
   </div>
 </div>
+
 {{#if notification.autoClear}}
   <div local-class="c-notification__countdown" style={{notificationClearDuration}}></div>
-{{/if}}
+{{/if}}

app/components/notification-message.js

@@ -7,6 +7,12 @@ const globals = config['ember-cli-notifications'] || {}; // Import app config ob
 export default NotificationMessage.extend({
   init() {
     this._super(...arguments);
-    this.icons = globals.icons || 'font-awesome'
+    this.icons = globals.icons || 'svg';
+    this.svgs = {
+        'success': 'success',
+        'warning': 'warning',
+        'info': 'info',
+        'error': 'error',
+    };
   }
 });

app/helpers/equal.js

@@ -0,0 +1 @@
+export { default } from 'ember-cli-notifications/helpers/equal';

tests/dummy/config/environment.js

@@ -25,7 +25,7 @@ module.exports = function(environment) {
     'ember-cli-notifications': {
       autoClear: false,
       clearDuration: 2400,
-      includeFontAwesome: true,
+      icons: 'svg'
     }
   };
 

tests/integration/components/notification-message-test.js

@@ -7,10 +7,27 @@ module('Integration | Component | notification message', function(hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function(assert) {
+
     // Set any properties with this.set('myProperty', 'value');
     // Handle any actions with this.on('myAction', function(val) { ... });
 
-    await render(hbs`{{notification-message}}`);
+    let svgs = {
+      'success': 'success',
+      'warning': 'warning',
+      'info': 'info',
+      'error': 'error',
+    };
+
+    let notification = {
+      type: 'info',
+    }
+
+    this.setProperties({
+      'svgs': svgs,
+      notification
+    });
+
+    await render(hbs`{{notification-message svgs=svgs notification=notification}}`);
 
     assert.equal(find('*').textContent.trim(), '');
   });

tests/integration/helpers/equal-test.js

@@ -0,0 +1,14 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Helper | equal', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    await render(hbs`{{equal 'success' 'success'}}`);
+
+    assert.equal(this.element.textContent.trim(), "true");
+  });
+});