FEATURE: Update Font Awesome to v5.4.1 and SVGs (#6557)

* First take on subsetting svg icons

* FontAwesome 5 svg subset WIP

* Include icons from plugins/badges into svg sprite subset

* add svg icon support to themes

* Add spec for SvgSprite

* Misc. SVG icon fixes

* Use FA5 svgs in local-dates plugin

* CSS adjustments, fix SVG icons in group flair

* Use SVG icons in poll plugin

* Add SVG icons to /wizard

test/javascripts/acceptance/group-index-test.js.es6

@@ -6,7 +6,7 @@ QUnit.test("Viewing Members as anon user", async assert => {
   await visit("/groups/discourse");
 
   assert.ok(
-    count(".avatar-flair .fa-adjust") === 1,
+    count(".avatar-flair .d-icon-adjust") === 1,
     "it displays the group's avatar flair"
   );
   assert.ok(count(".group-members tr") > 0, "it lists group members");

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

@@ -11,7 +11,7 @@ componentTest("default theme", {
 
   test(assert) {
     assert.expect(1);
-    assert.equal(this.$(".fa-check").length, 1, "shows default theme icon");
+    assert.equal(this.$(".d-icon-check").length, 1, "shows default theme icon");
   }
 });
 
@@ -26,11 +26,15 @@ componentTest("pending updates", {
 
   test(assert) {
     assert.expect(1);
-    assert.equal(this.$(".fa-refresh").length, 1, "shows pending update icon");
+    assert.equal(
+      this.$(".d-icon-refresh").length,
+      1,
+      "shows pending update icon"
+    );
   }
 });
 
-componentTest("borken theme", {
+componentTest("broken theme", {
   template: "{{themes-list-item theme=theme}}",
   beforeEach() {
     this.set(
@@ -45,7 +49,7 @@ componentTest("borken theme", {
   test(assert) {
     assert.expect(1);
     assert.equal(
-      this.$(".fa-exclamation-circle").length,
+      this.$(".d-icon-exclamation-circle").length,
       1,
       "shows broken theme icon"
     );

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

@@ -9,7 +9,10 @@ componentTest("default", {
     const html = this.$()
       .html()
       .trim();
-    assert.equal(html, '<i class="fa fa-bars d-icon d-icon-bars"></i>');
+    assert.equal(
+      html,
+      '<svg class="fa d-icon d-icon-bars svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#bars"></use></svg>'
+    );
   }
 });
 
@@ -22,7 +25,7 @@ componentTest("with replacement", {
       .trim();
     assert.equal(
       html,
-      '<i class="fa fa-exclamation-circle d-icon d-icon-d-watching"></i>'
+      '<svg class="fa d-icon d-icon-d-watching svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#exclamation-circle"></use></svg>'
     );
   }
 });

test/javascripts/widgets/avatar-flair-test.js.es6

@@ -0,0 +1,36 @@
+import { moduleForWidget, widgetTest } from "helpers/widget-test";
+
+moduleForWidget("avatar-flair");
+
+widgetTest("avatar flair with an icon", {
+  template: '{{mount-widget widget="avatar-flair" args=args}}',
+  beforeEach() {
+    this.set("args", {
+      primary_group_flair_url: "fa-bars",
+      primary_group_flair_bg_color: "CC0000",
+      primary_group_flair_color: "FFFFFF"
+    });
+  },
+  test(assert) {
+    assert.ok(this.$(".avatar-flair").length, "it has the tag");
+    assert.ok(this.$("svg.d-icon-bars").length, "it has the svg icon");
+    assert.equal(
+      this.$(".avatar-flair").attr("style"),
+      "background-color: #CC0000; color: #FFFFFF; ",
+      "it has styles"
+    );
+  }
+});
+
+widgetTest("avatar flair with an image", {
+  template: '{{mount-widget widget="avatar-flair" args=args}}',
+  beforeEach() {
+    this.set("args", {
+      primary_group_flair_url: "/images/avatar.png"
+    });
+  },
+  test(assert) {
+    assert.ok(this.$(".avatar-flair").length, "it has the tag");
+    assert.ok(this.$("svg").length === 0, "it does not have an svg icon");
+  }
+});

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

@@ -217,7 +217,7 @@ widgetTest("handlebars d-icon", {
   },
 
   test(assert) {
-    assert.equal(this.$("i.fa.fa-arrow-down").length, 1);
+    assert.equal(this.$(".d-icon-arrow-down").length, 1);
   }
 });