Rendeer SVG icons inline

to overcome cross-site restrictions on using the `use` attribute of the `<svg>` element.

karma.conf.js

@@ -61,7 +61,6 @@ module.exports = function(config) {
     ],
 
     proxies: {
-      "/dist/\@fortawesome/fontawesome-free/sprites/solid.svg": "/base/dist/\@fortawesome/fontawesome-free/sprites/solid.svg",
       "/dist/images/custom_emojis/": "/base/dist/images/custom_emojis/"
     },
 

package-lock.json

@@ -10000,16 +10000,6 @@
 			"integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=",
 			"dev": true
 		},
-		"fa-icons": {
-			"version": "0.2.0",
-			"resolved": "https://registry.npmjs.org/fa-icons/-/fa-icons-0.2.0.tgz",
-			"integrity": "sha512-HxGOWM8gpYiilRnsOykLNyt65aC+pmJ2ulxGaWvDRsLWU9DzvN8zNoz6EIlRKJ7ytvvqpOORhxIYRndaKn36nA==",
-			"dev": true,
-			"requires": {
-				"@fortawesome/fontawesome-free": "^5.12.1",
-				"lit-element": "^2.2.1"
-			}
-		},
 		"fast-deep-equal": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",

package.json

@@ -78,7 +78,6 @@
     "eslint": "^7.3.0",
     "eslint-plugin-lodash": "^7.1.0",
     "exports-loader": "^0.7.0",
-    "fa-icons": "^0.2.0",
     "fast-text-encoding": "^1.0.2",
     "file-loader": "^6.0.0",
     "html-webpack-plugin": "^4.2.0",

sass/_messages.scss

@@ -265,6 +265,12 @@
                     padding: 0.5em 1em;
                     text-align: left;
                     white-space: nowrap;
