UX: replace FA5 compress/expand icons

Adds a new SVG sprite file that contains non-FontAwesome 5 icons to our subset.

Adds the FontAwesome 4.7.0 icons for expand / collapse.

app/assets/javascripts/admin/controllers/admin-customize-themes-edit.js.es6

@@ -154,7 +154,7 @@ export default Ember.Controller.extend({
 
   @computed("maximized")
   maximizeIcon(maximized) {
-    return maximized ? "compress" : "expand";
+    return maximized ? "discourse-compress" : "discourse-expand";
   },
 
   @computed("model.isSaving")

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

@@ -26,6 +26,8 @@ export default Ember.Component.extend({
 
   @computed("composeState")
   fullscreenIcon(composeState) {
-    return composeState === "fullscreen" ? "compress" : "expand";
+    return composeState === "fullscreen"
+      ? "discourse-compress"
+      : "discourse-expand";
   }
 });

app/assets/stylesheets/common/base/lightbox.scss

@@ -60,8 +60,9 @@
     right: 7px;
     &:before {
       // ideally, the SVG used here should be in HTML and reference the SVG sprite
+      // the SVG used here is the "expand" icon from FontAwesome 4.7.0
       content: svg-uri(
-        '<svg xmlns="http://www.w3.org/2000/svg" width="14px" height="16px" viewBox="0 0 512 512" fill="#{$secondary}">  <path d="M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z"/></svg>'
+        '<svg xmlns="http://www.w3.org/2000/svg" width="14px" height="16px" viewBox="0 0 1792 1792" fill="#{$secondary}"><path d="M883 1056q0 13-10 23l-332 332 144 144q19 19 19 45t-19 45-45 19h-448q-26 0-45-19t-19-45v-448q0-26 19-45t45-19 45 19l144 144 332-332q10-10 23-10t23 10l114 114q10 10 10 23zm781-864v448q0 26-19 45t-45 19-45-19l-144-144-332 332q-10 10-23 10t-23-10l-114-114q-10-10-10-23t10-23l332-332-144-144q-19-19-19-45t19-45 45-19h448q26 0 45 19t19 45z"/></svg>'
       );
       opacity: 0.8;
     }

lib/svg_sprite/svg_sprite.rb

@@ -50,6 +50,8 @@ module SvgSprite
     "crosshairs",
     "cube",
     "desktop",
+    "discourse-compress",
+    "discourse-expand",
     "download",
     "ellipsis-h",
     "ellipsis-v",
@@ -59,7 +61,6 @@ module SvgSprite
     "exclamation-circle",
     "exclamation-triangle",
     "external-link-alt",
-    "expand",
     "fab-apple",
     "fab-discourse",
     "fab-facebook-f",
@@ -223,7 +224,7 @@ Discourse SVG subset of #{fa_license}
 <svg xmlns='http://www.w3.org/2000/svg' style='display: none;'>
 """.dup
 
-    Dir["#{Rails.root}/vendor/assets/svg-icons/fontawesome/*.svg"].each do |fname|
+    Dir["#{Rails.root}/vendor/assets/svg-icons/**/*.svg"].each do |fname|
       svg_file = Nokogiri::XML(File.open(fname)) do |config|
         config.options = Nokogiri::XML::ParseOptions::NOBLANKS
       end
@@ -247,7 +248,7 @@ Discourse SVG subset of #{fa_license}
   def self.search(searched_icon)
     searched_icon = process(searched_icon.dup)
 
-    Dir["#{Rails.root}/vendor/assets/svg-icons/fontawesome/*.svg"].each do |fname|
+    Dir["#{Rails.root}/vendor/assets/svg-icons/**/*.svg"].each do |fname|
       svg_file = Nokogiri::XML(File.open(fname))
       svg_filename = "#{File.basename(fname, ".svg")}"
 

vendor/assets/svg-icons/discourse-additional.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+Additional SVG icons
+-->
+<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+  <!-- "compress" icon from https://github.com/encharm/Font-Awesome-SVG-PNG -->
+  <symbol id="discourse-compress" viewBox="0 0 1792 1792">
+    <path d="M896 960v448q0 26-19 45t-45 19-45-19l-144-144-332 332q-10 10-23 10t-23-10l-114-114q-10-10-10-23t10-23l332-332-144-144q-19-19-19-45t19-45 45-19h448q26 0 45 19t19 45zm755-672q0 13-10 23l-332 332 144 144q19 19 19 45t-19 45-45 19h-448q-26 0-45-19t-19-45v-448q0-26 19-45t45-19 45 19l144 144 332-332q10-10 23-10t23 10l114 114q10 10 10 23z"></path>
+  </symbol>
+  <!-- "expand" icon from https://github.com/encharm/Font-Awesome-SVG-PNG -->
+  <symbol id="discourse-expand" viewBox="0 0 1792 1792">
+    <path d="M883 1056q0 13-10 23l-332 332 144 144q19 19 19 45t-19 45-45 19h-448q-26 0-45-19t-19-45v-448q0-26 19-45t45-19 45 19l144 144 332-332q10-10 23-10t23 10l114 114q10 10 10 23zm781-864v448q0 26-19 45t-45 19-45-19l-144-144-332 332q-10 10-23 10t-23-10l-114-114q-10-10-10-23t10-23l332-332-144-144q-19-19-19-45t19-45 45-19h448q26 0 45 19t19 45z"></path>
+  </symbol>
+</svg>