Stop using font-awesome fonts to render icons

This commit just does the last 1% of work necessary to get rid of font-awesome fonts.

fixes #1004
fixes #2639

CHANGES.md

@@ -12,6 +12,8 @@
 - Update `nick` attribute on ChatRoom when user nickname changes
 - Restrict editing of MUC messages to ones with the same XEP-0421 occupant ID
 - Remove unfurls for links removed in a subsequent message correction
+- #1004: Stop using fonts to render icons and use SVG instead
+- #2797: Weird unicode characters rendering outside of line-height
 - #2870: Fix for multiple URLs to be linkified when sent together in chat and adds a test for this.
 - #2879: Quotes, lines not aligned to the first line
 - #2925: Fix missing disco-items in browser storage.

package-lock.json

@@ -11,7 +11,6 @@
       "dependencies": {
         "@converse/openpromise": "^0.0.1",
         "@converse/skeletor": "0.0.7",
-        "@fortawesome/fontawesome-free": "5.14.0",
         "bootstrap": "^4.6.0",
         "bootstrap.native": "^2.0.27",
         "client-compress": "^2.2.2",
@@ -1906,14 +1905,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@fortawesome/fontawesome-free": {
-      "version": "5.14.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.14.0.tgz",
-      "integrity": "sha512-OfdMsF+ZQgdKHP9jUbmDcRrP0eX90XXrsXIdyjLbkmSBzmMXPABB8eobUJtivaupucYaByz6WNe1PI1JuYm3qA==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/@gar/promisify": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
@@ -19122,11 +19113,6 @@
         }
       }
     },
-    "@fortawesome/fontawesome-free": {
-      "version": "5.14.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.14.0.tgz",
-      "integrity": "sha512-OfdMsF+ZQgdKHP9jUbmDcRrP0eX90XXrsXIdyjLbkmSBzmMXPABB8eobUJtivaupucYaByz6WNe1PI1JuYm3qA=="
-    },
     "@gar/promisify": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",

package.json

@@ -105,7 +105,6 @@
     "webpack-merge": "^5.8.0"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "5.14.0",
     "bootstrap": "^4.6.0",
     "bootstrap.native": "^2.0.27",
     "client-compress": "^2.2.2",

src/plugins/bookmark-views/templates/list.js

