Remove Font Awesome from dependencies #644

package.json

@@ -22,7 +22,6 @@
     "cash-dom": "^1.3.7",
     "codemirror": "^5.49.2",
     "codemirror-formatting": "^1.0.0",
-    "font-awesome": "^4.7.0",
     "keymaster": "^1.6.2",
     "promise-polyfill": "^8.1.3",
     "spectrum-colorpicker": "^1.8.0",

src/editor/config/config.js

@@ -148,6 +148,10 @@ export default {
   // To get more about this feature read: https://github.com/artf/grapesjs/issues/1936
   dragMode: 0,
 
+  // Import asynchronously CSS to use as icons
+  cssIcons:
+    'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css',
+
   // Dom element
   el: '',
 

src/editor/view/EditorView.js

@@ -1,4 +1,6 @@
 import Backbone from 'backbone';
+import { appendStyles } from 'utils/mixins';
+
 const $ = Backbone.$;
 
 export default Backbone.View.extend({
@@ -16,24 +18,22 @@ export default Backbone.View.extend({
   },
 
   render() {
-    const model = this.model;
-    const el = this.$el;
-    const conf = this.conf;
-    const contEl = $(conf.el || `body ${conf.container}`);
+    const { model, $el, conf } = this;
     const pfx = conf.stylePrefix;
-    el.empty();
+    const contEl = $(conf.el || `body ${conf.container}`);
+    appendStyles(conf.cssIcons, { unique: 1, prepand: 1 });
+    $el.empty();
 
     if (conf.width) contEl.css('width', conf.width);
-
     if (conf.height) contEl.css('height', conf.height);
 
-    el.append(model.get('Canvas').render());
-    el.append(this.pn.render());
-    el.attr('class', `${pfx}editor ${pfx}one-bg ${pfx}two-color`);
+    $el.append(model.get('Canvas').render());
+    $el.append(this.pn.render());
+    $el.attr('class', `${pfx}editor ${pfx}one-bg ${pfx}two-color`);
     contEl
       .addClass(`${pfx}editor-cont`)
       .empty()
-      .append(el);
+      .append($el);
 
     return this;
   }

src/styles/scss/main.scss

@@ -1,6 +1,5 @@
 /* stylelint-disable */
 @import "node_modules/spectrum-colorpicker/spectrum";
-@import "node_modules/font-awesome/scss/font-awesome";
 @import "node_modules/codemirror/lib/codemirror";
 @import "node_modules/codemirror/theme/hopscotch";
 

src/utils/mixins.js

@@ -1,4 +1,4 @@
-import { keys, isUndefined, isElement } from 'underscore';
+import { keys, isUndefined, isElement, isArray } from 'underscore';
 
 const elProt = window.Element.prototype;
 const matches =
@@ -7,6 +7,33 @@ const matches =
   elProt.mozMatchesSelector ||
   elProt.msMatchesSelector;
 
+/**
+ * Import styles asynchronously
+ * @param {String|Array<String>} styles
+ */
+const appendStyles = (styles, opts = {}) => {
+  const stls = isArray(styles) ? [...styles] : [styles];
+
+  if (stls.length) {
+    const href = stls.shift();
+
+    if (!opts.unique || !document.querySelector(`link[href="${href}"]`)) {
+      const { head } = document;
+      const link = document.createElement('link');
+      link.href = href;
+      link.rel = 'stylesheet';
+
+      if (opts.prepand) {
+        head.insertBefore(link, head.firstChild);
+      } else {
+        head.appendChild(link);
+      }
+    }
+
+    appendStyles(stls);
+  }
+};
+
 /**
  * Returns shallow diff between 2 objects
  * @param  {Object} objOrig
@@ -201,5 +228,6 @@ export {
   normalizeFloat,
   getPointerEvent,
   getUnitFromValue,
-  capitalize
+  capitalize,
+  appendStyles
 };