DEV: fix some deprecated SVG icon refs

app/assets/javascripts/admin/components/user-flag-percentage.js.es6

@@ -30,7 +30,7 @@ export default Ember.Component.extend({
       result.className = "disagreed";
       result.label = `${result.disagreed}%`;
     } else {
-      result.icon = "external-link";
+      result.icon = "external-link-alt";
       result.className = "ignored";
       result.label = `${result.ignored}%`;
     }

app/assets/javascripts/admin/helpers/disposition-icon.js.es6

@@ -9,7 +9,7 @@ export default Ember.Helper.extend({
     let title = "admin.flags.dispositions." + disposition;
     switch (disposition) {
       case "deferred": {
-        icon = "external-link";
+        icon = "external-link-alt";
         break;
       }
       case "agreed": {

app/assets/javascripts/admin/templates/components/flagged-post.hbs

@@ -94,7 +94,7 @@
           class="btn-default defer-flag"
           title="admin.flags.ignore_flag_title"
           action=(action "defer")
-          icon="external-link"
+          icon="external-link-alt"
           label="admin.flags.ignore_flag"}}
 
         {{admin-delete-flag-dropdown

app/assets/javascripts/admin/templates/components/themes-list-item.hbs

@@ -12,7 +12,7 @@
           {{d-icon "check" class="default-indicator" title="admin.customize.theme.default_theme_tooltip"}}
         {{/if}}
         {{#if theme.isPendingUpdates}}
-          {{d-icon "refresh" title="admin.customize.theme.updates_available_tooltip" class="light-grey-icon"}}
+          {{d-icon "sync" title="admin.customize.theme.updates_available_tooltip" class="light-grey-icon"}}
         {{/if}}
         {{#if theme.isBroken}}
           {{d-icon "exclamation-circle" class="broken-indicator" title="admin.customize.theme.broken_theme_tooltip"}}

app/assets/javascripts/admin/templates/customize-themes-index.hbs

@@ -4,7 +4,7 @@
     <h1>{{I18n "admin.customize.theme.themes_intro"}}</h1>
     <div class="external-resources">
       {{#each externalResources as |resource|}}
-        <a href={{resource.link}} class="external-link" target="_blank">
+        <a href={{resource.link}} class="external-link-alt" target="_blank">
           {{d-icon resource.icon}}
           {{I18n resource.key}}
         </a>

app/assets/javascripts/admin/templates/users-list-show.hbs

@@ -52,7 +52,7 @@
               </a>
               {{#link-to 'adminUser' user}}{{unbound user.username}}{{/link-to}}
               {{#if user.staged}}
-                {{d-icon "envelope-o" title="user.staged" }}
+                {{d-icon "far-envelope" title="user.staged" }}
               {{/if}}
             </td>
             <td class='email'>

app/assets/javascripts/admin/templates/version-checks.hbs

@@ -9,13 +9,13 @@
       </div>
 
       {{#if versionCheck.noCheckPerformed}}
-        <div class="version-number"> 
-          <h4>{{i18n 'admin.dashboard.latest_version'}}</h4>  
+        <div class="version-number">
+          <h4>{{i18n 'admin.dashboard.latest_version'}}</h4>
           <h3>&mdash;</h3>
         </div>
         <div class="version-status">
           <div class="face">
-            <span class="icon critical-updates-available">{{d-icon "frown-o"}}</span>
+            <span class="icon critical-updates-available">{{d-icon "far-frown"}}</span>
           </div>
           <div class="version-notes">
             <span class="normal-note">{{i18n 'admin.dashboard.no_check_performed'}}</span>
@@ -24,15 +24,15 @@
       {{else}}
         {{#if versionCheck.stale_data}}
           <div class="version-number">
-            <h4>{{i18n 'admin.dashboard.latest_version'}}</h4>  
+            <h4>{{i18n 'admin.dashboard.latest_version'}}</h4>
             <h3>{{#if versionCheck.version_check_pending}}{{dash-if-empty versionCheck.installed_version}}{{/if}}</h3>
             </div>
           <div class="version-status">
             <div class="face">
               {{#if versionCheck.version_check_pending}}
-                <span class='icon up-to-date'>{{d-icon "smile-o"}}</span>
+                <span class='icon up-to-date'>{{d-icon "far-smile"}}</span>
               {{else}}
-                <span class="icon critical-updates-available">{{d-icon "frown-o"}}</span>
+                <span class="icon critical-updates-available">{{d-icon "far-frown"}}</span>
               {{/if}}
             </div>
             <div class="version-notes">
@@ -47,19 +47,19 @@
           </div>
         {{else}}
           <div class="version-number">
-            <h4>{{i18n 'admin.dashboard.latest_version'}}</h4>  
+            <h4>{{i18n 'admin.dashboard.latest_version'}}</h4>
             <h3>{{dash-if-empty versionCheck.latest_version}}</h3>
           </div>
           <div class="version-status">
             <div class="face">
               {{#if versionCheck.upToDate }}
-              <span class='icon up-to-date'>{{d-icon "smile-o"}}</span>
+              <span class='icon up-to-date'>{{d-icon "far-smile"}}</span>
               {{else}}
                 <span class="icon {{if versionCheck.critical_updates 'critical-updates-available' 'updates-available'}}">
                   {{#if versionCheck.behindByOneVersion}}
                     {{d-icon "meh-o"}}
                   {{else}}
-                    {{d-icon "frown-o"}}
+                    {{d-icon "far-frown"}}
                   {{/if}}
                 </span>
               {{/if}}

app/assets/javascripts/discourse/components/composer-action-title.js.es6

@@ -56,7 +56,7 @@ export default Ember.Component.extend({
 
     if (originalUser) {
       editTitle += `
-        ${iconHTML("mail-forward", { class: "reply-to-glyph" })}
+        ${iconHTML("share", { class: "reply-to-glyph" })}
         ${originalUser.avatar}
         <span class="original-username">${originalUser.username}</span>
       `;

app/assets/javascripts/discourse/components/composer-editor.js.es6

@@ -816,7 +816,7 @@ export default Ember.Component.extend({
       toolbar.addButton({
         id: "quote",
         group: "fontStyles",
-        icon: "comment-o",
+        icon: "far-comment",
         sendAction: this.get("importQuote"),
         title: "composer.quote_post_title",
         unshift: true

app/assets/javascripts/discourse/components/d-editor.js.es6

@@ -134,7 +134,7 @@ class Toolbar {
       this.addButton({
         id: "toggle-direction",
         group: "extras",
-        icon: "exchange",
+        icon: "exchange-alt",
         shortcut: "Shift+6",
         title: "composer.toggle_direction",
         perform: e => e.toggleDirection()

app/assets/javascripts/discourse/initializers/enable-emoji.js.es6

@@ -16,7 +16,7 @@ export default {
         toolbar.addButton({
           id: "emoji",
           group: "extras",
-          icon: "smile-o",
+          icon: "far-smile",
           action: () => toolbar.context.send("emoji"),
           title: "composer.emoji"
         });

app/assets/javascripts/discourse/lib/plugin-api.js.es6

@@ -133,12 +133,20 @@ class PluginApi {
    *
    *   // for the place in code that render a string
    *   string() {
-   *     return "<i class='fa fa-smile-o'></i>";
+   *     return "<svg class=\"fa d-icon d-icon-far-smile svg-icon\" aria-hidden=\"true\"><use xlink:href=\"#far-smile\"></use></svg>";
    *   },
    *
    *   // for the places in code that render virtual dom elements
    *   node() {
-   *     return h('i', { className: 'fa fa-smile-o' });
+   *     return h("svg", {
+   *          attributes: { class: "fa d-icon d-icon-far-smile", "aria-hidden": true },
+   *          namespace: "http://www.w3.org/2000/svg"
+   *        },[
+   *          h("use", {
+   *          "xlink:href": attributeHook("http://www.w3.org/1999/xlink", `#far-smile`),
+   *          namespace: "http://www.w3.org/2000/svg"
+   *        })]
+   *     );
    *   }
    * });
    **/

app/assets/javascripts/discourse/templates/about.hbs

@@ -97,7 +97,7 @@
 
       {{#if contactInfo}}
         <section class='about contact'>
-            <h3>{{d-icon "envelope-o"}} {{i18n 'about.contact'}}</h3>
+            <h3>{{d-icon "far-envelope"}} {{i18n 'about.contact'}}</h3>
             <p>{{{contactInfo}}}</p>
         </section>
       {{/if}}

app/assets/javascripts/discourse/templates/components/desktop-notification-config.hbs

@@ -6,10 +6,10 @@
   {{i18n "user.desktop_notifications.perm_denied_expl"}}
 {{else}}
   {{#if isEnabled}}
-    {{d-button icon="bell-slash-o" class="btn-default"  label="user.desktop_notifications.disable" action=(action "turnoff")}}
+    {{d-button icon="far-bell-slash" class="btn-default"  label="user.desktop_notifications.disable" action=(action "turnoff")}}
     {{i18n "user.desktop_notifications.currently_enabled"}}
   {{else}}
-    {{d-button icon="bell-o" class="btn-default" label="user.desktop_notifications.enable" action=(action "turnon")}}
+    {{d-button icon="far-bell" class="btn-default" label="user.desktop_notifications.enable" action=(action "turnon")}}
     {{i18n "user.desktop_notifications.currently_disabled"}}
   {{/if}}
 {{/if}}

app/assets/javascripts/discourse/templates/components/edit-category-settings.hbs

@@ -147,7 +147,7 @@
 
     <section class='field'>
       <label for="category-email-in">
-        {{d-icon "envelope-o"}}
+        {{d-icon "far-envelope"}}
         {{i18n 'category.email_in'}}
       </label>
               {{text-field id="category-email-in" class="email-in" value=category.email_in}}

app/assets/javascripts/discourse/templates/components/user-card-contents.hbs

@@ -133,11 +133,11 @@
           </h3>
           {{#if showCheckEmail}}
             <h3 class="email">
-              {{d-icon "envelope-o" title="user.email.title"}}
+              {{d-icon "far-envelope" title="user.email.title"}}
               {{#if user.email}}
                 {{user.email}}
               {{else}}
-                {{d-button action=(action "checkEmail") actionParam=user icon="envelope-o" label="admin.users.check_email.text" class="btn-primary"}}
+                {{d-button action=(action "checkEmail") actionParam=user icon="far-envelope" label="admin.users.check_email.text" class="btn-primary"}}
               {{/if}}
             </h3>
           {{/if}}

app/assets/javascripts/discourse/templates/composer.hbs

@@ -195,7 +195,7 @@
 
         <div class='draft-text'>
           {{#if model.topic}}
-            {{d-icon "mail-forward"}} {{{draftTitle}}}
+            {{d-icon "share"}} {{{draftTitle}}}
           {{else}}
             {{i18n "composer.saved_draft"}}
           {{/if}}

app/assets/javascripts/discourse/templates/preferences/account.hbs

@@ -45,7 +45,7 @@
       </div>
     {{else}}
       <div class="controls">
-        {{d-button action=(route-action "checkEmail") class="btn-default" actionParam=model title="admin.users.check_email.title" icon="envelope-o" label="admin.users.check_email.text"}}
+        {{d-button action=(route-action "checkEmail") class="btn-default" actionParam=model title="admin.users.check_email.title" icon="far-envelope" label="admin.users.check_email.text"}}
       </div>
     {{/if}}
   </div>
@@ -132,7 +132,7 @@
       </table>
     {{else}}
       <div class="controls">
-        {{d-button action=(route-action "checkEmail") actionParam=model title="admin.users.check_email.title" icon="envelope-o" label="admin.users.check_email.text"}}
+        {{d-button action=(route-action "checkEmail") actionParam=model title="admin.users.check_email.title" icon="far-envelope" label="admin.users.check_email.text"}}
       </div>
     {{/if}}
   </div>

app/assets/javascripts/discourse/templates/user.hbs

@@ -165,7 +165,7 @@
               {{#if model.email}}
                 {{model.email}}
               {{else}}
-                {{d-button action=(route-action "checkEmail") actionParam=model icon="envelope-o" label="admin.users.check_email.text" class="btn-primary"}}
+                {{d-button action=(route-action "checkEmail") actionParam=model icon="far-envelope" label="admin.users.check_email.text" class="btn-primary"}}
               {{/if}}
             </dd>
             </div>
@@ -207,7 +207,7 @@
         </li>
       {{/if}}
       {{#if showPrivateMessages}}
-        <li>{{#link-to 'userPrivateMessages'}}{{d-icon "envelope-o"}}{{i18n 'user.private_messages'}}{{/link-to}}</li>
+        <li>{{#link-to 'userPrivateMessages'}}{{d-icon "far-envelope"}}{{i18n 'user.private_messages'}}{{/link-to}}</li>
       {{/if}}
       {{#if canInviteToForum}}
         <li>{{#link-to 'userInvited'}}{{d-icon "user-plus"}}{{i18n 'user.invited.title'}}{{/link-to}}</li>

app/assets/javascripts/discourse/widgets/post.js.es6

@@ -115,7 +115,7 @@ createWidget("reply-to-tab", {
     }
 
     return [
-      iconNode("mail-forward"),
+      iconNode("share"),
       " ",
       avatarImg("small", {
         template: attrs.replyToAvatarTemplate,
@@ -202,7 +202,7 @@ createWidget("post-email-indicator", {
   html(attrs) {
     return attrs.isAutoGenerated
       ? iconNode("envelope")
-      : iconNode("envelope-o");
+      : iconNode("far-envelope");
   },
 
   click() {

app/assets/javascripts/select-kit/components/admin-delete-flag-dropdown.js.es6

@@ -29,7 +29,7 @@ export default DropdownSelectBox.extend({
     const canDeleteSpammer = this.get("canDeleteSpammer");
 
     content.push({
-      icon: "external-link",
+      icon: "external-link-alt",
       id: "delete-defer",
       action: () => this.send("deletePostDeferFlag"),
       label: I18n.t("admin.flags.delete_post_defer_flag"),

app/assets/javascripts/select-kit/components/composer-actions.js.es6

@@ -59,7 +59,7 @@ export default DropdownSelectBoxComponent.extend({
       case PRIVATE_MESSAGE:
       case CREATE_TOPIC:
       case REPLY:
-        content.icon = "mail-forward";
+        content.icon = "share";
         content.title = I18n.t("composer.composer_actions.reply");
         break;
       case EDIT:
@@ -106,7 +106,7 @@ export default DropdownSelectBoxComponent.extend({
           postUsername: _postSnapshot.get("username")
         }),
         description: I18n.t("composer.composer_actions.reply_to_post.desc"),
-        icon: "mail-forward",
+        icon: "share",
         id: "reply_to_post"
       });
     }
@@ -136,7 +136,7 @@ export default DropdownSelectBoxComponent.extend({
       items.push({
         name: I18n.t("composer.composer_actions.reply_to_topic.label"),
         description: I18n.t("composer.composer_actions.reply_to_topic.desc"),
-        icon: "mail-forward",
+        icon: "share",
         id: "reply_to_topic"
       });
     }
@@ -186,7 +186,7 @@ export default DropdownSelectBoxComponent.extend({
         description: I18n.t(
           "composer.composer_actions.reply_as_new_topic.desc"
         ),
-        icon: "mail-forward",
+        icon: "share",
         id: "create_topic"
       });
     }

test/javascripts/acceptance/group-card-mobile-test.js.es6

@@ -7,5 +7,5 @@ QUnit.test("group card", async assert => {
   assert.ok(invisible("#group-card"), "user card is invisible by default");
 
   await click("a.mention-group:first");
-  assert.ok(visible(".group-details-container"), "group page show be shown");
+  assert.ok(visible(".group-details-container"), "group page should be shown");
 });

test/javascripts/admin/components/themes-list-item-test.js.es6

@@ -26,11 +26,7 @@ componentTest("pending updates", {
 
   test(assert) {
     assert.expect(1);
-    assert.equal(
-      this.$(".d-icon-refresh").length,
-      1,
-      "shows pending update icon"
-    );
+    assert.equal(this.$(".d-icon-sync").length, 1, "shows pending update icon");
   }
 });
 

test/javascripts/components/d-editor-test.js.es6

@@ -685,7 +685,7 @@ componentTest("emoji", {
         toolbar.addButton({
           id: "emoji",
           group: "extras",
-          icon: "smile-o",
+          icon: "far-smile",
           action: () => toolbar.context.send("emoji")
         });
       });

test/javascripts/widgets/button-test.js.es6

@@ -6,7 +6,7 @@ widgetTest("icon only button", {
   template: '{{mount-widget widget="button" args=args}}',
 
   beforeEach() {
-    this.set("args", { icon: "smile-o" });
+    this.set("args", { icon: "far-smile" });
   },
 
   test(assert) {
@@ -15,7 +15,7 @@ widgetTest("icon only button", {
       "it has all the classes"
     );
     assert.ok(
-      this.$("button .d-icon.d-icon-smile-o").length,
+      this.$("button .d-icon.d-icon-far-smile").length,
       "it has the icon"
     );
   }