@@ -14,8 +14,11 @@ const list = (el, bookmarks) => {
                title="${desc_bookmarks}"
                @click=${() => el.toggleBookmarksList()}>
 
-                <span class="fa ${(toggle_state === _converse.OPENED) ? 'fa-caret-down' : 'fa-caret-right' }">
-                </span> ${label_bookmarks}</a>
+               <converse-icon
+                   class="fa ${(toggle_state === _converse.OPENED) ? 'fa-caret-down' : 'fa-caret-right' }"
+                   size="1em"
+                   color="var(--muc-color)">
+                </converse-icon> ${label_bookmarks}</a>
             <div class="items-list bookmarks rooms-list ${ (toggle_state === _converse.OPENED) ? 'fade-in' : 'hidden fade-out' }">
             ${ _converse.bookmarks.map(bm => bookmark_item(bm)) }
             </div>

src/plugins/roomslist/templates/roomslist.js

@@ -93,7 +93,11 @@ export default (o) => {
 
         <div class="list-container list-container--openrooms ${ o.rooms.length ? '' : 'hidden' }">
             <a class="list-toggle open-rooms-toggle controlbox-padded" title="${i18n_desc_rooms}" @click=${o.toggleRoomsList}>
-            <span class="fa ${ (o.toggle_state === _converse.OPENED) ? 'fa-caret-down' : 'fa-caret-right' }"></span> ${__('Open Groupchats')}</a>
+            <converse-icon
+                class="fa ${ (o.toggle_state === _converse.OPENED) ? 'fa-caret-down' : 'fa-caret-right' }"
+                size="1em"
+                color="var(--muc-color)">
+            </converse-icon> ${__('Open Groupchats')}</a>
             <div class="items-list rooms-list open-rooms-list ${ o.collapsed && 'collapsed' }">
                 ${ o.rooms.map(room => room_item(Object.assign({room}, o))) }
             </div>

src/shared/chat/templates/message-text.js

@@ -7,6 +7,10 @@ const tpl_edited_icon = (el) => {
     return html`<converse-icon title="${ i18n_edited }" class="fa fa-edit chat-msg__edit-modal" @click=${el.showMessageVersionsModal} size="1em"></converse-icon>`;
 }
 
+const tpl_checkmark = () => {
+    return html`<converse-icon size="1em" color="var(--chat-color)" class="fa fa-check chat-msg__receipt"></converse-icon>`
+}
+
 
 export default (el) => {
     const i18n_show = __('Show more');
@@ -37,7 +41,7 @@ export default (el) => {
                 hide_url_previews=${el.model.get('hide_url_previews')}
                 ?is_me_message=${el.model.isMeCommand()}
                 text="${text}"></converse-chat-message-body>
-            ${ (el.model.get('received') && !el.model.isMeCommand() && !is_groupchat_message) ? html`<span class="fa fa-check chat-msg__receipt"></span>` : '' }
+            ${ (el.model.get('received') && !el.model.isMeCommand() && !is_groupchat_message) ? tpl_checkmark() : '' }
             ${ (el.model.get('edited')) ? tpl_edited_icon(el) : '' }
         </span>
         ${ show_oob ? html`<div class="chat-msg__media">${getOOBURLMarkup(el.model.get('oob_url'))}</div>` : '' }

src/shared/styles/font-awesome.scss

@@ -1,101 +0,0 @@
-@font-face {
-  font-family: 'Baumans';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Baumans Regular'), local('Baumans-Regular'), url('webfonts/baumans.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Muli';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Muli Regular'), local('Muli-Regular'), url('webfonts/muli.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'ConverseFontAwesomeBrands';
-  font-style: normal;
-  font-weight: normal;
-  src: url('webfonts/fa-brands-400.eot');
-  src: url('webfonts/fa-brands-400.eot?#iefix') format('embedded-opentype'),
-  url('webfonts/fa-brands-400.woff2') format('woff2'),
-  url('webfonts/fa-brands-400.woff') format('woff'),
-  url('webfonts/fa-brands-400.ttf') format('truetype'),
-  url('webfonts/fa-brands-400.svg#fontawesome') format('svg');
-}
-
-@font-face {
-  font-family: 'ConverseFontAwesomeRegular';
-  font-style: normal;
-  font-weight: 400;
-  src: url('webfonts/fa-regular-400.eot');
-  src: url('webfonts/fa-regular-400.eot?#iefix') format('embedded-opentype'),
-    url('webfonts/fa-regular-400.woff2') format('woff2'),
-    url('webfonts/fa-regular-400.woff') format('woff'),
-    url('webfonts/fa-regular-400.ttf') format('truetype'),
-    url('webfonts/fa-regular-400.svg#fontawesome') format('svg');
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'ConverseFontAwesomeSolid';
-  font-style: normal;
-  font-weight: 900;
-  src: url('webfonts/fa-solid-900.eot');
-  src: url('webfonts/fa-solid-900.eot?#iefix') format('embedded-opentype'),
-  url('webfonts/fa-solid-900.svg#fontawesome') format('svg'),
-  url('webfonts/fa-solid-900.woff2') format('woff2'),
-  url('webfonts/fa-solid-900.woff') format('woff'),
-  url('webfonts/fa-solid-900.ttf') format('truetype');
-}
-
-
-@import "@fortawesome/fontawesome-free/scss/variables";
-@import "@fortawesome/fontawesome-free/scss/mixins";
-@import "@fortawesome/fontawesome-free/scss/core";
-@import "@fortawesome/fontawesome-free/scss/larger";
-@import "@fortawesome/fontawesome-free/scss/fixed-width";
-@import "@fortawesome/fontawesome-free/scss/list";
-@import "@fortawesome/fontawesome-free/scss/bordered-pulled";
-@import "@fortawesome/fontawesome-free/scss/animated";
-@import "@fortawesome/fontawesome-free/scss/rotated-flipped";
-@import "@fortawesome/fontawesome-free/scss/stacked";
-@import "@fortawesome/fontawesome-free/scss/icons";
-@import "@fortawesome/fontawesome-free/scss/screen-reader";
-
-.conversejs, .converse-website {
-  /* Apparent font-awesome bug? The circle has some kind of bottom margin */
-
-  converse-icon:before {
-    content: none !important;
-  }
-
-  .far:not(converse-icon) {
-    font-family: 'ConverseFontAwesomeRegular' !important;
-    font-weight: 400;
-  }
-  .fa:not(converse-icon),
-  .fas:not(converse-icon) {
-    font-family: 'ConverseFontAwesomeSolid' !important;
-    font-weight: 900;
-  }
-
-  .fab:not(converse-icon) {
-    font-family: 'ConverseFontAwesomeBrands';
-  }
-
-  .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;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-  }
-  .fa-info-circle {
-      height: 1em;
-  }
-}

src/shared/styles/fonts.scss

@@ -0,0 +1,25 @@
+@font-face {
+  font-family: 'Baumans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Baumans Regular'), local('Baumans-Regular'), url('webfonts/baumans.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Muli';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Muli Regular'), local('Muli-Regular'), url('webfonts/muli.ttf') format('truetype');
+}
+
+.conversejs, .converse-website {
+  /* Apparent font-awesome bug? The circle has some kind of bottom margin */
+
+  converse-icon:before {
+    content: none !important;
+  }
+
+  .fa-info-circle {
+      height: 1em;
+  }
+}

src/shared/styles/index.scss

@@ -8,7 +8,7 @@
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
 
-@import "./font-awesome.scss";
+@import "./fonts.scss";
 @import "mixins";
 
 .conversejs {