Use icon helper for all-the-things (#2191)

* Use icon helper for all-the-things

* Pass size and color to the icon from buttonish components directly

app/components/button_component.html.erb

@@ -1,6 +1,6 @@
 <%= container do %>
   <% if icon && (icon_position != :right) %>
-    <%= lucide_icon(icon, class: icon_classes) %>
+    <%= helpers.icon(icon, size: size, color: icon_color) %>
   <% end %>
 
   <% unless icon_only? %>
@@ -8,6 +8,6 @@
   <% end %>
 
   <% if icon && icon_position == :right %>
-    <%= lucide_icon(icon, class: icon_classes) %>
+    <%= helpers.icon(icon, size: size, color: icon_color) %>
   <% end %>
 <% end %>

app/components/buttonish_component.rb

@@ -39,22 +39,19 @@ class ButtonishComponent < ViewComponent::Base
       container_classes: "px-2 py-1",
       icon_container_classes: "inline-flex items-center justify-center w-8 h-8",
       radius_classes: "rounded-md",
-      text_classes: "text-sm",
+      text_classes: "text-sm"
-      icon_classes: "w-4 h-4"
     },
     md: {
       container_classes: "px-3 py-2",
       icon_container_classes: "inline-flex items-center justify-center w-9 h-9",
       radius_classes: "rounded-lg",
-      text_classes: "text-sm",
+      text_classes: "text-sm"
-      icon_classes: "w-5 h-5"
     },
     lg: {
       container_classes: "px-4 py-3",
       icon_container_classes: "inline-flex items-center justify-center w-10 h-10",
       radius_classes: "rounded-xl",
-      text_classes: "text-base",
+      text_classes: "text-base"
-      icon_classes: "w-6 h-6"
     }
   }.freeze
 
@@ -92,9 +89,20 @@ class ButtonishComponent < ViewComponent::Base
     icon_only? ? size_data.dig(:icon_container_classes) : size_data.dig(:container_classes)
   end
 
+  def icon_color
+    # Map variant to icon color for the icon helper
+    case variant
+    when :primary, :icon_inverse
+      :white
+    when :destructive, :outline_destructive
+      :destructive
+    else
+      :default
+    end
+  end
+
   def icon_classes
     class_names(
-      size_data.dig(:icon_classes),
       variant_data.dig(:icon_classes)
     )
   end

app/components/disclosure_component.html.erb

@@ -4,7 +4,7 @@
   ) do %>
     <div class="flex items-center gap-3">
       <% if align == :left %>
-        <%= lucide_icon "chevron-right", class: "fg-gray w-5 h-5 group-open:transform group-open:rotate-90" %>
+        <%= helpers.icon "chevron-right", class: "group-open:transform group-open:rotate-90" %>
       <% end %>
 
       <%= tag.span class: class_names("font-medium", align == :left ? "text-sm text-primary" : "text-xs uppercase text-secondary") do %>
@@ -13,7 +13,7 @@
     </div>
 
     <% if align == :right %>
-      <%= lucide_icon "chevron-down", class: "fg-gray w-5 h-5 group-open:transform group-open:rotate-180" %>
+      <%= helpers.icon "chevron-down", class: "group-open:transform group-open:rotate-180" %>
     <% elsif summary_content? %>
       <%= summary_content %>
     <% end %>

app/components/link_component.html.erb

@@ -1,6 +1,7 @@
 <%= link_to href, **merged_opts do %>
   <% if icon && (icon_position != "right") %>
-    <%= lucide_icon(icon, class: icon_classes) %>
+    <%= helpers.icon(icon, size: size, color: icon_color) %>
+
   <% end %>
 
   <% unless icon_only? %>
@@ -8,6 +9,7 @@
   <% end %>
 
   <% if icon && icon_position == "right" %>
-    <%= lucide_icon(icon, class: icon_classes) %>
+    <%= helpers.icon(icon, size: size, color: icon_color) %>
+
   <% end %>
 <% end %>

app/components/menu_item_component.html.erb

@@ -4,7 +4,7 @@
   <div class="px-1">
     <%= wrapper do %>
       <% if icon %>
-        <%= lucide_icon(icon, class: destructive? ? "text-destructive" : "fg-gray") %>
+        <%= helpers.icon(icon, color: destructive? ? :destructive : :default) %>
       <% end %>
       <%= tag.span(text, class: text_classes) %>
     <% end %>

app/views/transactions/searches/filters/_badge.html.erb

@@ -2,7 +2,7 @@
 <li class="flex items-center gap-1 text-sm border border-secondary rounded-3xl p-1.5">
   <% if param_key == "start_date" || param_key == "end_date" %>
     <div class="flex items-center gap-2">
-      <%= lucide_icon "calendar", class: "w-5 h-5 text-secondary" %>
+      <%= icon "calendar" %>
       <p>
         <% if param_key == "start_date" %>
           <%= t(".on_or_after", date: param_value) %>
@@ -13,7 +13,7 @@
     </div>
   <% elsif param_key == "search" %>
     <div class="flex items-center gap-2">
-      <%= lucide_icon "text", class: "w-5 h-5 text-secondary" %>
+      <%= icon "text" %>
       <p><%= "\"#{param_value}\"".truncate(20) %></p>
     </div>
   <% elsif param_key == "accounts" %>
@@ -23,7 +23,7 @@
     </div>
   <% elsif param_key == "amount" %>
     <div class="flex items-center gap-2">
-      <%= lucide_icon "hash", class: "w-5 h-5 text-secondary" %>
+      <%= icon "hash" %>
       <p><%= param_value %></p>
     </div>
   <% elsif param_key == "types" %>
@@ -45,6 +45,6 @@
         method: :delete,
         data: { turbo: false },
         class: "flex items-center cursor-pointer" do %>
-    <%= lucide_icon "x", class: "w-4 h-4 text-secondary hover:text-primary" %>
+    <%= icon "x", size: "sm", class: "hover:text-primary" %>
   <% end %>
 </li>