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

plugins/discourse-local-dates/assets/javascripts/discourse-local-dates.js

@@ -89,7 +89,7 @@
       }
 
       var html = "<span>";
-      html += "<i class='fa fa-globe d-icon d-icon-globe'></i>";
+      html += `<svg class="fa d-icon d-icon-globe-americas svg-icon"><use xlink:href="#globe-americas"></use></svg>`;
       html += "<span class='relative-time'></span>";
       html += "</span>";
 

plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss

@@ -7,7 +7,7 @@
     cursor: pointer;
     border-bottom: 1px dashed $primary-medium;
 
-    .d-icon-globe {
+    .d-icon {
       margin-right: 0.25em;
       color: $primary;
     }

plugins/poll/assets/javascripts/discourse/templates/modal/poll-ui-builder.hbs

@@ -73,5 +73,5 @@
 {{/d-modal-body}}
 
 <div class="modal-footer">
-  {{d-button action="insertPoll" icon="bar-chart-o" class='btn-primary' label='poll.ui_builder.insert' disabled=disableInsert}}
+  {{d-button action="insertPoll" icon="chart-bar" class='btn-primary' label='poll.ui_builder.insert' disabled=disableInsert}}
 </div>

plugins/poll/assets/javascripts/initializers/add-poll-ui-builder.js.es6

@@ -32,7 +32,7 @@ function initializePollUIBuilder(api) {
   api.addToolbarPopupMenuOptionsCallback(function() {
     return {
       action: "showPollBuilder",
-      icon: "bar-chart-o",
+      icon: "chart-bar",
       label: "poll.ui_builder.title",
       condition: "canBuildPoll"
     };

plugins/poll/assets/javascripts/widgets/discourse-poll.js.es6

@@ -39,9 +39,9 @@ createWidget("discourse-poll-option", {
     const chosen = vote.indexOf(option.id) !== -1;
 
     if (attrs.isMultiple) {
-      result.push(iconNode(chosen ? "check-square-o" : "square-o"));
+      result.push(iconNode(chosen ? "far-check-square" : "far-square"));
     } else {
-      result.push(iconNode(chosen ? "dot-circle-o" : "circle-o"));
+      result.push(iconNode(chosen ? "far-dot-circle" : "far-circle"));
     }
     result.push(" ");
     result.push(optionHtml(option));

plugins/poll/assets/stylesheets/desktop/poll.scss

@@ -47,16 +47,20 @@ div.poll {
 
   .poll {
     li[data-poll-option-id]:before {
-      font-family: FontAwesome;
-      content: "\f10c";
-      margin-right: 0.25em;
       position: relative;
       vertical-align: baseline;
+      border: 2px solid $primary;
+      border-radius: 50%;
+      display: inline-block;
+      margin-right: 0.5em;
+      width: 12px;
+      height: 12px;
+      content: "";
     }
 
     &[data-poll-type="multiple"] {
       li[data-poll-option-id]:before {
-        content: "\f096";
+        border-radius: 3px;
       }
     }
   }

plugins/poll/plugin.rb

@@ -9,6 +9,8 @@ register_asset "stylesheets/common/poll-ui-builder.scss"
 register_asset "stylesheets/desktop/poll.scss", :desktop
 register_asset "stylesheets/mobile/poll.scss", :mobile
 
+register_svg_icon "far fa-check-square"
+
 enabled_site_setting :poll_enabled
 hide_plugin if self.respond_to?(:hide_plugin)
 

plugins/poll/test/javascripts/widgets/discourse-poll-option-test.js.es6

@@ -14,7 +14,7 @@ widgetTest("single, not selected", {
   },
 
   test(assert) {
-    assert.ok(find("li .d-icon-circle-o:eq(0)").length === 1);
+    assert.ok(find("li .d-icon-far-circle:eq(0)").length === 1);
   }
 });
 
@@ -27,7 +27,7 @@ widgetTest("single, selected", {
   },
 
   test(assert) {
-    assert.ok(find("li .d-icon-dot-circle-o:eq(0)").length === 1);
+    assert.ok(find("li .d-icon-far-dot-circle:eq(0)").length === 1);
   }
 });
 
@@ -43,7 +43,7 @@ widgetTest("multi, not selected", {
   },
 
   test(assert) {
-    assert.ok(find("li .d-icon-square-o:eq(0)").length === 1);
+    assert.ok(find("li .d-icon-far-square:eq(0)").length === 1);
   }
 });
 
@@ -59,6 +59,6 @@ widgetTest("multi, selected", {
   },
 
   test(assert) {
-    assert.ok(find("li .d-icon-check-square-o:eq(0)").length === 1);
+    assert.ok(find("li .d-icon-far-check-square:eq(0)").length === 1);
   }
 });