Use svg use for svg icons (#1428)

* Scope assets by version through a path element

`<use href>` can't make use of query parameters through the normal means

* Use html `use` elements for svg icons

You can imagine this as a sort of spritemap if you will.
Icons can be referenced by id and inserted into an `svg` element with `use`.

On the jobs index page, size is reduced from 305kb to 237kb. Quite nice

* Fix dash_circle naming

---------

Co-authored-by: Ben Sheldon [he/him] <bensheldon@gmail.com>

app/controllers/good_job/application_controller.rb

@@ -7,7 +7,7 @@ class ApplicationController < ActionController::Base
     around_action :use_good_job_locale
 
     content_security_policy do |policy|
-      policy.default_src(:none) if policy.default_src(*policy.default_src).blank?
+      policy.default_src(:self) if policy.default_src(*policy.default_src).blank?
       policy.connect_src(:self) if policy.connect_src(*policy.connect_src).blank?
       policy.base_uri(:none) if policy.base_uri(*policy.base_uri).blank?
       policy.font_src(:self) if policy.font_src(*policy.font_src).blank?

app/controllers/good_job/frontends_controller.rb

@@ -16,6 +16,9 @@ class FrontendsController < ActionController::Base # rubocop:disable Rails/Appli
         es_module_shims: GoodJob::Engine.root.join("app", "frontend", "good_job", "vendor", "es_module_shims.js"),
         rails_ujs: GoodJob::Engine.root.join("app", "frontend", "good_job", "vendor", "rails_ujs.js"),
       },
+      svg: {
+        icons: GoodJob::Engine.root.join("app", "frontend", "good_job", "icons.svg"),
+      },
     }.freeze
 
     MODULE_OVERRIDES = {
@@ -35,13 +38,13 @@ def self.js_modules
     end
 
     def static
-      render file: STATIC_ASSETS.dig(params[:format].to_sym, params[:name].to_sym) || raise(ActionController::RoutingError, 'Not Found')
+      render file: STATIC_ASSETS.dig(params[:format].to_sym, params[:id].to_sym) || raise(ActionController::RoutingError, 'Not Found')
     end
 
     def module
       raise(ActionController::RoutingError, 'Not Found') if params[:format] != "js"
 
-      render file: self.class.js_modules[params[:name].to_sym] || raise(ActionController::RoutingError, 'Not Found')
+      render file: self.class.js_modules[params[:id].to_sym] || raise(ActionController::RoutingError, 'Not Found')
     end
   end
 end

app/frontend/good_job/style.css

@@ -46,3 +46,8 @@
 .w-fit-content {
   width: fit-content
 }
+
+.svg-icon {
+  height: 1rem;
+  width: 1rem;
+}

app/helpers/good_job/icons_helper.rb

@@ -31,11 +31,14 @@ def status_icon(status, **options)
       content_tag :span, icon, **options
     end
 
-    def render_icon(name, **options)
-      # workaround to render svg icons without all of the log messages
-      partial = lookup_context.find_template("good_job/shared/icons/#{name}", [], true)
-      options[:class] = Array(options[:class]).join(" ")
-      partial.render(self, { class: options[:class] })
+    def render_icon(name, class: nil, **options)
+      tag.svg(viewBox: "0 0 16 16", class: "svg-icon #{binding.local_variable_get(:class)}", **options) do
+        tag.use(fill: "currentColor", href: "#{icons_path}##{name}")
+      end
+    end
+
+    def icons_path
+      @_icons_path ||= frontend_static_path(:icons, format: :svg, locale: nil)
     end
   end
 end