+
+                    converse-icon {
+                        margin-right: 0.25em;
+                    }
+
+
                     &:hover {
                         color: var(--text-color);
                         background-color: var(--list-item-hover-color);

sass/font-awesome.scss

@@ -67,25 +67,28 @@
 #conversejs, .converse-website {
   /* Apparent font-awesome bug? The circle has some kind of bottom margin */
 
-  fa-icon:before {
+  converse-icon:before {
     content: none !important;
   }
 
-  .far:not(fa-icon) {
+  .far:not(converse-icon) {
     font-family: 'ConverseFontAwesomeRegular' !important;
     font-weight: 400;
   }
-  .fa:not(fa-icon),
-  .fas:not(fa-icon) {
+  .fa:not(converse-icon),
+  .fas:not(converse-icon) {
     font-family: 'ConverseFontAwesomeSolid' !important;
     font-weight: 900;
   }
 
-  .fab:not(fa-icon) {
+  .fab:not(converse-icon) {
     font-family: 'ConverseFontAwesomeBrands';
   }
 
-  .fa:not(fa-icon), .far:not(fa-icon), .fas:not(fa-icon), .fab:not(fa-icon) {
+  .fa:not(converse-icon),
+  .far:not(converse-icon),
+  .fas:not(converse-icon),
+  .fab:not(converse-icon) {
       display: inline-block;
       font-size: inherit;
       text-rendering: auto;

src/components/fa-icon.js

+import { html, css } from 'lit-element';
+import { CustomElement } from './element.js';
+
+
+class ConverseIcon extends CustomElement {
+
+    static get properties () {
+        return {
+            color: String,
+            class_name: { attribute: "class" },
+            style: String,
+            size: String
+        };
+    }
+
+    static get styles () {
+        return css`
+            :host {
+                display: inline-block;
+                padding: 0;
+                margin: 0;
+            }
+            :host svg {
+                fill: var(--fa-icon-fill-color, currentcolor);
+                width: var(--fa-icon-width, 19px);
+                height: var(--fa-icon-height, 19px);
+            }
+        `;
+    }
+
+    getSources () {
+        const get_prefix = class_name => {
+            const data = class_name.split(" ");
+            return ['solid', normalizeIconName(data[1])];
+        };
+        const normalizeIconName = name => {
+            const icon = name.replace("fa-", "");
+            return icon;
+        };
+        const data = get_prefix(this.class_name);
+        return `#${data[1]}`;
+    }
+
+    constructor () {
+        super();
+        this.class_name = "";
+        this.style = "";
+        this.size = "";
+        this.color = "";
+    }
+
+    firstUpdated () {
+        this.src = this.getSources();
+    }
+
+    _parseStyles () {
+        return `
+            ${this.size ? `width: ${this.size};` : ''}
+            ${this.size ? `height: ${this.size};` : ''}
+            ${this.color ? `fill: ${this.color};` : ''}
+            ${this.style}
+        `;
+    }
+
+    render () {
+        return html`<svg .style="${this._parseStyles()}"> <use href="${this.src}"> </use> </svg>`;
+    }
+}
+
+customElements.define("converse-icon", ConverseIcon);

src/components/font-awesome.js

+import { CustomElement } from './element.js';
+import { html } from "lit-element";
+import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';
+import { until } from 'lit-html/directives/until.js';
+
+
+export class FontAwesome extends CustomElement {
+
+    constructor () {
+        super();
+        const promise = import(/*webpackChunkName: "icons" */ '../../images/icons.svg');
+        this.data = promise.then(d => html`${unsafeSVG(d.default())}`);
+    }
+
+    render () {  // eslint-disable-line class-methods-use-this
+        return html`${until(this.data, '')}`;
+    }
+}
+
+window.customElements.define('converse-fontawesome', FontAwesome);

src/components/help_messages.js

-import 'fa-icons';
-import xss from "xss/dist/xss";
+import './icons.js';
+import xss from 'xss/dist/xss';
 import { CustomElement } from './element.js';
-import { _converse, api } from "@converse/headless/converse-core";
+import { _converse, api } from '@converse/headless/converse-core';
 import { html } from 'lit-element';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 
@@ -21,7 +21,11 @@ class ChatHelp extends CustomElement {
         const icon_color = this.chat_type === _converse.CHATROOMS_TYPE ? 'var(--chatroom-head-bg-color)' : 'var(--chat-head-color)';
         const isodate = (new Date()).toISOString();
         return [
-            html`<fa-icon class="fas fa-times close-chat-help" @click=${this.close} path-prefix="${api.settings.get("assets_path")}" color="${icon_color}" size="1em"></fa-icon>`,
+            html`<converse-icon class="fas fa-times close-chat-help"
+                    @click=${this.close}
+                    path-prefix="${api.settings.get("assets_path")}"
+                    color="${icon_color}"
+                    size="1em"></converse-icon>`,
             ...this.messages.map(m => this.renderHelpMessage({
                 isodate,
                 'markup': xss.filterXSS(m, {'whiteList': {'strong': []}})

src/components/icons.js

+/**
+ * @module icons.js
+ * @copyright Alfredo Medrano Sánchez and the Converse.js contributors
+ * @description
+ *  Component inspired by the one from fa-icons
+ *  https://github.com/obsidiansoft-io/fa-icons/blob/master/LICENSE
+ * @license Mozilla Public License (MPLv2)
+ */
+
+import { html, css } from 'lit-element';
+import { CustomElement } from './element.js';
+
+
+class ConverseIcon extends CustomElement {
+
+    static get properties () {
+        return {
+            color: String,
+            class_name: { attribute: "class" },
+            style: String,
+            size: String
+        };
+    }
+
+    static get styles () {
+        return css`
+            :host {
+                display: inline-block;
+                padding: 0;
+                margin: 0;
+            }
+        `;
+    }
+
+    constructor () {
+        super();
+        this.class_name = "";
+        this.style = "";
+        this.size = "";
+        this.color = "";
+    }
+
+    getSource () {
+        return `#${this.class_name.split(" ")[1].replace("fa-", "")}`;
+    }
+
+    getStyles () {
+        return `
+            ${this.size ? `width: ${this.size};` : ''}
+            ${this.size ? `height: ${this.size};` : ''}
+            ${this.color ? `fill: ${this.color};` : ''}
+            ${this.style}
+        `;
+    }
+
+    render () {
+        return html`<svg .style="${this.getStyles()}"> <use href="${this.getSource()}"> </use> </svg>`;
+    }
+}
+
+customElements.define("converse-icon", ConverseIcon);

src/components/message-actions.js

@@ -25,7 +25,10 @@ class MessageActions extends CustomElement {
     static getActionsDropdownItem (o) {
         return html`
             <button class="chat-msg__action ${o.button_class}" @click=${o.handler}>
-                <fa-icon class="${o.icon_class}" path-prefix="${api.settings.get("assets_path")}" color="var(--text-color-lighten-15-percent)" size="1em"></fa-icon>
+                <converse-icon class="${o.icon_class}"
+                    path-prefix="${api.settings.get("assets_path")}"
+                    color="var(--text-color-lighten-15-percent)"
+                    size="1em"></converse-icon>
                 ${o.i18n_text}
             </button>
         `;

src/converse-chatboxviews.js

@@ -6,10 +6,11 @@
 import "@converse/headless/converse-chatboxes";
 import tpl_avatar from "templates/avatar.svg";
 import tpl_background_logo from "templates/background_logo.html";
-import tpl_chatboxes from "templates/chatboxes.html";
+import tpl_converse from "templates/converse.js";
 import { Overview } from "@converse/skeletor/src/overview";
 import { View } from "@converse/skeletor/src/view";
 import { _converse, api, converse } from "@converse/headless/converse-core";
+import { render } from "lit-html";
 import { result } from "lodash-es";
 
 const u = converse.env.utils;
@@ -106,10 +107,10 @@ converse.plugins.add('converse-chatboxviews', {
 
             render () {
                 try {
-                    this.el.innerHTML = tpl_chatboxes();
+                    render(tpl_converse(), this.el);
                 } catch (e) {
                     this._ensureElement();
-                    this.el.innerHTML = tpl_chatboxes();
+                    render(tpl_converse(), this.el);
                 }
                 this.row_el = this.el.querySelector('.row');
             },

src/templates/chatboxes.html

-<div class="converse-chatboxes row no-gutters"></div>
-<div id="converse-modals" class="modals"></div>

src/templates/converse.js

+import { html } from 'lit-html';
+import '../components/font-awesome.js';
+
+
+export default () => html`
+    <div class="converse-chatboxes row no-gutters"></div>
+    <div id="converse-modals" class="modals"></div>
+    <converse-fontawesome></converse-fontawesome>
+`;

src/templates/directives/retraction.js

@@ -6,7 +6,12 @@ import { directive, html } from "lit-html";
 const i18n_retract_message = __('Retract this message');
 const tpl_retract = (o) => html`
     <button class="chat-msg__action chat-msg__action-retract" title="${i18n_retract_message}" @click=${o.onMessageRetractButtonClicked}>
-        <fa-icon class="fas fa-trash-alt" path-prefix="${api.settings.get("assets_path")}" color="var(--text-color-lighten-15-percent)" size="1em"></fa-icon>
+        <converse-icon
+            class="fas fa-trash-alt"
+            path-prefix="${api.settings.get("assets_path")}"
+            color="var(--text-color-lighten-15-percent)"
+            size="1em"
+        ></converse-icon>
     </button>
 `;
 

webpack.prod.js

@@ -21,7 +21,6 @@ module.exports = merge(common, {
         new CopyWebpackPlugin({
             patterns: [
                 {from: 'sounds', to: 'sounds'},
-                {from: 'node_modules/@fortawesome/fontawesome-free/sprites/solid.svg', to: '@fortawesome/fontawesome-free/sprites/solid.svg'},
                 {from: 'images/favicon.ico', to: 'images/favicon.ico'},
                 {from: 'images/custom_emojis', to: 'images/custom_emojis'},
                 {from: 'logo/conversejs-filled-192.png', to: 'images/logo'},