fa_icon_helper provides accurate warnings

app/helpers/fa_icon_helper.rb

@@ -1,32 +1,30 @@
 # Font Awesome Helper
 module FaIconHelper
+  LOGGER = SemanticLogger[Module.nesting[0]]
   ##
   # mandatory:
   #   name: without 'fa-' prefix
   #     might be a symbol, automatic conversion of undashed symbol
   #       for instance symbol :magnify_lens is converted to string 'magnify-lens'
   # optional:
-  #   stroke: [:solid|:regular|:brands] solid as default value
-  #   size: [2x, 3x, ... ]
+  #   style: [:solid|:regular|:brands] solid as default value
+  #   size: [2, 3, ..., 10 ]
   #   class: extra classes, any tailwind keyword...
   #   aria-hidden: true as default value
   #
   # example:
   #   fa_icon(:user)
-  #   fa_icon(:user, stroke: :regular)
-  #   fa_icon(:user, size: '2x')
+  #   fa_icon(:user, style: :regular)
+  #   fa_icon(:user, size: 2)
   #   fa_icon(:user, class: 'text-blue-500')
   ##
   def fa_icon(name, html_options = {})
     warn_useless_options html_options
 
-    icon = to_dash(name)
-    stroke = to_dash(html_options[:stroke] || :solid)
-
-    content_class = "fa-#{icon} fa-#{stroke}"
-    content_class << " fa-#{html_options[:size]}" if html_options.key? :size
-    content_class << " #{html_options[:class]}" if html_options.key? :class
-
+    fa_icon = "fa-#{to_dash(name)}"
+    fa_style = "fa-#{to_dash(html_options[:style] || :solid)}"
+    fa_size = to_fa_size(html_options[:size])
+    content_class = [fa_icon, fa_style, fa_size, html_options[:class]].compact.join(' ')
     tag.i(class: content_class, 'aria-hidden': html_options['aria-hidden'] || true)
   end
 
@@ -34,9 +32,24 @@ module FaIconHelper
 
   def to_dash(symbol) = symbol.to_s.dasherize
 
+  def to_fa_size(value)
+    return unless value
+
+    size = value.to_i
+    unless (1..10).include? size
+      LOGGER.warn "unparseable size <#{value}>, should be an integer from a range of 1 to 10!",
+                  Rails.backtrace_cleaner.clean(caller[1..])&.first
+      return
+    end
+    return if size == 1
+
+    "fa-#{size}x"
+  end
+
   def warn_useless_options(hash)
-    hash.except(:stroke, :size, :class, 'aria-hidden').each_key do |key|
-      SemanticLogger[Module.nesting[0]].warn "useless option <#{key}>, please consider removal for safety reason!"
+    hash.except(:style, :size, :class, 'aria-hidden').each_key do |key|
+      LOGGER.warn "useless option <#{key}>, please consider removal for safety reason!",
+                  Rails.backtrace_cleaner.clean(caller[3..])&.first
     end
   end
 end

app/views/layouts/_navbar.html.erb

@@ -1,7 +1,13 @@
 <nav class='text-2xl p-4'>
   <%= fa_icon :eye %>
+  <%= fa_icon :eye, size: 2, class: 'text-red-500' %>
   <%= Rails.configuration.application_title %>
   <span class='title'>this is a text</span>
   <span>this is toto</span>
   <h1 x-data="{ message: 'I ❤️ Alpine' }" x-text="message"></h1>
+
+  <span class='group'>
+    <%= fa_icon :chevron_down, class: 'transition ease-in-out duration-150 group-hover:text-black group-hover:rotate-180 ' %>
+    HOVER ME
+  </span>
 </nav>

app/views/scores/_score.html.erb

@@ -9,7 +9,7 @@
 
   <td>
     <% if action_name != "show" %>
-      <%= link_to score do %><%=fa_icon :eye, stroke: :regular, size: '4x', class: 'border rounded-lg border-purple-800 m-1 p-2 bg-white' %>Show Score<% end %>
+      <%= link_to score do %><%=fa_icon :eye, style: :regular, size: '4x', class: 'border rounded-lg border-purple-800 m-1 p-2 bg-white' %>Show Score<% end %>
       <%= link_to "Edit this score", edit_score_path(score), class: "rounded-xl border border-yellow-300 py-3 ml-2 px-5 bg-gray-100 inline-block font-medium" %>
       <%= link_to "Edit this score", edit_score_path(score), class: "rounded-lg py-3 ml-2 px-5 bg-gray-100 inline-block font-medium" %>
       <%= button_to "Destroy this score", score_path(score), method: :delete, class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 font-medium" %>

config/importmap.rb

@@ -7,13 +7,14 @@ pin '@hotwired/turbo-rails', to: 'turbo.min.js', preload: true
 pin '@hotwired/stimulus', to: 'stimulus.min.js'
 pin '@hotwired/stimulus-loading', to: 'stimulus-loading.js'
 
-pin 'toastify-js' # @1.12.0
-
 pin '@fortawesome/fontawesome-svg-core', to: '@fortawesome--fontawesome-svg-core.js' # @6.5.2
 pin '@fortawesome/free-brands-svg-icons', to: '@fortawesome--free-brands-svg-icons.js' # @6.5.2
 pin '@fortawesome/free-regular-svg-icons', to: '@fortawesome--free-regular-svg-icons.js' # @6.5.2
 pin '@fortawesome/free-solid-svg-icons', to: '@fortawesome--free-solid-svg-icons.js' # @6.5.2
 pin '@fortawesome/fontawesome-free', to: '@fortawesome--fontawesome-free.js' # @6.5.2
+
 pin 'alpinejs' # @3.14.1
 pin 'alpine-clipboard'
 pin 'alpine-turbo-drive-adapter' # @2.1.0
+
+pin 'toastify-js' # @1.12.0